jQuery에서 하위 요소를 선택하는 가장 빠른 방법은 무엇입니까?
제가 알기로는 jQuery에서 하위 요소를 선택하는 방법은 여러 가지가 있습니다.
//Store parent in a variable
var $parent = $("#parent");
방법 1 (스코프 사용)
$(".child", $parent).show();
방법 2 (find() 방법)
$parent.find(".child").show();
방법 3 (직위 아동에 한함)
$parent.children(".child").show();
방법 4 (CSS 선택기를 통해) - @spinon에 의해 제안됨
$("#parent > .child").show();
방법 5 (방법 2와 동일) - @Kai에 따름
$("#parent .child").show();
저는 이것을 혼자서 조사할 수 있는 프로파일링에 익숙하지 않기 때문에, 저는 당신이 무슨 말을 해야 하는지 알고 싶습니다.
추신: 이 질문이 중복될 수 있다는 것은 이해하지만 모든 방법을 포함하지는 않습니다.
메소드 1과 메소드 2는 유일한 차이점은 메소드 1이 전달된 범위를 구문 분석하고 이를 에 대한 호출로 변환해야 한다는 것입니다.$parent.find(".child").show();.
Method 4와 Method 5는 모두 선택기를 구문 분석한 후 다음을 호출해야 합니다.$('#parent').children().filter('.child')그리고.$('#parent').filter('.child')각각 다음과 같다.
그래서 3번 방법이 항상 가장 빠를 것입니다. 왜냐하면 그것은 가장 적은 양의 일을 할 필요가 있고 첫 번째 수준의 아이들을 얻기 위해 가장 직접적인 방법을 사용하기 때문입니다.
여기서 아누라그의 수정된 속도 테스트를 기반으로 합니다. http://jsfiddle.net/QLV9y/1/
속도 테스트: (많을수록 좋습니다)
Chrome에서는 Method 3이 Method 1/2 다음에 4/5가 가장 좋습니다.
Firefox에서는 여전히 방법 3이 방법 1/2보다 낫고 그 다음에는 4/5입니다.
Opera에서는 Method 3이 Method 4/5보다 좋고 그 다음에는 1/2보다 좋습니다.
IE 8에서는 다른 브라우저보다 전체적으로 느리지만 메소드 3, 1, 2, 4, 5 순서를 따릅니다.
전체적으로 메소드 3은 직접 호출되므로 사용하기에 가장 좋은 방법이며 메소드 1/2와 달리 둘 이상의 하위 요소 레벨을 통과할 필요가 없으며 메소드 4/5처럼 구문 분석할 필요가 없습니다.
하지만 이 중 일부에서는 방법 5가 1단계 어린이 대신 모든 어린이를 대상으로 한 것처럼 사과를 오렌지와 비교하고 있다는 점을 명심하십시오.
방법 1
jQuery를 사용하여 더 짧고 빠를 수 없습니다.이 통화는 다음으로 직접 연결됩니다.$(context).find(selector)(최적화로 인해) 다음으로 호출합니다.getElementById.
방법 2
일부 불필요한 내부 함수 호출 없이 동일한 작업을 수행합니다.
방법 3
사용.children()사용하는 것보다 빠름find()하지만 물론,children()루트 요소의 직접적인 자식만 찾을 것인 반면에find()모든 하위 요소(하위 요소 포함)에 대해 하향식으로 재귀적으로 검색합니다.
방법 4
이렇게 선택기를 사용하는 것은 더 느려야 합니다. 때부터sizzle(jQuery의 셀렉터 엔진) 오른쪽에서 왼쪽으로 작동하며 모든 클래스와 일치합니다..child먼저 ID '부모'의 직계 자녀인지 확인합니다.
방법 5
, 이 "" "" "" "" "" "" "" ""를 생성합니다.$(context).find(selector)통화, 내부의 일부 최적화로 인해.jQuery (으)ㄹ 수도 (으)ㄹ 수도 있고, (으)ㄹ 수도 있습니다.sizzle engine.
그것은 오래된 게시물이기 때문에, 그리고 시대에 따라 상황이 변합니다.지금까지 마지막 브라우저 버전에 대해 몇 가지 테스트를 했는데, 오해를 피하기 위해 여기에 올립니다.
HTML5 및 CSS3 호환 브라우저에서 jQuery 2.1을 사용하면 성능이 변경됩니다.
다음은 테스트 시나리오 및 결과입니다.
function doTest(selectorCallback) {
var iterations = 100000;
// Record the starting time, in UTC milliseconds.
var start = new Date().getTime();
for (var i = 0; i < iterations; i++) {
// Execute the selector. The result does not need to be used or assigned
selectorCallback();
}
// Determine how many milliseconds elapsed and return
return new Date().getTime() - start;
}
function start() {
jQuery('#stats').html('Testing...');
var results = '';
results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms";
results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms";
results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms";
results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms";
$parent = jQuery('#parent');
results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms";
jQuery('#stats').html(results);
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" />
<title>HTML5 test</title>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div id="stats"></div>
<button onclick="start()">Test</button>
<div>
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
</html>100,000번 반복하면 다음과 같은 결과를 얻을 수 있습니다.
(포맷 목적으로 img로 추가했습니다.)
코드 스니펫을 직접 실행하여 테스트할 수 있습니다 ;)
언급URL : https://stackoverflow.com/questions/3177763/what-is-the-fastest-method-for-selecting-descendant-elements-in-jquery
'programing' 카테고리의 다른 글
| Javascript|jQuery를 사용하여 특정 인라인 스타일 제거 (0) | 2023.08.15 |
|---|---|
| 개체에 추가 (0) | 2023.08.10 |
| Wi-Fi가 안드로이드에 연결되어 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.08.10 |
| '게시에 실패했습니다.' 그러나 빌드에 성공했습니까? (0) | 2023.08.10 |
| Html에서 Html.from Android N에서 더 이상 사용되지 않습니다. (0) | 2023.08.10 |