【JQuery】性能优化方法

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

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

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

巴特西

【JQuery】性能优化方法

一.选择器的使用

二.避免执行全局查找

三.缓存对象

四.采用样式表避免多次DOM style样式

五.减少对DOM元素的操作次数

六.优化事件冒泡

七.更高效的遍历方式

八.优先使用原生属性

九.可能的话，使用最新版本的JQuery

最新文章

热门文章

巴特西

【JQuery】性能优化方法

一.选择器的使用

二.避免执行全局查找

三.缓存对象

四.采用样式表 避免多次DOM style样式

五.减少对DOM元素的操作次数

六.优化事件冒泡

七.更高效的遍历方式

八.优先使用原生属性

九.可能的话，使用最新版本的JQuery

最新文章

热门文章

四.采用样式表避免多次DOM style样式