β

jQuery 性能优化技巧

月光中的污点 19 阅读

一、使用最新版本 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 代码

如有更多优化技巧,后续补充……

一、使用最新版本 jQuery 类库

二、合理使用选择器

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

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

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

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

# 尽量避免
$(":hidden")
作者:月光中的污点
云在青天水在瓶
原文地址:jQuery 性能优化技巧, 感谢原作者分享。

发表评论