JQuery性能优化方法

浏览数：52 / 时间：2015年06月09日

尽管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

 

结论

    1. 总体上来说A>C>B

    2. 方案A有大约25%的性能提升，但是不稳定。追求极致性能，用方案A；

    3. 循环数量少的话，建议使用方案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

新版本总会对性能进行改进，还会提供一些新的方法。

如果可以的话，应该尽量选用最新的版本；

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java 使用 html log 方法 js class style 代码 java 使用 html log 方法 js

相关文章

随机文章

您可能还喜欢

您可能还喜欢