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

方案 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有大约三成的性格升高,然则不安宁。追求极致品质,用方案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"); 

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

 

3         });

    一流执行

运用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

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

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

 

2           e=$(this);  

        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

 

6   var id=this.id;  

 

 

八.事先接纳原生属性

$.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

 

 

 

 

1 var clickHandler=function(){  

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

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

 

            追求极致质量,用原生方法;

结论

2   //A

    

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

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

3 })
  • A:
1 $(elem).data(key,value);  $.data(elem,key,value);
2   //do something...  

0

 

        =>

 

 

=>>

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

 

制止对空结果实行操作

 

 

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

方案 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
1 $("#container").find(".bizHelp");
4    

firefox

 

 

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

            总体上来讲A>C>B

    B:

safari

 

动用最好采纳器

 

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

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

IE6

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

3         });

1344

        C:

1 $(elem).data(key,value);  $.data(elem,key,value);

155

 

        B:

测验结果

事先使用原生属性

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

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

1 var list=$("li");//length>1    list.click(function(){  })
1  var list=ul.find("li"),e;

=>

1  $.each(list,function(){  
1 $("li").click(function(){})

0

        结论

 

  • B:

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

1 var clickHandler=function(){  

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图