$ (document.body)와 $ ( 'body') JQuery의 차이점
저는 JQuery 초보자이며 발견 된 일부 코드에서 몇 가지 예제를 살펴 봅니다.
$(document.body) 과 $('body')
누구든지이 둘 사이에 차이점이 있다고 말할 수 있습니까?
그들은 동일한 요소를 참조하지만 차이점은 document.body요소를 jQuery에 직접 전달한다는 것입니다. 당신이 문자열을 전달하는 경우 또는 'body'의 jQuery를 선택 엔진 은을 참조 어떤 요소 (들) 파악하는 문자열을 해석 할 수있다.
실제로 둘 중 하나가 작업을 완료합니다.
관심이 있다면 jQuery 함수 에 대한 문서에 더 많은 정보가 있습니다 .
여기에있는 답변은 실제로 완전히 정확 하지 않습니다 . 닫았지만 엣지 케이스가 있습니다.
차이점은 $ ( 'body')는 실제로 태그 이름으로 요소를 선택하는 반면 document.body는 문서의 직접 객체를 참조한다는 것입니다.
즉, 사용자 (또는 불량 스크립트)가 document.body 요소 (부끄러움!)를 덮어 쓰면 $ ( 'body')는 여전히 작동하지만 $ (document.body)는 작동하지 않습니다. 따라서 정의상 동등하지 않습니다.
문서 개체에서 덮어 쓴 본문 요소의 양을 트리거하는 다른 경우 (예 : IE의 전역 적으로 id'ed 요소)가 있다고 추측하고 동일한 상황이 적용될 것입니다.
$(document.body)전역 참조를 사용 document받는 기준을 얻는 body반면 것은 $('body')jQuery를이 기준에 얻을하는 셀렉터이다 <body>상의 소자 document.
내가 볼 수있는 큰 차이는 없으며, 하나에서 다른 것으로 눈에 띄는 성능 향상도 없습니다.
내 브라우저에서 테스트 할 때 타이밍에서 꽤 큰 차이를 발견했습니다.
다음 스크립트를 사용했습니다.
경고 : 이것을 실행하면 브라우저가 약간 정지되고 충돌 할 수도 있습니다.
var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
$("body");
}
console.timeEnd('selector');
i = n;
console.time('element');
while (i --> 0){
$(document.body);
}
console.timeEnd('element');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>나는 천만 번의 상호 작용을 수행했고 그 결과는 다음과 같습니다 (Chrome 65).
선택기 : 19591.97509765625ms
요소 : 4947.8759765625ms
요소를 직접 전달하는 것이 선택자를 전달하는 것보다 약 4 배 빠릅니다.
전혀 차이가 없어야합니다. 아마도 첫 번째가 조금 더 성능이 좋을 수도 있지만 사소하다고 생각합니다 (진짜 걱정할 필요가 없습니다).
둘 다 <body>jQuery 객체에 태그 를 래핑 합니다.
Outputwise 둘 다 동등합니다. 두 번째 표현식은 DOM 루트에서 하향식 조회를 거칩니다. JQuery가 래핑 할 수있는 document.body 객체가 이미 있다면 추가 오버 헤드를 피할 수 있습니다 (미소 일 수 있음). http://api.jquery.com/jQuery/ #Selector Context 참조
참고 URL : https://stackoverflow.com/questions/12307112/difference-between-document-body-and-body-jquery
'programing tip' 카테고리의 다른 글
| Angular $ q.는 어떻게 작동합니까? (0) | 2020.09.04 |
|---|---|
| 잘못된 응용 프로그램 경로 (0) | 2020.09.04 |
| 스톱워치 대 System.DateTime.Now를 사용하여 타이밍 이벤트 (0) | 2020.09.04 |
| 일부 플랫폼에서는 char **, 다른 플랫폼에서는 const char **를받는 C ++ 함수를 이식 가능하게 호출 할 수있는 방법은 무엇입니까? (0) | 2020.09.04 |
| scala.concurrent.Promise의 사용 사례는 무엇입니까? (0) | 2020.09.04 |