原文地址：

博客地址：

一、使用最新版本 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("
菜单"+i+"
")}复制代码

# 优化的写法var $ul = $("#menu");var html = "";for(var i=0; i<6; i++) {    html += "
菜单"+i+"
";}$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("
菜单"+i+"
");}$ul.append(arr.join("");复制代码

八、合理利用 HTML5 的 data 属性

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

    
     张三
    
复制代码

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 代码

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