jQuery 效能優化技巧

moonlightL發表於2017-09-26
jQuery優化

原文地址：jQuery 效能優化技巧
部落格地址：www.extlight.com

一、使用最新版本 jQuery 類庫

二、合理使用選擇器

# 推薦使用
$("#id") 

# 可以使用
$("p"),$("span") 

# 可以使用
$(".class") 

# 儘量避免
$("[attribute=value]")  

# 儘量避免
$(":hidden")複製程式碼

三、使用快取物件

場景：修改某個按鈕的文字和顏色

# 不好的寫法

$("#btn").text("重置");

$("#btn").css("color","red");複製程式碼
# 優化的寫法

var $btn = $("#btn");

$btn.text("重置").css("color","red");複製程式碼

四、迴圈時減少對DOM的操作

場景：往 <ul> 中新增 <li> 選單項

# 不好的寫法

var $ul = $("#menu");

for(var i=0; i<6; i++) {
    $ul.append("<li>選單"+i+"</li>")
}複製程式碼
# 優化的寫法

var $ul = $("#menu");
var html = "";

for(var i=0; i<6; i++) {
    html += "<li>選單"+i+"</li>";
}

$ul.append(html);複製程式碼

五、使用事件代理

場景：給 <ul> 裡的所有 <li> 繫結點選變色事件

# 不好的寫法

$("ul li").on("click",function() {
   $(this).css("color","red"); 
});複製程式碼
# 優化的寫法

$("ul li").on("click",function(e) {
   var $obj = $(e.target);
   $obj.css("color","red"); 
});複製程式碼

六、將程式碼轉成 jQuery 外掛

七、使用 join() 拼接字串

第四點的案例中，程式碼還可以進行優化

var $ul = $("#menu");
var arr = [];

for(var i=0; i<6; i++) {
   arr.push("<li>選單"+i+"</li>");
}

$ul.append(arr.join("");複製程式碼

八、合理利用 HTML5 的 data 屬性

使用 data-* 屬性來嵌入自定義資料。

<div id="user" data-age="26" data-gender="男">張三</div>複製程式碼

    var user = $("#user");

    var age = user.data("age");
    var gender = $("#user").data("gender");複製程式碼

九、儘量使用原生的 JS 方法

第五點的案例中，可以如下優化

$("ul li").on("click",function(e) {
   var $obj = $(e.target);
   $obj.get(0).style.color = "red";
});複製程式碼

十、壓縮 JS 程式碼

如有更多優化技巧，後續補充......

相關文章