尽管JavaScript比JAVA C++慢很多,JQuery比原生Js还慢很多,但是我们通过良好的编程习惯还是能提高代码执行的效率。
一.选择器的使用
选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。通常比较常用的选择器有以下几个:
ID选择器 $("#id")
标签选择器 $("td")
类选择器 $(".target")
属性选择器 $("td[target=‘target‘]")
伪类选择器 $("td:hidden")
这5种选择器的性能是依次下降的:
性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
二.避免执行全局查找
//错误的 $("div.bizHelp"); //正确的 $("bizHelp"); $("#container").find(".bizHelp");
保证查询的路径最短,性能最优
三.缓存对象
//错误的 $(window).bind(‘click‘,function(){ //do someing... }); $(window).css(‘width‘,‘1000px‘); $(window).bind(‘load‘,function(){ //do someing... });
//优化的 var $win = $(window); $win.bind(‘click‘,function(){ //do someing... }); $win.css(‘width‘,‘1000px‘); $win.bind(‘load‘,function(){ //do someing... });
四.采用样式表 避免多次DOM style样式
var obj=$("#obj"); //A: obj.css("width",200); obj.css("height",200); obj.css("background":"#eee"); //B: obj.attr("style","width:200px;height:200px;background:#eee;"); //C: //加个css .operation{width:200px;height:200px;background:#eee;} obj.addClass("operation")
性能排序:C>B>A
五.减少对DOM元素的操作次数
//不好的 $.each(arr,function(i){ $(window).append(‘<li>‘+arr[i]+‘</li>‘) }); //优化的 var _html=[]; $.each(arr,function(i){ _html.push(‘<li>‘+arr[i]+‘</li>‘) }); $(window).append(_html.join(‘‘));
六.优化事件冒泡
//不好的 $(‘a‘).click(function(){ //do someing... }); //推荐的 $(document.body).click(function(event){ if(event.target.tagName==‘A‘){ //do someing... } }); //JQuery的方法 $(document.body).delegate("a","click",function(){ //do someing... });
七.更高效的遍历方式
var list=ul.find("li"), e; //A: var i=list.length; while(i--){ e=$(list[i]) } //B: list.each(function(){ e=$(this); }); //C: $.each(list,function(){ e=$(this); });
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代,应该了解一下他们之间的性能差异:
测试说明:1w次执行耗时,单位毫秒/ms,统计三次运行的平均值
方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
A | 172 | 219 | 157 | 30 | 3 | 5 | 4 | 6 |
B | 219 | 234 | 203 | 41 | 4 | 6 | 5 | 8 |
C | 219 | 234 | 187 | 52 | 3 | 4 | 5 | 7 |
结论
- 总体上来说A>C>B
- 方案A有大约25%的性能提升,但是不稳定。追求极致性能,用方案A;
- 循环数量少的话,建议使用方案C,比较稳定;
八.优先使用原生属性
$.each(list,function(){ //A var id=$(this).attr("id"); //B var id=this.id; })
很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。
使用原生的API,可以极大的提高性能
测试说明:10w次执行耗时,单位毫秒/ms,统计三次运行的平均值
方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
A | 6880 | 7030 | 4220 | 1188 | 157 | 244 | 133 | 135 |
B | 310 | 310 | 150 | 27 | 4 | 5 | 17 | 3 |
九.可能的话,使用最新版本的JQuery
新版本总会对性能进行改进,还会提供一些新的方法。
如果可以的话,应该尽量选用最新的版本;
时间: 2024-10-08 13:51:09