선택기의 성능

Question

나는 a test을 jQuery 선택기의 성능으로 수행했습니다.

두 선택기 내가 테스트 한 :

selection_width = total_width - ($('#commands .minimap').outerWidth() + $('#commands .actions').outerWidth()); 

그리고 :

var commands = $('#commands'); 
selection_width = total_width - ($('.minimap', commands).outerWidth() + $('.actions', commands).outerWidth()); 

두 번째는 첫 번째보다 훨씬 빠릅니다. 이게 맞습니까? 아니면 어딘가에서 시험을 망쳤습니까?

Answer 1

첫 번째 테스트에서 jQuery는 document.querySelectorAll() (비교적 빠른)을 두 번 사용합니다. 두 번째 경우에는 jQuery가 document.getElementById() (매우 빠름)을 한 번 사용하고 document.getElementsByClassName() (컨텍스트를 선언 한 이후 빠름)을 두 번 사용합니다.

Answer 2

두 번째에는 명령 요소를 저장하므로 다시 검색되지 않습니다. 따라서 더 나은 성능을 얻을 수 있습니다.

Answer 3

첫 번째 문은 전체 DOM 트리를 분석하고 #commands 요소를 두 번째로 검색해야하지만 두 번째 문은 전체 DOM 트리를 한 번만 확인하면됩니다. .minimap과 .actions에 대한 검색은 더 빠릅니다. 그 이유는 jQuery가 전체 문서가 아닌 #commands의 자식을 반복하기 만하면되기 때문입니다.