jQuery 코드 최적화 스트리밍 편

jQuery가 DOM에 대해 배후의 작업 메커니즘을 이해하면 코드를 작성할 때 의식적으로 불필요한 중복 조작을 피하고 코드의 성능을 향상시킬 수 있다.본고는 jQuery의 스트리밍 메커니즘에서 착안하여 jQuery 코드를 최적화하는 문제를 간단하게 분석하고자 한다.
jQuery 객체 스택
jQuery 내부에서 jQuery 대상 창고를 유지하고 있습니다.모든 탐색 방법은 새로운 요소 (jQuery 대상) 를 찾을 것입니다. 그리고 jQuery는 이 요소를 창고로 밀어 넣습니다.모든 jQuery 대상은 세 가지 속성이 있는데 그것이 바로 context,selector,prevObject이다. 그 중에서 prevObject 속성은 이 대상 창고의 이전 대상을 가리키고 이 속성을 통해 최초의 DOM 요소 집합으로 거슬러 올라갈 수 있다.
jQuery는 이 내부 대상 창고를 조작하는 데 두 가지 유용한 방법을 제공합니다.
.end()
.andSelf()
첫 번째 방법은 단지 하나의 대상을 간단하게 팝업하는 것이다. (결과는 이전 jQuery 대상으로 돌아가는 것이다.)두 번째 방법은 더욱 재미있다. 호출하면 창고에서 한 위치를 거슬러 올라가서 두 위치의 원소 집합을 조합하고, 이 새로운, 조합된 원소 집합을 창고 위로 밀어 넣는다.
이DOM 요소 창고를 이용하면 중복된 조회와 반복적인 조작을 줄일 수 있고 중복된 조작을 줄이는 것도 jQuery 코드의 성능을 최적화하는 관건이다.
최적화 예
다음은 표 행 스트라이프 효과를 위해 앞뒤 코드를 생략한 함수입니다.

 
  
function stripe() { 
  
$('#news').find('tr.alt').removeClass('alt'); 
  
$('#news tbody').each(function() { 
  
$(this).children(':visible').has('td') 
  
.filter(':group(3)').addClass('alt'); 
  
}); 
  
} 
  
 
 

stripe () 함수는 ID 선택자 #news를 두 번 사용했습니다. 한 번은alt 클래스가 있는 줄에서 클래스를 삭제하고, 다른 한 번은 새로 선택한 줄에 클래스를 추가하기 위해서입니다.
이 함수를 최적화하는 방법은 두 가지가 있는데 하나는 연결이다.
잇다
연결 최적화는 jQuery의 내부 대상 창고와.end () 방법.최적화된 코드는 다음과 같습니다.

 
  
function stripe() { 
  
$('#news'). 
  
find('tr.alt').removeClass('alt').end() 
  
find('tbody').each(function() { 
  
$(this).children(':visible').has('td') 
  
.filter(':group(3)').addClass('alt'); 
  
}); 
  
} 
  
 
 

첫 번째 호출.find () 는 표 줄을 창고로 밀어 넣고, 그 다음에.end () 방법은 이 줄을 팝업해서 다음에 호출합니다.find()는 여전히 #news 테이블에서 작업을 수행합니다.이렇게 하면 두 번의 선택부호 검색을 한 번으로 줄일 수 있다.
또 다른 최적화 방법은 캐시다.
캐시
캐시란 이전에 조작한 결과를 나중에 다시 사용하기 위해 여기에 저장하는 것이다.최적화된 코드는 다음과 같습니다.

 
  
var $news = $('#news'); 
  
function stripe() { 
  
$news.find('tr.alt').removeClass('alt'); 
  
$news.find('tbody').each(function() { 
  
$(this).children(':visible').has('td') 
  
.filter(':group(3)').addClass('alt'); 
  
}); 
  
} 
  
 
 

연결 방법에 비해 캐시 방식은 지루합니다. jQuery 대상을 저장하는 변수를 추가로 만들었기 때문입니다.그러나 다른 측면에서 볼 때, 이러한 방식은 코드에서 선택한 요소에 대한 두 번의 조작을 완전히 분리할 수 있으며, 이것은 우리의 다른 상황에서의 수요를 충족시킬 수 있을 것이다.마찬가지로 선택한 요소를stripe () 함수 외에 저장할 수 있기 때문에 함수를 호출할 때마다 선택 문자를 반복하는 작업을 피할 수 있습니다.
결론
jQuery의 내부 대상 창고와 캐시를 이용하여 중복된 DOM 조회와 반복을 줄이고 스크립트 실행 속도를 높일 수 있습니다.
ID에 따라 페이지에서 요소를 선택하는 속도가 매우 빠르기 때문에 상기 두 예는 최적화 전후에 뚜렷한 성능 차이가 없을 것이다.실제 인코딩에서는 읽기 쉽고 유지하기 쉬운 방식을 선택해야 한다.만약 정말 성능의 병목에 부딪혔다면, 상기 최적화 기술은 모두 즉각적인 효과를 거둘 수 있을 것이다.
(주: 본고는 《jQuery 기초 강좌(제3판)》 관련 장과 절의 내용을 바탕으로 편찬한 것이다.)