JQuery高性能最佳实践_H5之家 - 中国HTML5教程资源分享第一站

JQuery高性能最佳实践添加时间： 2015-07-06 19:47:00 '> 2015-07-06 19:47:00 作者：安大叔 '> 安大叔原创 3094 【使用最佳选择器】

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

ID选择器 $("#id")

标签选择器 $("td")

类选择器 $(".target")

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

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

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

测试html片段：

<table cellspacing="1" cellpadding="0"> <tr> <td bgcolor="#aaaaaa" target="target">e</td> </tr> </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

结论

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

性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

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

为了兼顾IE6、7、8的性能，避免使用全局的类选择器；

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

最佳实践

为模块中操作最频繁的元素和根元素设置id，然后缓存；

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

尽量避免复杂的选择器

【避免执行全局查找】 $("div.bizHelp");

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

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

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

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

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

A :

blank.slideUp();

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

结论

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

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

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

var obj=$("#obj");

obj.css("width",200); obj.css("height",200); obj.css("background":"#eee");

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

.css-operation{width:200px;height:200px;background:#eee;} 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

结论

性能排序：C>B>A

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

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

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

【避免使用匿名函数】

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

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;

var i=list.length; while(i--){ e=$(list[i]) }

list.each(function(){ e=$(this); });

$.each(list,function(){ e=$(this); }); 测试结果

测试说明：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%的性能提升，但是不稳定；

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

Chrome、firefox下A方案的性能不稳定；

最佳实践

追求极致性能，用方案A；

循环数量少的话，建议使用方案C，比较稳定；

【优先使用原生属性】