JQuery常用功能的性能优化
使用最佳选择器
通常比较常用的选择器有以下几个：
1.ID选择器 $("#id")
2.标签选择器 $("td")
3.类选择器 $(".target")
4.属性选择器 $("td[target='target']")
5.伪类选择器 $("td:hidden")
结论
1.原生方法是最快的方法，如果可能，尽量选择用原生
2.性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应，所以很快；类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName)，为了兼顾IE6、7、8的性能，避免使用全局的类选择器；
4.属性和伪类选择器非常慢，如非必要，尽量少使用伪类选择器和属性选择器
最佳实践
1.为模块中操作最频繁的元素和根元素设置id，然后缓存；
2.对没有id的元素检索，尽量采用路径最短的祖先元素id作为默认的搜索范围，并采用纯类选择器或者标签选择器；
3.尽量避免复杂的选择器
避免执行全局查找
1 | $("div.bizHelp"); |
=>
1 | $("#container").find(".bizHelp"); |
保证查询的路径最短，性能最优，参照第一条；
避免对空结果进行操作
对于数量为0的选择结果，JQuery会执行默认动作，并且不会报错，这会影响程序的性能。
1 | varblank=$(".blank");//length=0 |
1 | blank.slideUp(); |
=>
1 | blank.length && blank.slideUp(); |
避免使用匿名函数
大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度，因此应该尽量避免大量的使用匿名函数
1 | obj.click(function(){ |
2 | //do something... |
3 | }) |
=>>
1 | varclickHandler=function(){ |
2 | //do something... |
3 | } |
4 | obj.click(clickHandler) |
大循环采用更高效的遍历方式
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历，除此之外，还可以采用JS原生的for循环、while等来实现迭代：
1 | varlist=ul.find("li"),e; |
A:
1 | vari=list.length; |
2 | while(i--){ |
3 | e=$(list[i]) |
4 | } |
B:
1 | list.each(function(){ |
2 | e=$(this); |
3 | }); |
C:
1 | $.each(list,function(){ |
2 | e=$(this); |
3 | }); |
结论
总体上来说A>C>B
最佳实践
追求极致性能，用原生方法；
循环数量少的话，建议使用$.each()，比较稳定；
优先使用原生属性
很多常用的属性，比如id、name等都被浏览器原生实现，在JQuery中我们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，非常慢。
1 | $.each(list,function(){ |
2 | //A |
3 | varkeyword">this).attr("id"); |
4 |
5 | //B |
6 | varkeyword">this.id; |
7 | }) |
结论
使用原生的API，可以极大的提高性能
最佳实践
对于id等常用的属性，用原生的属性，不要通过attr去获取；
使用事件委托
给一个列表中所有元素添加点击事件，传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件：
1 | $("li").click(function(){}) |
这种方法的在列表数量比较大的时候会有严重的性能问题，应该值得关注。
可以使用JQuery的事件委托机制，能很大程度的降低添加事件监听的消耗和内存的消耗。
A:
1 | varlist=$("li");//length>1 list.click(function(){ }) |
B:
1 | $("ul").delegate("li","click",function(){}) |
结论
委托的性能优势是非常绝对的；
最佳实践
对于需要同时给两个以上的同类型元素添加事件时，用方案B来代替A
使用$.data 而不是$.fn.data
1 | $(elem).data(key,value); $.data(elem,key,value); |
后者比前者快近10倍
- 上一篇 »javascript性能优化总结一，转载人家
- 下一篇 »jQuery高级技巧——性能优化篇