jQuery性能優化指南二

xyang81 15年前發布 | 1K 次閱讀 jQuery

8.盡量使用ID代替Class。
前面性能優化已經說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。
看下面的一個例子：

Js代碼

// 創建一個list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item

'; //這里使用的是class

}
myListItems += '</ul>';
$myList.html(myListItems);
// 選擇每一個 li
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}

// 創建一個list

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

var myListItems = '<ul>';

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

myListItems += '<li class="listItem' + i + '">This is a list item'; //這里使用的是class

}

myListItems += '</ul>';

$myList.html(myListItems);

// 選擇每一個 li

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

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

}
在代碼最后，選擇每個li的過程中，總共用了5066毫秒，超過5秒了。
接著我們做一個對比，用ID代替class：

Js代碼

// 創建一個list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item

'; //這里使用的是id

}
myListItems += '</ul>';
$myList.html(myListItems);
// 選擇每一個 li
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}

在上段代碼中，選擇每個li總共只用了61毫秒，相比class的方式，將近快了100倍。

9.給選擇器一個上下文

jQuery選擇器中有一個這樣的選擇器，它能指定上下文。
jQuery( expression, context );
通過它，能縮小選擇器在DOM中搜索的范圍，達到節省時間，提高效率。
普通方式：

Js代碼

$('.myDiv')

$('.myDiv')

改進方式：

Js代碼

$('.myDiv' , $("#listItem") )

$('.myDiv' , $("#listItem") )

10.慎用 .live()方法（應該說盡量不要使用）

這是jQuery1.3.1版本之后增加的方法，這個方法的功能就是為新增的DOM元素動態綁定事件。
但對于效率來說，這個方法比較占用資源。所以請盡量不要使用它。
例如有這么一段代碼:

Html 代碼

<script type="text/javascript" >
$(function(){
$("p").click(function(){
alert( $(this).text() );
});
$("button").click(function(){
$("<p>this is second p
").appendTo("body");
});
}) </script>
<body>
<p>this is first p
<button>add</button>
</body>

$(function(){

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

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

});

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

$("<p>this is second p

").appendTo("body");

});

}) </script>

<body>

<p>this is first p

</body>
運行后，你會發現新增的 p元素，并沒用被綁定click事件。
你可以改成.live("click")方式解決此問題，代碼如下：

Js代碼

$(function(){
$("p").live("click",function(){ // 改成live方式
alert( $(this).text() );
});
$("button").click(function(){ $("<p>this is second p
").appendTo("body"); });})

$(function(){

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

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

});

$("button").click(function(){ $("<p>this is second p

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

但我并不建議大家這么做，我想用另一種方式去解決這個問題，代碼如下：

Js代碼

$(function(){
$("p").click(function(){
alert( $(this).text() );
});
$("button").click(function(){
$("<p>this is second p
").click(function(){ // 為新增的元素重新綁定一次
alert( $(this).text() );
}).appendTo("body");
});
})

$(function(){

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

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

});

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

$("<p>this is second p

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

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

}).appendTo("body");

});

})

雖然我把綁定事件重新寫了一次，代碼多了點，但這種方式的效率明顯高于live()方式，
特別是在頻繁的DOM操作中，這點非常明顯。

11.子選擇器和后代選擇器

后代選擇器經常用到，比如：$("#list p");
后代選擇器獲取的是元素內部所有元素。
而有時候實際只要獲取子元素，那么就不應該使用后代選擇器。
應該使用子選擇器，代碼如下：
$("#list > p");

12.使用data()方法存儲臨時變量

下面是一段非常簡單的代碼，

Js代碼

$(function(){
var flag = false;
$("button").click(function(){
if(flag){
$("p").text("true");
flag=false;
}else{
$("p").text("false");
flag=true;
}
});
})

$(function(){

var flag = false;

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

if(flag){

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

flag=false;

}else{

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

flag=true;

}

});

})

改用data()方式后，代碼如下：

Js代碼

$(function(){
$("button").click(function(){
if( $("p").data("flag") ){
$("p").text("true");
$("p").data("flag",false);
}else{
$("p").text("false");
$("p").data("flag",true);
}
});
})

$(function(){

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

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

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

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

}else{

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

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

}

});

})

13.盡量使用原生的JavaScript方法

看下面一段代碼，它用來判斷多選框是否被選中：

Js代碼

$(document).ready(function(){
var $cr = $("#cr"); //jQuery對象
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判斷
alert("感謝你的支持!你可以繼續操作！");
}
})
});

$(document).ready(function(){

var $cr = $("#cr"); //jQuery對象

$cr.click(function(){

if($cr.is(":checked")){ //jQuery方式判斷

alert("感謝你的支持!你可以繼續操作！");

}

})

});
上面代碼中，判斷是否選中是用了 jquery的方法，但這里可以直接使用原生的JavaScript方法，看下面代碼：

Js代碼

$(document).ready(function(){
var $cr = $("#cr"); //jQuery對象
var cr = $cr.get(0); //DOM對象，獲取 $cr[0]
$cr.click(function(){
if(cr.checked){ //原生的JavaScript方式判斷
alert("感謝你的支持!你可以繼續操作!");
}
})
}); $(document).ready(function(){

var $cr = $("#cr"); //jQuery對象

var cr = $cr.get(0); //DOM對象，獲取 $cr[0]

$cr.click(function(){

if(cr.checked){ //原生的JavaScript方式判斷

alert("感謝你的支持!你可以繼續操作!");

}

})

});

毋庸置疑，第二種方式效率高于第一種方式，因為他不需要拐彎抹角的去調用許多函數。

更多：

Js代碼

$(this).css("color","red");

$(this).css("color","red");

改成：

Js代碼

this.style.color ="red"

this.style.color ="red"

有時候你也許根本不需要jQuery。（如果不涉及兼容性問題。）

本文由用戶 xyang81 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/blog/5052553519416288251.html

jQuery

jQuery性能優化指南二

博客分類

目錄

推薦閱讀

jQuery性能優化指南二

jQuery性能優化指南一

jQuery 教程指南

Javascript 加載性能優化