jQuery 성능 최적화 매뉴얼 권장_jquery

트위터에서 <jQuery Performance Rules> 기사를 발견하고 간단히 번역했습니다:

항상 ID 선택기에서 상속
클래스 태그 이전에 사용
jquery 객체 캐시
강력한 체인 작업 숙달
하위 쿼리 사용
직접 DOM 작업 제한
버블
잘못된 쿼리 제거
$(window).load로 지연
js 압축
포괄적인 숙달 jquery 라이브러리
1. 항상 ID 선택기에서 상속됩니다
jquery에서 가장 빠른 선택기는 Javascript의 getElementById() 메서드입니다. >
코드 복사

코드는 다음과 같습니다.

" action="/">

신호등

• 빨간색


• 노란색


• 녹색

;


이런 버튼을 선택하는 것은 비효율적입니다.



코드 복사

코드는 다음과 같습니다. var Traffic_button = $('#content .button'); ID 버튼으로 직접 선택하는 것이 더 효율적입니다.

코드 복사

코드는 다음과 같습니다. var Traffic_button = $('# Traffic_button') 다중 요소 선택

다중 요소 선택을 언급하는 것은 실제로 상대적으로 느린 DOM 순회 및 루프에 대해 말하는 것이므로 성능을 향상시키기 위해서는 가장 가까운 ID에서 상속을 시작하는 것이 가장 좋습니다.

코드 복사


코드는 다음과 같습니다.

var Traffic_lights = $ ('#traffic_light input'); 2. 클래스 전에 태그를 사용하세요 두 번째로 빠른 선택기는 태그 선택기($('head'))입니다. 이는 기본 getElementsByTagName() 메서드에서 오기 때문입니다. >

코드 복사


코드는 다음과 같습니다.

🎜>

신호등

빨간색
• 노란색
• 녹색

form>

항상 태그 이름으로 클래스를 제한(수정)하세요(가장 가까운 ID를 잊지 마세요):




코드 복사


코드는 다음과 같습니다.

var active_light = $('#traffic_light input.on')

참고: 클래스는 jquery에서 가장 느린 선택기입니다. IE 브라우저에서는 사용 위치에 관계없이 모든 DOM 노드를 순회합니다. 다음 예에서는 ID를 수정하지 마세요. 모든 div 요소를 탐색하여 ID가 ​​'content'인 노드를 찾습니다.

코드 복사

코드는 다음과 같습니다.


var 콘텐츠 = $('div#content')

ID로 ID를 수정하는 것은 불필요합니다.

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

var Traffic_light = $('#content #traffic_light');

3. jquery 객체 캐시

jquery 객체를 변수로 캐싱하는 습관을 기르기 위해.
절대로 하지 마세요:

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

$ ('#traffic_light input.on).bind('click', function(){…});
$('#traffic_light input.on).css('border', '3px dashed yellow'); 🎜>$(' #traffic_light input.on).css('배경색', '주황색')
$('#traffic_light input.on).fadeIn('slow'); >
대부분 먼저 개체를 변수에 캐시한 다음 작업하는 것이 가장 좋습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: var $active_light = $('#traffic_light input.on') $active_light.bind('click', function(){…})

$active_light.css('border', '3px dashed yellow');

$active_light.css('Background-color', 'orange')
$active_light.fadeIn('slow'); >

로컬 변수는 일반적으로 변수 접두사로 $를 사용하여 jquery를 캡슐화한 것임을 기억하세요.

다음에 대한 jquery 결과를 캐시하세요. 나중에 사용

프로그램의 다른 부분에서 jquery 결과 개체를 사용할 계획이거나 함수가 여러 번 실행될 경우 전역 변수에 캐시하세요.

전역 컨테이너를 정의하세요. jquery 결과를 저장하려면 다른 함수에서 참조할 수 있습니다.




코드 복사

코드는 다음과 같습니다. // 전역 범위에서 개체를 정의합니다(예: 창 개체) window.$my = {

// 두 번 이상 사용할 수 있는 모든 쿼리를 초기화합니다

head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
}

function do_something()
{
// 이제 저장된 결과를 참조하고 조작할 수 있습니다.
var script = document.createElement('script')
$my.head.append(script); >
// 함수 내에서 작업하는 경우 예, 전역 개체에 쿼리를 계속 저장할 수 있습니다.
$my.cool_results = $('#some_ul li')
$my.other_results = $('#some_table td');

// 전역 함수를 일반 jquery 객체로 사용합니다.
$my.other_results.css('border-color', 'red'); 🎜>$my.traffic_light.css('border -color', 'green');
}


4. 강력한 체인 작업을 마스터하세요

위의 예도 가능합니다.

코드 복사


코드는 다음과 같습니다.

var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){…}) .css('border', '3px dashed yellow') .css(' background-color', 'orange') .fadeIn ('slow');

이를 통해 코드 작성을 줄이고 js를 더 가볍게 만들 수 있습니다.

5 . 하위 쿼리 사용

jQuery에서는 래핑된 개체에 추가 선택기 작업을 사용할 수 있습니다. 이미 상위 개체를 변수에 저장하고 있으므로 하위 요소에 대한 작업이 크게 향상됩니다.

코드 복사


코드는 다음과 같습니다.

빨간색

;


;/div>


예를 들어 하위 쿼리 방법을 사용하여 켜져 있거나 꺼져 있는 조명을 캡처하고 후속 작업을 위해 이를 캐시할 수 있습니다.

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

var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');

팁: 쉼표로 구분된 방법을 사용하여 여러 지역 변수를 한 번에 선언할 수 있습니다. – 바이트 절약

6. 직접적인 DOM 작업을 제한하세요

여기서 기본 아이디어는 메모리에 실제로 원하는 것을 구축한 다음 DOM을 업데이트하는 것입니다. 이는 jQuery 모범 사례는 아니지만 유효한 JavaScript 작업에 필요합니다. 직접 DOM 조작이 느립니다.

예를 들어, 목록 요소 집합을 동적으로 생성하려면 다음을 수행하지 마세요.

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

var top_100_list = [...], // 여기에 100개의 고유 문자열이 있다고 가정합니다.
$mylist = $('#mylist') // jQuery (var i=0, l=top_100_list.length; i{
$mylist.append('

' top_100_list[i] '<에 대한

요소 선택 ; /li>');
}

dom에 삽입하기 전에 전체 요소 문자열 세트를 만들어야 합니다.

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

var top_100_list = [...],
$mylist = $('#mylist'),
top_100_li = ""; // 이 변수는 (var i=0, l=top_100_list.length; i{
top_100_li = '<에 대한 목록 요소를 저장하는 데 사용됩니다. ;li> ' top_100_list[i] '';
$mylist.html(top_100_li)

다음을 삽입하기 전에 여러 요소를 하나로 묶습니다. 상위 노드가 더 빨라집니다:

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

var top_100_list = [. ..],
$mylist = $('#mylist'),
top_100_ul = '

';for (var i=0, l=top_100_list .length; i{
top_100_ul = '
• ' top_100_list[i] '
'
top_100_ul> ;'; //순서가 없는 목록 닫기
$mylist.replaceWith(top_100_ul);


위의 작업을 수행했지만 여전히 성능 문제가 걱정되는 경우:

jquery의 clone() 메서드를 사용해 보세요. 노드 트리의 복사본이 생성되어 "오프라인" 방식으로 DOM 작업을 수행한 다음 작업이 완료되면 이를 다시 노드 트리에 넣을 수 있습니다.

DOM DocumentFragments를 사용하세요. jQuery 작성자가 말했듯이 Bubbles
보다 성능이 훨씬 좋습니다. 특별한 상황에서는 모든 js 이벤트(예: 클릭, 마우스 오버 등)가 상위 노드까지 버블링됩니다. 이는 여러 요소에서 동일한 함수를 호출해야 할 때 유용합니다.

대신 이렇게 비효율적입니다. 다중 요소 이벤트 수신 방법을 사용하면 상위 노드에 한 번만 바인딩하면 어느 노드가 이벤트를 트리거했는지 계산할 수 있습니다.

예를 들어 입력 상자가 많은 양식에 대해 다음과 같은 바인딩 동작을 원합니다.

이와 같은 이벤트 바인딩은 비효율적입니다.

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

$('#entryform input).bind('focus', function(){

$(this).addClass('selected');
}).bind('blur', function(){
$(this).removeClass('selected');
});


포커스를 들어야 합니다. -상위 수준에서 포커스 가져오기 및 잃기 이벤트:

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

$('#entryform').bind('focus', function(e){

var cell = $(e.target); // e.target은 이벤트를 트리거한 노드를 가져옵니다.
cell.addClass('selected');
}).bind('blur', function(e){
var cell = $(e.target);
cell.removeClass('selected' );
})


부모 요소는 대상 요소를 기반으로 이벤트를 바인딩할 수 있는 디스패처 역할을 합니다. 동일한 이벤트 리스너를 여러 요소에 바인딩했다면 뭔가 잘못된 것입니다.
8 .잘못된 쿼리 제거
jquery는 일치하는 요소가 없는 상황을 매우 우아하게 처리할 수 있지만 전체 사이트에 대해 하나의 전역 js만 있는 경우 모든 jquery 기능이 검색될 가능성이 매우 높습니다. $ (document)ready(function(){//자랑스러운 모든 코드})
페이지에 사용된 함수만 실행하는 것이 가장 효과적인 방법은 인라인 초기화 함수를 사용하는 것입니다. 템플릿은 js가 실행되어야 하는 시기와 위치를 정확하게 제어할 수 있습니다.
예를 들어 "기사" 페이지 템플릿에서 본문 끝에 다음 코드를 인용할 수 있습니다.

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

전역 js 라이브러리는 다음과 같습니다.

코드는 다음과 같습니다.

var mylib =

{
article_page :
{
init : function( )
{
// 기사별 jQuery 함수
}
},
traffic_light :
{
init : function()
{
/ / 신호등의 고유한 jQuery 기능
}
}
}


9. 개발자를 위한 $(window).load

jquery를 따릅니다. 매우 흥미로운 점이 있습니다. $(document).ready 아래에 무엇이든 걸어 이벤트인 척할 수 있습니다.

그러나 $(document).rady는 실제로 그렇습니다. 매우 유용합니다. 페이지가 렌더링될 때 다른 요소가 다운로드되기 전에 실행될 수 있습니다. 페이지가 항상 로드되는 경우 $(document).ready 함수로 인해 발생할 가능성이 높습니다. jquery 함수를 $(window).load 이벤트에 바인딩하여 페이지를 로드할 때 CPU 사용량을 줄일 수 있습니다. 이는 모든 HTML(