jQuery 性能优化

1.尽量使用最新版本的jQuery 类库。

jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过更换新版本之后,不要忘记测试代码的兼容性。

2. 使用合适的选择器

1.$(“#id”) 使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery 底层将直接调用javascript的原生方法document.getElementById()。此外选择元素时,应该尽量缩小DOM的查找范围。例如在某个id下查找div.$("#id").find("div");这样也能提高查找效率。

2.使用标签选择器 $("div") $("input")
使用标签选择器将会直接调用javascript的document.getElementsByTagName()方法来定位DOM元素。

3.使用类选择器 $(".class")。
使用类选择器,如果浏览器支持javascript的document.getElementsByClassName()方法,则直接使用该方法,否则就逐个遍历DOM元素。

4.使用属性选择器 $("[attribute=value]")
较新的浏览器可能支持document.querySelectorAll()方法,但是有的浏览器可能不支持,这在于他们的内核不一样。使用这种方式来查找DOM元素,性能并不理想,在开发中应该尽量避免使用。

5.使用伪选择器 $(":hidden")
和上面的属性选择器是同一类,javascript并没有对这类的实现,只有通过逐个遍历DOM元素来查找满足要求的元素,这个尽量不要使用。如果必须查找,则尽量缩小范围,从其父元素来进行搜索。例如:$("#id").find(":hidden");$("div.div").filter(":hidden")等。

上面的选择器性能自上而下依次下降,如果对上面有所疑问,可以自己在页面上进行测试。

3.缓存对象

如果在jQuery开发中经常使用一个对象,建议进行对其缓存,否则你每次使用$()这种方式都会创建一个jQuery对象。
例如有的人喜欢这样写:

$("#btn").bind("click",function(){});
$("#btn").css("border","1px");
$("#btn").css("backgroud-color","red");
$("#btn")....

这样最终会使jQuery创建很多的$(“#btn”)对象,而且在创建之前都必须进行DOM 查找一次。所以建议使用缓存对象或者链式的方式。

//缓存对象
$btn=$("#btn");
$btn.bind("click",function(){});
btn.css("border","1px");
btn.css("backgroud-color","red");
btn....
//链式操作
$("#btn").bind("click",function(){}).css("border","1px").css("backgroud-color","red")....；//如果像上面有相同的方法可以进行合并$("#btn").bind("click",function(){}).css({"border":"1px"},{"backgroud-color":"red"})....；

如果某个对象经常使用也可以添加到全局函数中

window.myCustomGlob={head:$("head"),title:$("title"),btn:$("#btn")};

记住：永远不要让相同的选择器在代码里面出现多次。

4.循环时的DOM操作

例如:

$ulList=$("#ulList");//ul列表集合
for(var i=0;i<10;i++)
{
$ulList.append("<li>"+i+"</li>");
}

上面代码将每一个新的li元素添加到ul中,实际上jQuery操作消耗的性能也不低,因为上面对DOM操作了10次,最好是在插入之前把li创建好。

$ulList=$("#ulList");//ul列表集合
var li="";
for(var i=0;i<10;i++)
{
li+="<li>"+i+"</li>";
}
$ulList.append(li);

5.使用js数组的join()方法来拼接字符串

上面使用+号拼接的li字符串,但是现在可以使用数组来转换字符串,性能比+号拼接微好些了,尤其是处理长字符串。

$ulList=$("#ulList");//ul列表集合
var liArr=[];
for(var i=0;i<10;i++)
{
liArr[i]="<li>"+i+"</li>";
}
$ulList.append(liArr.join(''));

我自己大概测试了一下,

数量	+	数组
100	1	0
1000	7	4
10000	53	49

但是在循环100000的情况下,+号大部分比数组的时间稍微小一些。这两个性能可以自行选择。

6.数组方式使用jQuery对象

使用jQuery选择器获取的结果是一个jQuery对象。jQuery类库会让你感觉正在使用一个定义了索引和长度数组。在性能方面,建议使用for或者while循环处理,而不是使用$.each()。这样使你的代码更快。


$.each(array,function(i){});

可以使用for代替each方法,代码如下:

for(var i=0,len=array.length;i<len;i++)
{
}

另外,检查长度也是检查一个jQuery对象是否存在的方式。

var $btn=$("#btn");
if($btn)//总是true
{};
if($btn.length)//元素存在才返回true
{}

7.事件代理

每一个JavaScript事件（click,mousedown）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如,给一个表格绑定点击td后,背景色设置为红色。代码如下:

$("#table td").click(function(){$(this).css("background","red");
});

如果table中有100个td,在使用上面的方式时,就绑定了100个事件,这将带来负面的性能影响。代替这种效率很差的多元素事件监听的方法是,只需要向它们的父节点绑定一次事件,然后通过event.target获取当前点击的元素即可。

  $("#table").click(function (event) {var $td = $(event.target);//捕捉触发的目标元素if ($td[0].nodeName == "TD") {$td.css("background", "red");}});

在改进的代码中,你只为一个元素绑定了1个事件,这种方式的性能要优于之前那种。
在jQuery1.7以后的版本中提供了一个新的方式on()，来帮助将整个事件监听封装到一个更加便利的方法中,如下:

$("#table").on("click",'td',function(){$(this).css("background","red");
});

8.将经常公用的代码转换为jQuery 插件

如果在你的项目中某段js代码经常被使用到或者有相同类似的代码,那可以考虑封装到jQuery 插件的形式,它能够使代码更好的重用性,并且有效组织代码,易于维护。

function($)
{$.fn.plugName=function(){//插件代码return this;};
}(jQuery);

例如封装一个设置颜色的color插件,插件名称:jquery.color.js

;function($){$.fn.extend({"color":function(value){if(value==undefined){return this.css("color");}return this.css("color",value);}});
}(jQuery);调用时可用直接使用了:$("#div").color("red");也可以封装一组插件的形式:
;function($){$.fn.extend({"color":function(value){if(value==undefined){return this.css("color");}return this.css("color",value);},"border":function(value){},"backgroud":function(value){}});
}(jQuery);

9.尽量使用原生的JavaScript方法

下面一段代码是用来判断多选框是否被选中:

 var $ckb=$("#ckb");$ckb.click(function(){if($ckb.is(":checked")){//可以使用$ckb.prop("checked"); prop比is效率高些}});

上面这种方法使用jQuery 提供的is()方法来判断多选框是否被选中,下面使用原生的javaScript方法,原生的方法比jQuery要快,毕竟不需要判断很多的东西。经验告诉我们,能使用原生就使用原生。推荐一个站点:http://youmightnotneedjquery.com/
里面有jQuery 对应的部分原生方法。

 var $ckb=$("#ckb");var ck=ckb.get(0);//获取DOM 对象 ckb[0]ckb.click(function(){if(ck.checked){}});

10. :checkbox

匹配<input type="checkbox">元素(jQuery扩展方法)。当带有input标签前缀 “<input:checkbox />"时更加高效。

参考来源:《锋利的jQuery 第2版》此书。