jQuery 선택기 성능을 향상시키는 좋은 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/46214

문제

저는 jQuery 호출의 선택기 성능을 향상시킬 수 있는 방법을 찾고 있습니다.구체적으로 다음과 같은 것입니다.

~이다 $("div.myclass") 보다 빠른 $(".myclass")

그럴 수도 있다고 생각하지만, jQuery가 먼저 태그 이름 등으로 검색을 제한할 만큼 똑똑한지는 모르겠습니다.최고의 성능을 위해 jQuery 선택기 문자열을 공식화하는 방법에 대한 아이디어가 있는 사람이 있습니까?

도움이 되었습니까?

해결책

의심의 여지가 없습니다 먼저 태그 이름으로 필터링하는 것이 훨씬 빠릅니다. 클래스 이름으로 필터링하는 것보다.

getElementsByTagName의 경우처럼 모든 브라우저가 기본적으로 getElementsByClassName을 구현할 때까지는 마찬가지입니다.

다른 팁

어떤 경우에는 컨텍스트를 제한하여 쿼리 속도를 높일 수 있습니다.요소 참조가 있는 경우 이를 두 번째 인수로 전달하여 쿼리 범위를 제한할 수 있습니다.

$(".myclass", a_DOM_element);

보다 빨라야 한다

$(".myclass");

이미 a_DOM_element가 있고 전체 문서보다 훨씬 작은 경우.

위에서 Reid가 언급했듯이 jQuery는 상향식으로 작동합니다.하지만

그 의미는 $('#foo bar div') 보다 훨씬 느립니다 $('bar div #foo')

그것은 요점이 아니다.만약 당신이 있었다면 #foo ID는 고유해야 하므로 선택기 앞에 아무 것도 입력하지 않습니다.

요점은 다음과 같습니다.

  • ID가 있는 요소에서 항목을 하위 선택하는 경우 나중에 먼저 선택한 다음 다음을 사용하세요. .find, .children 등.: $('#foo').find('div')
  • 선택기의 가장 왼쪽(첫 번째) 부분 ~할 수 있다 가장 오른쪽(마지막) 부분으로 스케일링하는 것이 덜 효율적입니다. ~해야 한다 가장 효율적이어야 합니다. 즉, 신분증이 없으면 찾고 있는지 확인하세요. $('div.common[slow*=Search] input.rare') 오히려 $('div.rare input.common[name*=slowSearch]') - 항상 적용 가능한 것은 아니므로 그에 따라 분할하여 선택기 순서를 강제로 적용하십시오.

무엇이 더 빠른지 완전히 이해하려면 CSS 파서가 어떻게 작동하는지 이해해야 합니다.

전달한 선택기는 RegExp를 사용하여 인식 가능한 부분으로 분할된 다음 하나씩 처리됩니다.

ID 및 TagName과 같은 일부 선택기는 더 빠른 브라우저의 기본 구현을 사용합니다.클래스 및 속성과 같은 다른 요소는 별도로 프로그래밍되므로 속도가 훨씬 느리므로 선택한 요소를 반복하고 모든 클래스 이름을 확인해야 합니다.

귀하의 질문에 대답하자면 예입니다.

$('tag.class')는 $('.class')보다 빠릅니다.왜?첫 번째 경우 jQuery는 기본 브라우저 구현을 사용하여 필요한 요소만 선택하도록 필터링합니다.그런 다음에만 요청한 내용까지 필터링하여 더 느린 .class 구현을 시작합니다.

두 번째 경우 jQuery는 클래스를 잡아서 각각의 요소를 필터링하는 방법을 사용합니다.

모든 자바스크립트 라이브러리가 이를 기반으로 하기 때문에 이는 jQuery보다 더 널리 퍼집니다.유일한 다른 옵션은 xPath를 사용하는 것이지만 현재 모든 브라우저에서 잘 지원되지는 않습니다.

jQuery 선택기의 성능을 높이는 방법은 다음과 같습니다.

  • 가능하면 #id로 선택하세요(성능 테스트 결과 ~250 더 빠름)
  • 선택 범위를 지정합니다($('.select', this))

99%의 웹 앱, 심지어 Ajax가 많은 앱에서도 웹 서버의 연결 속도와 응답이 자바스크립트보다는 앱의 성능을 좌우한다는 점을 추가하겠습니다.의도적으로 느린 코드를 작성해야 한다거나 일반적으로 어떤 것이 다른 것보다 더 빠를 수 있다는 것을 아는 것이 좋지 않다는 말은 아닙니다.

하지만 아직 실제로 존재하지 않는 문제를 해결하려고 하는지, 아니면 실제로 존재하지 않는 문제를 해결하려고 하는지 궁금합니다. 변화 가까운 미래에(예를 들어 더 많은 사람들이 다음을 지원하는 브라우저를 사용하기 시작한다면) getElementsByClassName() 앞에서 언급한 함수), 최적화된 코드가 실제로 더 느리게 실행되게 만듭니다.

성능 정보를 찾을 수 있는 또 다른 곳은 Hugo Vidal Teixeira의 선택기 성능 분석 페이지입니다.

http://www.comComponenthouse.com/article-19

이를 통해 ID별 선택기, 클래스별 선택기 및 태그 이름 접두사 선택기의 속도가 향상됩니다.

ID별 가장 빠른 선택기는 다음과 같습니다.$("#ID")

클래스별로 가장 빠른 선택기는 다음과 같습니다.$('태그.클래스')

따라서 태그로 접두사를 붙이는 것은 클래스별로 선택할 때만 도움이 되었습니다!

나는 일부 jQuery 메일링 리스트에 있었고 거기에서 읽은 내용에 따르면 태그 이름, 클래스 이름으로 필터링할 가능성이 높습니다(또는 더 빠른 경우 그 반대).그들은 속도에 집착하며 약간의 성능을 얻기 위해 무엇이든 사용합니다.

해당 선택기를 초당 수천 번 실행하지 않는 한 어쨌든 그것에 대해 너무 많이 걱정하지 않을 것입니다.

정말로 걱정된다면 벤치마킹을 시도해보고 어느 것이 더 빠른지 확인하십시오.

한꺼번에 메서드를 호출하는 대신 시간이 지남에 따라 메서드를 호출하려면 Oliver Steele의 Sequentially 라이브러리를 사용하는 것이 좋습니다.

http://osteele.com/sources/javascript/순차적으로/

"최종적으로" 메서드를 사용하면 초기 호출 후 일정 시간이 지난 후 메서드를 호출할 수 있습니다."순차적" 방법을 사용하면 일정 기간 동안 여러 작업을 대기열에 추가할 수 있습니다.

매우 도움이 됩니다!

ㅏ 좋은 팁 내가 물었던 질문에서 :사용 표준 CSS 선택자 가능한 한.이를 통해 jQuery는 선택기 API.에 따르면 John Resig가 수행한 테스트, 이는 선택기에 대해 거의 기본 성능을 제공합니다.다음과 같은 기능 :has() 그리고 :contains() 피해야한다.

제가 연구한 결과 Selectors API에 대한 지원은 jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1에 도입되었습니다.

내가 착각하지 않는다면 jQuery도 상향식 엔진입니다.그 의미는 $('#foo bar div') 것보다 훨씬 느리다 $('bar div #foo').예를 들어, $('#foo a') 모든 과정을 거치게 됩니다 a 페이지의 요소를 확인하고 해당 요소에 다음의 조상이 있는지 확인하세요. #foo, 이는 이 선택기를 엄청나게 비효율적으로 만듭니다.

Resig는 이미 이 시나리오에 맞게 최적화했을 수 있습니다. (그가 그렇게 한다고 해도 놀랍지 않을 것입니다. 나는 그가 Sizzle 엔진에서 그렇게 했다고 믿지만 100% 확신할 수는 없습니다.)

ID로 먼저 선택하는 것이 항상 더 빠르다고 생각합니다.

$("#myform th").css("color","red");

보다 빨라야 한다

$("th").css("color","red");

그런데 ID로 시작할 때 체이닝이 얼마나 도움이 되는지 궁금합니다.이건가?

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

이것보다 빠른 게 있나요?

$("#myform th").css("color","red");
$("#myform td").css("color","blue");
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top