jQuery 성능 최적화 브로셔

현재 jquery의 응용이 갈수록 많아지고 있다. 일부 학생들은 시원한 coding을 누릴 때 성능 문제를 소홀히 한다. 예를 들어 나.jquery는 많은 js 라이브러리에서 우수한 성적을 거둘 수 있지만 원생적인javascript로 개발하는 것이 아니기 때문에 성능 문제는 중시해야 한다.트위터에서 <jQuery Performance Rules>라는 글을 발견하고 간단하게 발췌해 봤다.

항상 ID 선택기부터 상속

class 전에 tag

사용

jquery 대상을 캐시

강력한 체인 조작 습득

하위 조회 사용

직접 DOM 작업 제한

거품

잘못된 쿼리 제거

가 $(window)로 연기되었습니다.load

압축 js

jquery 라이브러리 전면 파악

1. 항상 ID 선택기부터 상속
jquery에서 가장 빠른 선택기는 ID 선택기입니다.Javascript의 getElementById () 방법에서 직접 나온 것이기 때문입니다.

<div id=“content”>

<form method=“post” action=“/”>

<h2>Traffic Light</h2>

<ul id=“traffic_light”>

<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>

<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>

<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>

</ul>

<input class=“button” id=“traffic_button” type=“submit” value=“Go” />

</form>

</div>

이렇게 버튼을 선택하는 것은 비효율적이다.

var traffic_button = $(‘#content .button’);

ID를 사용하여 버튼을 직접 선택하면 효율성이 향상됩니다.

var traffic_button = $(‘#traffic_button’);

여러 요소 선택
다원소 선택을 언급하는 것은 사실DOM이 반복되고 순환하는 것을 말하는데 이것들은 모두 비교적 느린 것이다.성능을 높이기 위해서는 가까운 ID부터 계승하는 것이 좋다.

var traffic_lights = $(‘#traffic_light input’);

2.class 전에 tag 사용
두 번째 빠른 선택기는 tag 선택기 ($('head ') 입니다.기본 get Elements ByTagName () 방법에서 왔기 때문에 같은 이치입니다.

<div id=“content”>

<form method=“post” action=“/”>

<h2>Traffic Light</h2>

<ul id=“traffic_light”>

<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>

<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>

<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>

</ul>

<input class=“button” id=“traffic_button” type=“submit” value=“Go” />

</form>

</div>;

항상 tag name으로 class를 제한하고 가까운 ID를 잊지 마십시오.

var active_light = $(‘#traffic_light input.on’);

주의: jquery에서 Class는 가장 느린 선택기입니다.IE 브라우저에서 모든 DOM 노드를 옮겨다니며 어디에 쓰든지 상관없습니다.
ID를 tag name으로 수정하지 마십시오. 다음 예제에서는 ID가'content'인 노드를 찾기 위해 모든div 요소를 반복합니다.

var content = $(‘div#content’);

아이디로 아이디를 꾸미는 것도 사족이다.

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(’background-color‘, ‘orange‘);

$(’#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 결과 대상을 프로그램의 다른 부분에 사용하거나, function이 여러 번 실행될 경우, 전역 변수에 저장합니다.
jquery 결과를 저장할 전역 컨테이너를 정의하면 다른 함수에서 참조할 수 있습니다.
//             (  : window  )

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 id=“content”>

<form method=“post” action=“/”>

<h2>Traffic Light</h2>

<ul id=“traffic_light”>

<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>

<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>

<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>

</ul>

<input class=“button” id=“traffic_button” type=“submit” value=“Go” />

</form>

</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     <ul>   for (var i=0, l=top_100_list.length; i<l; i++)

{

$mylist.append(‘<li>’ + top_100_list[i] + ‘</li>’);

}
dom에 삽입하기 전에 전체 요소 문자열을 만들어야 합니다.
var top_100_list = [...],

$mylist = $(‘#mylist’),

top_100_li = “”; //                 for (var i=0, l=top_100_list.length; i<l; i++)

{

top_100_li += ‘<li>’ + top_100_list[i] + ‘</li>’;

}

$mylist.html(top_100_li);
삽입하기 전에 개별 상위 노드에 여러 요소를 패키지하는 것이 더 빠릅니다.
var top_100_list = [...],

$mylist = $(‘#mylist’),

top_100_ul = ‘<ul id=”#mylist”>’;for (var i=0, l=top_100_list.length; i<l; i++)

{

top_100_ul += ‘<li>’ + top_100_list[i] + ‘</li>’;

}

top_100_ul += ‘</ul>’; //      

$mylist.replaceWith(top_100_ul);
만약 당신이 상기 몇 가지를 했는데도 성능 문제가 걱정된다면:
 jquery의clone() 방법을 시험해 보세요. 노드 트리의 복사본을 만들 것입니다. 이것은'이선'방식으로dom 작업을 할 수 있습니다. 작업이 끝난 후에 노드 트리에 다시 넣을 수 있습니다.
 
 사용DOM DocumentFragments.jQuery 작성자의 말대로, 그것의 성능은 직접dom 조작보다 현저히 우수하다.
7.거품
특수한 경우를 제외하고는 모든 js 이벤트 (예: 클릭,mouseover 등)부급 노드까지 물집이 생겨요.우리가 여러 원소에 같은 함수를 호출해야 할 때 이 점은 매우 유용할 것이다.
이런 효율이 매우 낮은 다원소 이벤트를 대체하여 감청하는 방법은 부모 노드에 한 번만 연결하면 어느 노드가 이벤트를 촉발했는지 계산할 수 있다는 것이다.
예를 들어, 우리는 많은 입력 상자를 가진 폼을 귀속시켜야 한다. 입력 상자가 선택되었을 때class를 추가해야 한다.
이렇게 바인딩 이벤트는 비효율적입니다.
$(‘#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 grabs the node that triggered the event.

cell.addClass(’selected’);

}).bind(‘blur’, function(e){

var cell = $(e.target);

cell.removeClass(’selected’);

});
부모 요소는 스케줄러 역할을 하는데 목표 요소를 바탕으로 이벤트를 연결할 수 있습니다.만약 당신이 많은 원소에 같은 사건의 감청을 연결시켰다는 것을 발견한다면, 당신은 틀림없이 어디가 잘못되었을 것이다.
8. 잘못된 쿼리 제거
비록 jquery는 일치하는 요소가 없는 상황을 우아하게 처리할 수 있지만, 그래도 찾는 데 시간이 걸린다.만일 전역 js가 하나밖에 없다면, 모든 jquery 함수를 $(document) ready (function () {//모든 자랑스러운 코드}) 에 넣을 수 있습니다.
페이지에서만 사용되는 함수입니다.대부분의 효과적인 방법은 줄 안에서 함수를 초기화하는 것이다. 그러면 템플릿이 js를 언제 어디서 실행해야 하는지 정확하게 제어할 수 있다.
예를 들어, 당신의 '글' 페이지 템플릿은 다음과 같은 코드를 바디의 끝에 인용할 수 있습니다.
<script type=“text/javascript>

mylib.article.init();

</script>

</body>
만약 페이지 템플릿에 다양한 모듈이 포함되어 있다면 페이지에 나타나지 않거나 시각적으로 표현되기 위해 빠르게 불러올 수 있는 모듈이 필요할 수도 있습니다. 초기화 함수를 모듈 뒤에 바짝 붙일 수 있습니다.
<ul id=“traffic_light”>

<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>

<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>

<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>

</ul>

<script type=“text/javascript>

mylib.traffic_light.init();

</script>
전역 js 라이브러리는 다음과 같습니다.
var mylib =

{

article_page :

{

init : function()

{

// Article    jQuery  .

}

},

traffic_light :

{

init : function()

{

// Traffic light    jQuery  .

}

}

}

9.     $(window).load
jquery                ,          $(document).ready     .                  .
  $(document).rady      ,          ,             .                   ,       $(document).ready     .
      jquery     $(window).load               cpu   .       html(  <iframe>)        .
$(window).load(function(){

//             jQuery  .

});
드래그 앤 드롭, 시각 효과 및 애니메이션, 숨겨진 이미지 미리 로드 등과 같은 추가 기능입니다.모두 이런 기술에 적합한 장소다.
10. 압축 js
js 온라인 압축 주소 추천: http://dean.edwards.name/packer/
11. jquery 라이브러리 전면 파악
지피지기 백전백승.jQuery를 더 깊이 이해해야만 더욱 유연하게 사용할 수 있습니다.여기에 jQuery의 빠른 검색 안내서를 제공하여 인쇄하여 휴대할 수 있습니다.만약 jQuery 원본을 한 번 통독할 능력이 있다면 더욱 좋겠다.
원문: jQuery Performance Rules;번역문: Rlog.cn.전재하시면 출처를 밝혀 주십시오. 감사합니다