JQuery高品质优化

6110

七.越来越高速的遍历格局

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,总计叁回运维的平均值

结论

1. 完全上来说A>C>B

2. 方案A有大约三成的性格升高，然则不安宁。追求极致品质，用方案A；

3. 循环数量少的话，提议利用方案C，相比较牢固；

巡回接纳越来越高效的遍历情势

应用事件委托

五.回退对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(''));

        最棒实行

制止使用无名函数

=>>

三.缓存对象

//错误的
$(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...    
});

    能够选取JQuery的平地风波委托机制，能相当的大程度的消沉增进事件监听的消耗和内部存储器的损耗。

        对于id等常用的习性，用原生的习性，不要通过attr去赢得；

• B:

就算JavaScript比JAVA
C++慢很多，JQuery比原生Js还慢非常多，不过大家经过优质的编制程序习贯还可以增高代码推行的频率。

       
2.对从未id的成分检索，尽量使用路线最短的祖宗成分id作为暗中认可的搜求范围，并利用纯类采用器或然标签选用器；

测试html片段： 

二.制止执行全局查找

//错误的
$("div.bizHelp"); 

//正确的
$("bizHelp"); 
$("#container").find(".bizHelp"); 

管教查询的路子最短，质量最优　　

    一流执行

运用JQuery时，你能够行使三种采取器，采用同叁个成分，各个方式之间的质量是不雷同的，不时候差别会非常大。
平常比较常用的采纳器有以下多少个： 

六.优化事件冒泡

//不好的
$('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...
});

        3.类选拔器 $(“.target”)

九.唯恐的话，使用新型版本的JQuery

新本子总会对品质实行改革，还有或者会提供一些新的不二诀窍。

只要能够的话，应该尽只怕选拔最新的版本；

        4.属性和伪类采用器比一点也不快，如非要求，尽量少使用伪类选拔器和性质选拔器

• 测量检验申明：10w次推行耗费时间，单位微秒/ms,总计三遍运营的平均值

一.采纳器的接纳

慎选同三个成分，种种格局之间的属性是不平等的，一时候差别会非常大。经常比较常用的选用器有以下多少个： 

ID选择器 $(“#id”) 

标签选用器 $(“td”) 

类选拔器 $(“.target”) 

个性选择器 $(“td[target=’target’]”) 

伪类选拔器 $(“td:hidden”) 

那5种选拔器的本性是逐条下跌的：

个性顺序：ID选用器 > 标签选拔器 >
类选择器 > 属性选拔器 > 伪类采取器 

        4.属性选拔器 $(“td[target=’target’]”)

四.采用体制表 幸免频仍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

八.事先接纳原生属性

$.each(list,function(){  
  //A  
  var id=$(this).attr("id");

  //B  
  var id=this.id;  
})  

成百上千常用的性质，比方id、name等都被浏览器原生完成，在JQuery中大家偶然会用$(this).attr(“id”)的办法来收获id，这种艺术的作用相比较原生属性的获得作用来说，相当的慢。

行使原生的API，可以不小的狠抓质量

测量检验证明：10w次推行耗费时间，单位微秒/ms,计算三遍运营的平均值

使用$.data 而不是$.fn.data

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

            追求极致质量，用原生方法；

结论

根据经验，大家相应明了那5种选用器的性质是各样下跌的 

        对于id等常用的性质，用原生的习性，不要通过attr去赢得；

• A:

0

        =>

=>>

减去DOM操作，尽量批量翻新

制止对空结果实行操作

对此数据为0的选拔结果，JQuery会试行暗许动作，並且不会报错，那会影响程序的质量。

firefox

成都百货上千常用的习性，举个例子id、name等都被浏览器原生达成，在JQuery中大家临时会用$(this).attr(“id”)的议程来获取id，这种办法的效能相比较原生属性的得到成效来说，一点也不快。

            总体上来讲A>C>B

    B:

safari

动用最好采纳器

        JQuery提供了$.fn.each()和$.each()五个法子来达成对聚集的遍历，除此而外，还足以采纳JS原生的for循环、while等来贯彻迭代：

        1.原生方法是最快的办法，就算或许，尽量挑选择原生

IE6

大批量的行使无名函数会对先后的调治、维护以及由此第三方软件来做品质测量试验扩张难度，因而应当尽量幸免多量的接纳无名函数

1344

        C:

155

        B:

测验结果

事先使用原生属性

        2.标签选取器 $(“td”)

JQuery提供了$.fn.each()和$.each()七个法子来兑现对聚焦的遍历，除却，还足以选用JS原生的for循环、while等来贯彻迭代，应该通晓一下他们中间的属性差距：

=>

0

        结论

• B:

        后面一个比前面一个快近10倍