一、使用最新版本 jQuery 类库

二、合理使用选择器

  1. # 推荐使用
  2. $("#id")
  3. # 可以使用
  4. $("p"),$("span")
  5. # 可以使用
  6. $(".class")
  7. # 尽量避免
  8. $("[attribute=value]")
  9. # 尽量避免
  10. $(":hidden")

三、使用缓存对象

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

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

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

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

  1. # 不好的写法
  2. var $ul = $("#menu");
  3. for(var i=0; i<6; i++) {
  4. $ul.append("<li>菜单"+i+"</li>")
  5. }
  1. # 优化的写法
  2. var $ul = $("#menu");
  3. var html = "";
  4. for(var i=0; i<6; i++) {
  5. html += "<li>菜单"+i+"</li>";
  6. }
  7. $ul.append(html);

五、使用事件代理

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

  1. # 不好的写法
  2. $("ul li").on("click",function() {
  3. $(this).css("color","red");
  4. });
  1. # 优化的写法
  2. $("ul li").on("click",function(e) {
  3. var $obj = $(e.target);
  4. $obj.css("color","red");
  5. });

六、将代码转成 jQuery 插件

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

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

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

八、合理利用 HTML5 的 data 属性

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

  1. <div id="user" data-age="26" data-gender="男">张三</div>
  1. var user = $("#user");
  2. var age = user.data("age");
  3. var gender = $("#user").data("gender");

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

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

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

十、压缩 JS 代码

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