jQuery 코드 최적화 selector_jquery

이 기사에서는 선택기의 관점에서 jQuery 코드를 최적화하는 문제에 대해 간략하게 설명합니다.

Sizzle의 동작 메커니즘

jQuery 1.3부터 ​​Sizzle 엔진인 Selector 표현식을 기반으로 요소를 찾는 코드를 분리했습니다. 선택기 표현식(예: "#id", ".class", ":nth-child(2)")을 $() 함수에 전달하면 Sizzle은 내부적으로 브라우저에서 기본적으로 지원하는 DOM을 우선적으로 사용합니다. 최대 실행 속도를 위한 요소를 찾습니다. 다음은 Sizzle이 우선적으로 사용할 몇 가지 표준 네이티브 메소드입니다(각 메소드의 목적은 자세히 설명하지 않습니다).

코드 복사 코드는 다음과 같습니다.

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

브라우저가 그렇지 않은 경우 메소드를 지원하거나 수신 선택기 표현식이 표준 선택기(예: ":eq()", ":odd" 또는 기타 사용자 정의 선택기)가 아닌 경우 Sizzle은 document.getElementsByTagName('*')을 사용하여 요소를 가져옵니다. 각 요소를 반복하고 테스트하기 전에 모든 요소를 ​​문서화하세요. 분명히 이것은 최후의 수단으로만 사용해야 하는 방법입니다. 이 가장 어리석은 방법은 효율성도 가장 낮습니다.

최적화 예
예를 들어 페이지 형식의 모든 텍스트 상자를 가져오려고 한다고 가정해 보겠습니다.

예 두 개의 선택기를 사용합니다.

코드 복사 코드는 다음과 같습니다.

$(' input[type ="text"]')
$('input:text')

첫 번째 선택자는 표준 CSS 속성 선택자이고 두 번째 선택자는 맞춤 선택자입니다. Sizzle 엔진에 대한 이전 분석에 따르면 대부분의 최신 브라우저(기본 querySelectorAll() 메서드를 지원하는 브라우저)에서 첫 번째 선택기가 두 번째 선택기보다 훨씬 빠릅니다.

또 다른 예를 들어보세요. 다음 두 개의 jQuery 쿼리가 있다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

$('input ').eq(1)
$('input:eq(1)')

첫 번째 쿼리는 먼저 표준 CSS 요소 선택기를 통해 모든 입력 요소를 찾은 다음 jQuery의 eq() 메서드를 호출하면 일치하는 결과에서 두 번째 요소를 얻습니다(eq() 메서드의 인덱스 매개 변수는 0에서 계산됩니다). 두 번째 쿼리는 사용자 정의 의사 클래스 선택기인 eq()를 사용합니다. 테스트를 통해 첫 번째 방법이 두 번째 방법보다 훨씬 빠르다는 것을 알 수 있습니다.

결론
CSS 사양에 명시된 선택자를 최대한 사용하세요. 표준 선택자가 없다면 jQuery의 맞춤 선택자를 사용하는 것도 고려해 보세요.

(참고: 이 글은 "JQuery Basics Tutorial(3rd Edition)"의 관련 장을 기반으로 작성되었습니다.)