jQuery 코드 최적화 traversal_jquery

jQuery DOM 탐색의 작동 메커니즘을 이해한 후에는 코드 작성 시 불필요한 반복 작업을 의식적으로 방지하여 코드 성능을 향상시킬 수 있습니다. 이 기사에서는 jQuery의 순회 메커니즘에서 시작하여 jQuery 코드를 최적화하는 문제에 대해 간략하게 설명합니다.

jQuery 객체 스택

jQuery는 내부적으로 jQuery 객체 스택을 유지 관리합니다. 각 순회 메소드는 새로운 요소 세트(jQuery 객체)를 찾고 jQuery는 요소 세트를 스택에 푸시합니다. 각 jQuery 객체에는 context, selector 및 prevObject라는 세 가지 속성이 있습니다. prevObject 속성은 객체 스택의 이전 객체를 가리키며, 이 속성을 통해 원래 DOM 요소 집합으로 돌아갈 수 있습니다.

jQuery는 이 내부 개체 스택을 작동하는 데 매우 유용한 두 가지 메서드를 제공합니다.

.end()
.andSelf()
첫 번째 메서드를 호출하면 간단히 객체(이전 jQuery 객체로 돌아가게 됨). 두 번째 방법은 더 흥미롭습니다. 이를 호출하면 스택의 위치를 ​​역추적한 다음 두 위치에서 요소 세트를 결합하고 새로 결합된 요소 세트를 스택의 맨 위로 푸시합니다.

이 DOM 요소 스택을 사용하면 반복되는 쿼리 및 순회 작업을 줄일 수 있으며, 반복 작업을 줄이는 것이 jQuery 코드 성능을 최적화하는 열쇠입니다.

최적화 예시
다음은 테이블 행 스트라이프 효과를 구현하는 함수(앞, 뒤 코드 생략)입니다.

stripe() 함수는 ID 선택기 두 번 #news 요소 찾기: 한 번은 해당 클래스가 있는 행에서 대체 클래스를 제거하고, 한 번은 새로 선택한 행에 클래스를 추가합니다.

이 기능을 최적화하는 방법에는 두 가지가 있는데, 하나는 연결입니다.

연결
연결 최적화는 jQuery의 내부 객체 스택과 .end() 메서드를 활용합니다. 최적화된 코드는 다음과 같습니다.

.find()에 대한 첫 번째 호출은 테이블 행을 스택에 푸시하고 .end() 메서드는 이러한 행을 팝하여 다음 호출을 허용합니다. to .find() #news 테이블에서 계속 작업을 수행하고 있습니다. 이렇게 하면 두 개의 선택기 검색이 하나로 줄어듭니다.

또 다른 최적화 방법은 캐싱입니다.

캐싱
여기서 소위 캐시란 이전 작업의 결과를 나중에 다시 사용할 수 있도록 저장하는 것입니다. 최적화된 코드는 다음과 같습니다.

연결 방식에 비해 캐싱 방식은 jQuery 객체를 저장하기 위해 추가 변수를 생성하기 때문에 좀 더 장황합니다. 그러나 다른 관점에서 보면 이 방법은 코드에서 선택한 요소에 대한 두 작업을 완전히 분리할 수 있으므로 다른 상황에서의 요구 사항을 충족할 수 있습니다. 마찬가지로, 선택한 요소를 Stripe() 함수 외부에 저장할 수 있으므로 함수가 호출될 때마다 선택기를 반복적으로 쿼리할 필요가 없습니다.

결론
jQuery의 내부 객체 스택과 캐시를 사용하면 반복되는 DOM 쿼리 및 순회를 줄여 스크립트 실행 속도를 향상시킬 수 있습니다.

ID를 기반으로 페이지에서 요소를 선택하는 것이 매우 빠르기 때문에 위의 두 예에서는 최적화 전후에 뚜렷한 성능 차이가 없습니다. 실제 코딩에서는 가장 읽기 쉽고 유지 관리가 쉬운 방법을 선택해야 합니다. 실제로 성능 병목 현상이 발생하는 경우 위의 최적화 기술을 사용하면 즉각적인 결과를 얻을 수 있습니다.

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