jQuery Performance Optimization Guide (1)_jquery

1, always inherit from the ID selector

The fastest selector in jQuery is the ID selector, because it comes directly from JavaScript's getElementById() method.
For example, there is a piece of HTML code:

Copy the code The code is as follows:

traffic light

• red


• yellow
  
• green

If the following selector is used, the efficiency is inefficient.
var traffic_button = $("#content .button");

Because the button already has an ID, we can use the ID selector directly. As shown below:
var traffic_button = $("#traffic_button");

Of course this is only for a single element. If you need to select multiple elements, this will inevitably involve DOM traversal and looping.
In order to improve performance, it is recommended to inherit from the nearest ID.
As shown below:
var traffic_lights = $("#traffic_light input");

2, use tag (tag name) before class

The second fastest selector in jQuery is the tag selector (eg: $("head") ).
When compared to the ID selector, it comes from the native getElementsByTagName() method.

Continue to look at the HTML code just now:

Copy the code The code is as follows:

traffic light

• red li>
  
• yellow


• green

For example, you need to choose red and green radio button,
then you can use a tag name to limit (modify) the class, as shown below:
var active_light = $("input.on");
Of course, you can also combine it with the nearest ID, As shown below:
var active_light = $("#traffic_light input.on");


When using tags to modify classes, we need to pay attention to the following points:
(1) Do not use tag to modify ID, as shown below:
var content = $("div#content");
In this way, the selector will first traverse all div elements , and then match #content.
(It seems that this problem no longer exists after jQuery changed the core of the selector from 1.3.1. It cannot be verified for the time being.)

(2) Don’t use ID to modify the ID, as shown below :
var traffic_light = $("#content #traffic_light");


Note: If you use attribute selectors, please try to use tags to modify them, as shown below:
$ ('p[row="c3221"]').html(); instead of: $('[row="c3221"]').html();


3. Cache jQuery objects

Caching jQuery objects tells us to develop the habit of caching jQuery objects into variables.
The following is a piece of code written by a jQuery newbie:

Copy the code The code is as follows:

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

But remember not to do this.

We should cache the object into a variable first and then operate as follows:

Copy code The code is as follows:

var $active_light = $("#traffic_light input.on")
$active_light.bind("click", function(){ ... })
$active_light.css ("테두리", "1px 점선 노란색");
$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);
// 함수 내부에서 작업할 때 전역 개체에 쿼리를 계속 저장할 수 있습니다. = $("#some_ul li ");
$my.other_results = $("#some_table td")
// 전역 함수를 일반 jquery 개체로 사용합니다.
$my.other_results. css("border-color", "red");
$my.traffic_light.css("border-color", "green")
}

//다음을 사용할 수도 있습니다.


jQuery 성능 최적화 가이드(1)는 여기서 끝납니다. 가이드(2)를 확인하세요.

영문 원문:

http://www.artzstudio.com/2009/04/jquery-performance-rules/

중국어 번역:

http://rlog.cn/350

& http://cssrain.cn