• 学员就业
  • JQuery高性能最佳实践

    2015-07-06 19:47:00
    安大叔
    原创
    4402

    【使用最佳选择器】

    使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。 通常比较常用的选择器有以下几个:

    1. ID选择器 $("#id")

    2. 标签选择器 $("td")

    3. 类选择器 $(".target")

    4. 属性选择器 $("td[target='target']")

    5. 伪类选择器 $("td:hidden")

    根据经验,我们应该知道这5种选择器的性能是依次下降的,我们不妨来做个betway体育手机网,看看他们的性能到底有多大差异:

  • betway体育手机网html片段:

  •  <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable">
       <tr>
         <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td>
       </tr>
     </table>
    

    betway体育手机网结果

  • betway体育手机网方案:对每个脚本执行1w次,统计3次运行结果的平均值

  • 方案
    IE6
    IE7
    IE8
    IE9
    chrome
    firefox
    opera
    safari
    $("#mytable td.target")
    5150
    5630
    780
    293
    69
    148
    31
    102
    $("#mytable .target")
    5320
    5780
    940
    297
    61
    141
    32
    101
    $("#mytable").find("td.target")
    4840
    5000
    1250
    387
    95
    205
    73
    157
    $("#mytable").find(".target")
    5000
    5150
    1400
    226
    49
    130
    60
    64
    $("#mytable td[target=target]")
    16410
    17660
    940
    406
    89
    166
    35
    120
    $("#mytable td:hidden")
    25000
    26720
    23750
    3638
    632
    1123
    3434
    569
    $("#target-td")
    630
    620
    310
    62
    9
    28
    12
    18
    $(".target")
    10310
    10790
    940
    207
    36
    181
    47
    44
    document.getElementById("target-td")
    150
    150
    160
    6
    1
    1
    5
    2

    结论

    1. 原生方法是最快的方法,如果可能,尽量选择用原生

    2. 性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

    3. ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应,所以很快;类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName)

    4. 为了兼顾IE6、7、8的性能,避免使用全局的类选择器;

    5. 属性和伪类选择器非常慢,如非必要,尽量少使用伪类选择器和属性选择器


    最佳实践

    1. 为模块中操作最频繁的元素和根元素设置id,然后缓存;

    2. 对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器;

    3. 尽量避免复杂的选择器


    【避免执行全局查找】

     $("div.bizHelp");
    

    =>

     $("#container").find(".bizHelp");
    

    保证查询的路径最短,性能最优,参照第一条;


    【避免对空结果进行操作】

    对于数量为0的选择结果,JQuery会执行默认动作,并且不会报错,这会影响程序的性能。

     var blank=$(".blank");//length=0
    

    A :

     blank.slideUp();
    

    B:

     blank.length && blank.slideUp();
    

    betway体育手机网结果

  • betway体育手机网说明:1w次执行耗时,单位毫秒/ms,统计三次运行的平均值

  • 方案
    IE6
    IE7
    IE8
    IE9
    chrome
    firefox
    opera
    safari
    A
    6110
    5610
    1344
    488
    103
    194
    108
    155
    B
    0
    0
    0
    0
    0
    0
    0
    0

    结论

    应该避免对空对象进行操作;

    【采用样式表,避免多次调整样式】

    对一个对象应用多个样式,最好采用样式表的方式,避免多次应用。

    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("css-operation")
    

    betway体育手机网结果

  • betway体育手机网说明:1w次执行耗时,单位毫秒/ms,统计三次运行的平均值

  • 方案
    IE6
    IE7
    IE8
    IE9
    chrome
    firefox
    opera
    safari
    A
    2594
    2486
    1500
    501
    163
    222
    190
    191
    B
    1000
    953
    547
    190
    79
    28
    15
    86
    C
    843
    672
    407
    111
    21
    17
    16
    31

    结论

    1. 性能排序:C>B>A

    2. 样式和JS分离的方案性能最佳,适用于要同时设置多个样式的场景;

    3. 如果只应用单个样式,简单起见可以考虑采用方案A

    4. 如果应多若干个样式,而且不愿意新建一个css class,可以采用B;


    【避免使用匿名函数】

    大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能betway体育手机网 增加难度,因此应该尽量避免大量的使用匿名函数

     obj.click(function(){
       //do something...
     })
    

    =>>

     var clickHandler=function(){
       //do something...
     }
     obj.click(clickHandler)
    

    【大循环采用更高效的遍历方式】

    JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代,应该了解一下他们之间的性能差异:

     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);
     });
    

    betway体育手机网结果

  • betway体育手机网说明: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%的性能提升,但是不稳定;

    3. 在IE浏览器下B方案和C方案性能相当,A方案有比较绝对的优势;

    4. Chrome、firefox下A方案的性能不稳定;

    最佳实践

    1. 追求极致性能,用方案A;

    2. 循环数量少的话,建议使用方案C,比较稳定;


    【优先使用原生属性】

    很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。

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

    betway体育手机网结果

  • betway体育手机网说明: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. 使用原生的API,可以极大的提高性能

    最佳实践

    1. 对于id等常用的属性,用原生的属性,不要通过attr去获取;


    【使用事件委托】

    经常会遇到给一个列表中所有元素添加点击事件的业务场景,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:

     $("li").click(function(){})
    

    这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。JQuery在很早的版本中已经引入了事件委托机制,可以很大程度的降低添加事件监听的消耗和内存的消耗。

    对1w条记录的列表进行betway体育手机网:

  • A:

  •  var list=$("li");//length>1
       list.click(function(){
     })
    
  • B:

  •  $("ul").delegate("li","click",function(){})
    

    betway体育手机网结果

  • betway体育手机网说明:对1w个<li>标签进行click事件添加的耗时,单位毫秒/ms,统计三次运行的平均值

  • 方案
    IE6
    IE7
    IE8
    IE9
    chrome
    firefox
    opera
    safari
    A
    2156
    2172
    1922
    312
    103
    173
    141
    117
    B
    0
    0
    0
    0
    0
    0
    0
    0

    结论

    1. 委托的性能优势是非常绝对的;

    最佳实践

    1. 对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A


    【缓存查找的中间结果】

     $(".list-item").show();
     $(".list-item").hide();
    

    =>

     var listItem=$(".list-item");
     listItem.show();
     listItem.hide();
    


    【减少DOM操作,尽量批量更新】

    Dom 操作是浏览器操作中最为耗时的操作之一,JQuery中提供了append、appendTo、prepend、prependTo、after、 before、insertAfter、wrap等操作dom的实用方法,频繁使用这些方法可能会引起性能问题,一个提高性能的实践原则就是“尽可能少的 使用它们”。 如果一定要用到,也尽可能的采用合并、批量操作来减少dom的操作消耗。

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

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

    后者比前者快近10倍


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

    新版本总会对性能进行改进,还会提供一些非常好用的工具,如果可以的话,应该尽量选用最新的版本;


    【jQuery html性能大坑】

    jQuery的html方法的作用是为dom元素设置innerHTML,分析html的源代码(1.8.3)

    if ( elem.nodeType === 1 ) {
        jQuery.cleanData( elem.getElementsByTagName( "*" ) );
        elem.innerHTML = value;
    }
    

    在设置dom的innerHTML之前,会执行jQuery.cleanData,这个方法会对dom元素做一些clean的处理,如removeEvent,删除缓存等。
    以两百行的列表为例,在ff浏览器中,该方法会执行大约5ms到8ms。即当dom元素为空时和dom元素中有两百行数据时,执行html方法,后者会比前者多运行5ms到8ms。
    坑点
    cleanData方法在jQueryUI中也会定义,且会重写$.cleanData,增加一些额外的操作,性能会受到影响。
    还是以两百行的列表为例,在ff浏览器中,该方法会执行大约60ms到70ms。即当dom元素为空时和dom元素中有两百行数据时,执行html方法,后者会比前者多运行60ms到70ms。
    解决方案
    1. 采用原生的dom.innerHTML
    2.在执行html()方法之前,先执行remove()方法

    公司简介
    Besttest,全称北京百测技术咨询有限公司,是目前中国唯一一家专业高端软件培训机构,长年致力于betway体育手机网领域在职短期提升、企业内训、技术推广、免费公开课等多种服务方式,持续为软件betway体育手机网工程师提供优秀的学习平台。