jQuery 性能优化技巧

一、使用最新版本 jQuery 类库

二、合理使用选择器

1 2 3 4 5 6 7 8 9 10 11 12 13 14

# 推荐使用 $( "#id") # 可以使用 $( "p"),$( "span") # 可以使用 $( ".class") # 尽量避免 $( "[attribute=value]") # 尽量避免 $( ":hidden")

三、使用缓存对象

场景：修改某个按钮的文本和颜色

1 2 3 4 5

# 不好的写法 $( "#btn").text( "重置"); $( "#btn").css( "color", "red");

1 2 3 4 5

# 优化的写法 var $btn = $( "#btn"); $btn.text( "重置").css( "color", "red");

四、循环时减少对DOM的操作

场景：往 <ul> 中添加 <li> 菜单项

1 2 3 4 5 6 7

# 不好的写法 var $ul = $( "#menu"); for( var i= 0; i< 6; i++) { $ul.append( "<li>菜单"+i+ "</li>") }

1 2 3 4 5 6 7 8 9 10

# 优化的写法 var $ul = $( "#menu"); var html = ""; for( var i= 0; i< 6; i++) { html += "<li>菜单"+i+ "</li>"; } $ul.append(html);

五、使用事件代理

场景：给 <ul> 里的所有 <li> 绑定点击变色事件

1 2 3 4 5

# 不好的写法 $( "ul li").on( "click", function() { $( this).css( "color", "red"); });

1 2 3 4 5 6

# 优化的写法 $( "ul li").on( "click", function(e) { var $obj = $(e.target); $obj.css( "color", "red"); });

六、将代码转成 jQuery 插件

七、使用 join() 拼接字符串

第四点的案例中，代码还可以进行优化

1 2 3 4 5 6 7 8

var $ul = $( "#menu"); var arr = []; for( var i= 0; i< 6; i++) { arr.push( "<li>菜单"+i+ "</li>"); } $ul.append(arr.join( "");

八、合理利用 HTML5 的 data 属性

使用 data-* 属性来嵌入自定义数据。

1	<div id="user" data-age="26" data-gender="男">张三 </div>

1 2 3 4 5

var user = $( "#user"); var age = user.data( "age"); var gender = $( "#user").data( "gender");

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

第五点的案例中，可以如下优化

1 2 3 4

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

十、压缩 JS 代码

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