Web最佳实践:JQuery高性能优化

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

使用***选择器

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

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

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

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

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

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

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

  • 测试html片段:

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

测试结果

  • 测试方案:对每个脚本执行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. 尽量避免复杂的选择器

避免执行全局查找

  1. $("div.bizHelp"); 

=>

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

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

避免对空结果进行操作

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

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

A :

  1. blank.slideUp(); 

B:

  1. blank.length && blank.slideUp(); 

测试结果

  • 测试说明: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

结论

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

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

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

  1. var obj=$("#obj"); 
  • A:

  1. obj.css("width",200);  
  2. obj.css("height",200);  
  3. obj.css("background":"#eee"); 
  • B:

  1. obj.attr("style","width:200px;height:200px;background:#eee;");  
  • C:

  1. .css-operation{width:200px;height:200px;background:#eee;}  
  2. obj.addClass("css-operation"

测试结果

  • 测试说明: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;

#p#

避免使用匿名函数

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

  1. obj.click(function(){  
  2.   //do something...  
  3. })  

=>>

  1. var clickHandler=function(){  
  2.   //do something...  
  3. }  
  4. obj.click(clickHandler)  

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

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

  1. var list=ul.find("li"),e;  
  • A:

  1. var i=list.length;  
  2. while(i--){  
  3.     e=$(list[i])  
  4. }  
  • B:

  1. list.each(function(){  
  2.   e=$(this);  
  3. });  
  • C:

  1. $.each(list,function(){  
  2.   e=$(this);  
  3. });  

测试结果

  • 测试说明: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,这种方法的效率相比原生属性的获取效率而言,非常慢。

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

测试结果

  • 测试说明: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事件:

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

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

对1w条记录的列表进行测试:

  • A:

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

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

测试结果

  • 测试说明:对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

#p#

缓存查找的中间结果

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

=>

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

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

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

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

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

后者比前者快近10倍

可能的话,使用***版本的JQuery

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

jQuery html性能大坑

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

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

在设置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()方法

原文链接:http://andashu.blog.51cto.com/8673810/1375329

责任编辑:林师授 来源: 51CTO博客
相关推荐

2010-07-06 09:07:09

2018-01-12 14:37:34

Java代码实践

2017-03-01 20:53:56

HBase实践

2016-11-17 09:00:46

HBase优化策略

2019-05-21 09:40:47

Elasticsear高性能 API

2011-08-18 11:05:21

jQuery

2011-08-11 09:45:25

2019-03-14 15:38:19

ReactJavascript前端

2012-12-24 09:55:15

JavaJava WebJava优化

2013-07-31 10:17:44

备份灾备

2020-07-16 08:06:53

网关高性能

2011-09-20 10:41:45

Web

2013-07-31 09:55:51

高性能备份灾备

2014-12-17 09:46:30

AndroidListView最佳实践

2019-03-01 11:03:22

Lustre高性能计算

2013-06-09 15:31:35

jQueryjQuery优化性能优化

2011-08-03 16:51:01

jQuery

2010-04-20 09:14:33

Struts

2014-12-10 10:12:02

Web

2023-09-13 08:00:00

JavaScript循环语句
点赞
收藏

51CTO技术栈公众号