JQuery常用功能的性能优化
2014-04-09 11:23
274 查看
使用最佳选择器
通常比较常用的选择器有以下几个:
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.尽量避免复杂的选择器
避免执行全局查找
=>
保证查询的路径最短,性能最优,参照第一条;
避免对空结果进行操作
对于数量为0的选择结果,JQuery会执行默认动作,并且不会报错,这会影响程序的性能。
=>
避免使用匿名函数
大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度,因此应该尽量避免大量的使用匿名函数
=>>
大循环采用更高效的遍历方式
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代:
A:
B:
C:
结论
总体上来说A>C>B
最佳实践
追求极致性能,用原生方法;
循环数量少的话,建议使用$.each(),比较稳定;
优先使用原生属性
很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。
结论
使用原生的API,可以极大的提高性能
最佳实践
对于id等常用的属性,用原生的属性,不要通过attr去获取;
使用事件委托
给一个列表中所有元素添加点击事件,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:
这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。
可以使用JQuery的事件委托机制,能很大程度的降低添加事件监听的消耗和内存的消耗。
A:
B:
结论
委托的性能优势是非常绝对的;
最佳实践
对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A
使用$.data而不是$.fn.data
后者比前者快近10倍
通常比较常用的选择器有以下几个:
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 | var blank=$( ".blank" ); //length=0 |
1 | blank.slideUp(); |
1 | blank.length&&blank.slideUp(); |
大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度,因此应该尽量避免大量的使用匿名函数
1 | obj.click( function (){ |
2 | //dosomething... |
3 | }) |
1 | var clickHandler= function (){ |
2 | //dosomething... |
3 | } |
4 | obj.click(clickHandler) |
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代:
1 | var list=ul.find( "li" ),e; |
1 | var i=list.length; |
2 | while (i--){ |
3 | e=$(list[i]) |
4 | } |
1 | list.each( function (){ |
2 | e=$( this ); |
3 | }); |
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 | var id=$( this ).attr( "id" ); |
4 |
5 | //B |
6 | var id= this .id; |
7 | }) |
使用原生的API,可以极大的提高性能
最佳实践
对于id等常用的属性,用原生的属性,不要通过attr去获取;
使用事件委托
给一个列表中所有元素添加点击事件,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:
1 | $( "li" ).click( function (){}) |
可以使用JQuery的事件委托机制,能很大程度的降低添加事件监听的消耗和内存的消耗。
A:
1 | var list=$( "li" ); //length>1list.click(function(){}) |
1 | $( "ul" ).delegate( "li" , "click" , function (){}) |
委托的性能优势是非常绝对的;
最佳实践
对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A
使用$.data而不是$.fn.data
1 | $(elem).data(key,value);$.data(elem,key,value); |
相关文章推荐
- JQuery常用功能的性能优化
- JQuery常用功能的性能优化
- JQuery常用功能的性能优化
- JQuery常用功能的性能优化
- 谈谈jquery性能优化的常用策略
- jquery常用片段以及性能优化总结
- 12种jQuery性能优化方法解析(常用 转载)
- Oracle expdp/impdp常用性能优化方法
- iOS 25个性能优化/内存优化常用方法
- JQuery常用函数及功能小结
- [置顶] jQuery性能优化
- 提高jQuery性能优化的技巧
- jQuery学习整理 (10)jQueryUI常用功能实战
- 从零开始学习jQuery教程:jQueryUI常用功能实战
- ASP.NET中常用的26个优化性能方法
- jQuery性能优化
- iOS 25个性能优化/内存优化常用方法
- jQuery性能优化——优化选择器执行的速度
- jQuery性能优化指南(1)
- compass实现搜索、订单载入功能、velocity模版静态化、OSCache优化性能、SSI实现