jQuery Performance Optimization Guide (3)_jquery

8，尽量使用ID代替Class。

 

前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。
看下面的一个例子：

// 创建一个list

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

var myListItems = '

';

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

myListItems += '

This is a list item

'; //这里使用的是class

 }

myListItems += '';

$myList.html(myListItems);

// 选择每一个 li

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

    var selectedItem = $('.listItem' + i);

}

在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。

接着我们做一个对比，用ID代替class：

 

// 创建一个list

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

var myListItems = '

';

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

myListItems += '

This is a list item

'; //这里使用的是id

}

myListItems += '';

$myList.html(myListItems);

 // 选择每一个 li

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

var selectedItem = $('#listItem' + i);

}

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。

9，给选择器一个上下文

jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );

通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
普通方式：
$('.myDiv')
改进方式：
$('.myDiv' , $("#listItem") )

10，慎用 .live()方法（应该说尽量不要使用）

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:

this is first p

add

运行后，你会发现 新增 的 p元素，并没用被绑定click事件。

你可以改成.live("click")方式解决此问题，代码如下：

$(function(){

$("p").live("click",function(){ //改成live方式

     alert( $(this).text() );

 });

$("button").click(function(){ $("

this is second p

").appendTo("body"); });})

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

$(function(){

$("p").click(function(){

    alert( $(this).text() );

});

$("button").click(function(){

    $("

this is second p

").click(function(){  //为新增的元素重新绑定一次

            alert( $(this).text() );

    }).appendTo("body");

});

})

Although I rewrote the binding event and the code is a bit more, the efficiency of this method is significantly higher than the live() method.
This is very obvious especially in frequent DOM operations.

11, child selector and descendant selector

The descendant selector is often used, such as: $("#list p");
The descendant selector obtains all elements inside the element.

Sometimes you only need to obtain child elements, so you should not use the descendant selector.
You should use a sub-selector, the code is as follows:
$("#list > p");

12, use data() method to store temporary variables

The following is a very simple code,

$(function(){

var flag = false;

$("button").click(function(){

if(flag){

$("p").text("true");

flag=false;

}else{

$("p").text("false");

flag=true;

       }

});

})

After switching to data() method, the code is as follows:

$(function(){

$("button").click(function(){

If( $("p").data("flag") ){

$("p").text("true");

$("p").data("flag",false);

}else{

$("p").text("false");

$("p").data("flag",true);

       }

});

})

This concludes the jQuery Performance Optimization Guide (3).

I believe you also have your own ideas, please share them. Email: cssrain@gmail.com