12가지 jQuery 성능 최적화 방법 분석(일반)

jQuery는 현재 매우 유행하는 Javascript 라이브러리 중의 하나이다. jQuery 응용 프로그램이 점점 증가함에 따라 그 성능 최적화 문제는 프로그래머들이 무시할 수 없는 것이다. 우리는 jQuery에서 가장 빠른 선택기가 ID 선택기라는 것을 알고 있다. 왜냐하면 이것은 JavaScript의 getElementById () 방법에서 직접 나온 것이기 때문이다.예를 들어 다음과 같은 HTML 코드가 있습니다.
51CTO 권장사항: jQuery 입문부터 정통까지
1. 항상 ID 선택기부터 상속

 


  
<div id="content"> 

  
<form method="post" action="#"> 

  
<h2>     </h2> 

  
<ul id="traffic_light"> 

  
<li><input type="radio" class="on" name="light" value="red" />   </li> 

  
<li><input type="radio" class="off" name="light" value="yellow" />   </li> 

  
<li><input type="radio" class="off" name="light" value="green" />   </li> 

  
</ul> 

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

  
</form> 

  
</div> 

 

만약 아래의 선택기를 채택한다면 효율은 저효과이다.

 


  
var traffic_button = $("#content .button"); 

  
 

 

button에 이미 ID가 있기 때문에, 우리는 직접 ID 선택기를 사용할 수 있습니다.다음과 같습니다.

 


  
var traffic_button = $("#traffic_button");

  
 

 

물론 이것은 단지 단일한 원소에 대해 말하자면만약 여러 요소를 선택해야 한다면, 이것은 DOM의 반복과 순환과 관련이 있을 것입니다. 성능을 향상시키기 위해서는 가장 가까운 ID부터 계승하는 것을 권장합니다.다음과 같습니다.

 


  
var traffic_lights = $("#traffic_light input"); 

  
 

 

2.class 앞에서 tag(탭 이름)을 사용하면 jQuery에서 두 번째로 빠른 선택기는 tag(탭) 선택기(예를 들어 $("head"))입니다.ID 선택기가 원래 getElementsByTagName () 방법에서 왔기 때문에 누적될 때아까 HTML 코드를 계속 보려면 다음과 같이 하십시오.

 


  
<div id="content"> 

  
<form method="post" action="#"> 

  
<h2>     </h2> 

  
<ul id="traffic_light"> 

  
<li><input type="radio" class="on" name="light" value="red" />   </li> 

  
<li><input type="radio" class="off" name="light" value="yellow" />   </li> 

  
<li><input type="radio" class="off" name="light" value="green" />   </li> 

  
</ul> 

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

  
</form> 

  
</div> 

 

예를 들어 빨간색과 녹색 단일 선택 상자를 선택해야 한다면 tag name을 사용하여 class를 제한할 수 있습니다. 아래와 같습니다.

 


  
var active_light = $("input.on");

  
 

 

물론 가까운 ID와 결합할 수도 있다. 아래와 같다.

 


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

  
 

 

tag를 사용하여class를 수식할 때 다음과 같은 몇 가지를 주의해야 한다.
(1) 다음과 같이 tag을 사용하여 ID를 손질하지 마십시오.

 


  
var content = $("div#content"); 

  
 

 

이렇게 하면 선택기는 모든div 요소를 훑어보고 #content와 일치합니다.
(2) 다음과 같이 ID를 사족으로 수식하지 마십시오.

 


  
var traffic_light = $("#content #traffic_light"); 

  
 

 

 
3. jQuery 대상을 캐시해서 jQuery 대상을 캐시하는 것은 jQuery 대상을 변수에 캐시하는 습관을 길러야 한다는 것을 알려주는 것이다.다음은 jQuery 초보자가 쓴 코드입니다.

 


  
$("#traffic_light input.on").bind("click", function(){ ... });  

  
$("#traffic_light input.on").css("border", "1px 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", "1px dashed yellow");  

  
$active_light.css("background-color", "orange");  

  
$active_light.fadeIn("slow"); 

 

같은 선택기가 코드에 여러 번 나타나지 않도록 하세요.
(1) 일반 JavaScript 객체와 jQuery 객체를 구분하기 위해 변수 머리글자 앞에 $기호를 붙일 수 있습니다.(2) 위 코드는 jQuery의 체인 조작을 사용하여 개선할 수 있다.다음과 같습니다.

 


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

  
$active_light.bind("click", function(){ ... })  

  
                    .css("border", "1px dashed yellow")  

  
                    .css("background-color", "orange")  

  
                    .fadeIn("slow"); 

 

다른 함수에서 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. 직접적인 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); 

 

주: 예전에 한 친구가 이런 코드를 쓴 것을 본 적이 있는 걸로 기억해요.

 


  
for (i = 0; i < 1000; i++) {   

  
     var $myList = $('#myList');   

  
     $myList.append('This is list item ' + i);   

  
}  

 

너는 이미 문제의 소재를 알아차렸을 것이다.
5.거품이 일다
특수한 경우를 제외하고는 모든 js 이벤트 (예: 클릭,mouseover 등)부급 노드까지 거품이 일어납니다.우리가 여러 원소에 같은 함수를 호출해야 할 때 이 점은 매우 유용할 것이다.이런 효율이 떨어지는 다원소 이벤트를 대신해서 감청하는 방법은 부모 노드에 한 번만 귀속시키는 것이다.예를 들어 우리는 많은 입력 상자를 가진 폼을 귀속시켜야 한다. 입력 상자가 선택되었을 때class를 추가하는 전통적인 방법은 input을 직접 선택한 다음focus를 귀속시키는 것이다. 아래와 같다.

 


  
$("#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");  

  
}); 

 

부모 감청을 통해 초점을 얻고 초점을 잃은 이벤트를 가져와 목표 요소를 조작합니다.위 코드에서 부모 요소는 스케줄러 역할을 하는데 목표 요소를 바탕으로 이벤트를 연결할 수 있다.만약 당신이 많은 원소에 같은 사건의 감청을 묶어 놓은 것을 발견한다면, 지금의 당신은 틀림없이 무엇이 잘못되었는지 알고 있을 것이다.마찬가지로 Table 작업 시에도 다음과 같은 방법으로 코드를 개선할 수 있습니다. 일반적인 방법:

 


  
$('#myTable td').click(function(){  

  
    $(this).css('background', 'red');  

  
});  

  
     ：   

  
$('#myTable').click(function(e) {   

  
var $clicked = $(e.target);   

  
$clicked.css('background', 'red');   

  
});  

 

100개의 td가 있다고 가정하면 일반적인 방식을 사용할 때 100개의 이벤트를 연결합니다.개선 방식에서 당신은 단지 하나의 원소를 하나의 사건으로 연결했을 뿐입니다. 100개의 사건의 효율이 높은지, 아니면 하나의 사건의 효율이 높은지 당신도 스스로 분별할 수 있을 것이라고 믿습니다.
 
6. $(window)로 연기합니다.load
jQuery는 개발자에게 $(document)에 모든 것을 걸 수 있는 매력적인 물건이 있습니다.ready.$(document)에도 불구하고.rady는 페이지를 렌더링할 때 다른 요소를 다운로드하지 않고 실행할 수 있는 데 정말 유용합니다.페이지가 계속 불러오는 상태인 것을 발견하면 $(document) 일 가능성이 높습니다.ready 함수로 인한 것입니다.jQuery 함수를 $(window)에 연결할 수 있습니다.load 이벤트는 페이지를 불러올 때 cpu 사용률을 줄이는 방법입니다.이것은 모든 html (