성능 문제 : 선택기를 사용하여 DOM 요소에 대한 참조 저장

Question

내 앱에서 사용자는 특정 div 태그 안에 일부 콘텐츠를 만들 수 있으며 각 콘텐츠 또는 '요소'라고 부르는 자체 개체가 있습니다. 현재 jQuery 선택기를 사용하여 요소가 내부에 배치 된 원래 div 태그를 계산하는 함수를 사용하지만 성능면에서 궁금 해서요 일단 요소가 있으면 div 태그에 대한 참조를 저장하는 것이 낫지 않습니까? 나중에 계산하는 대신 생성 되었습니까? 그래서 지금 내가 이런 걸 사용

$('.div[value='+divID+']') 

를하지만, 메신저 요소를 만들 때 대신 난 그냥 요소 내부에 참조를 저장할 수 있습니다. 성능면에서 더 좋을까요?

Answer 1

이러한 바인딩이 많은 경우 참조를 저장하는 것이 좋습니다. 주석에서 언급했듯이, 변수 조회는 특히 현재의 접근 방식을 사용하여 DOM에서 상황을 찾는 것보다 훨씬 빠릅니다. jQuery 선택기는 순수 DOM 대안보다 느리고 특정 선택기는 매우 느릴 수 있습니다.

jQuery, DOM2 메소드 및 참조 간의 차이점을 보여주는 epascarello의 테스트를 기반으로 한 테스트는 http://jsperf.com/test-reference-vs-lookup/2입니다. 변수 할당은 예상대로 빠릅니다. 또한, DOM 메소드는 jQuery를 똑같이 큰 차이로 이겼다. 이것은 야후의 홈 페이지를 예로 든 것입니다.

또 다른 고려 사항은 DOM의 크기와 복잡성입니다. 이렇게되면 참조 캐싱 방법이 더욱 유리하게됩니다.

Answer 2

ID로 요소를 찾는 것이 매우 빠릅니다. 나는 100 % 당신의 다른 접근법을 이해하고 있지는 않지만, id에 의한 요소의 간단한 조회보다 더 좋을지는 모르지만, 브라우저는이 작업을 가장 잘 수행하는 방법을 알고있다. 당신이 설명했던 것에서 나는 당신의 접근이 더 빨리 어떻게 될지를 볼 수 없습니다.

Answer 3

로컬 변수는 매번 찾는 것보다 빠르다. Test to prove it.

Answer 4

jQuery는 개체를 작성하고 반환하는 함수입니다. 그 부분은 매우 비싸지 만 실제 DOM 조회에는 공정한 작업이 필요합니다. 오버 헤드는 getElementById 또는 getElementsByClassName과 같은 기존 DOM 메소드와 일치하는 간단한 쿼리에 비해 그리 높지 않습니다 (IE8에는 존재하지 않으므로 실제로는 느려집니다). 그렇지만 차이점은 차이가 있습니다 (DOM 액세스를 래핑하는 객체를 작성하는 것입니다. 메서드) 및 거의 작업 (기존 개체 참조). 선택기 결과를 재사용 할 계획이라면 항상 캐시하십시오.

또한 사용중인 xpath 항목은 일부 브라우저에서 실제로 비쌀 수 있습니다. 예, 확실히 캐시 할 것입니다.

물건은 조심 : IE8 이하에서만 클래스와 ID를하지 않고 JQ PARAMS의

• 긴 시리즈
• 선택기 과감한 위해 (태그 이름의 예를 들어 'div.someClass'를 추가) 개선 - 아래 IE8과 당신이 단지

(아마이 좋아을 처리 할 새로운 브라우저의 많은) 클래스를

XPath는 스타일 쿼리를 사용하면 오히려 빠른 네이티브 메소드를 사용하는 것보다 인터프리터 수준에서 HTML의 모든 조각을 공격한다

선택기를 작성할 때 마크 업을 얻으려면 얼마나 많은 마크 업을 고려해야하는지 고려하십시오. 특정 ID의 특정 클래스의 div 만 원할 경우, $ ('div.)가 아닌이 $ ('# theID div.someClass ') 중 하나를 수행하십시오.someClass ');

하지만 업무 회피 원칙에 상관없이 두 번 이상 사용하려는 경우 가치를 캐시하십시오. 가능한 한 반복적 인 요청으로 DOM을 괴롭히지 마십시오.