【使用最佳选择器】
使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。 通常比较常用的选择器有以下几个:
-
ID选择器 $("#id")
-
标签选择器 $("td")
-
类选择器 $(".target")
-
属性选择器 $("td[target='target']")
-
伪类选择器 $("td:hidden")
根据经验,我们应该知道这5种选择器的性能是依次下降的,我们不妨来做个测试,看看他们的性能到底有多大差异:
<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>
测试结果
方案 | 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();
B:
blank.length && blank.slideUp();
测试结果
方案 | 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")
测试结果
方案 | 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);
});
测试结果
方案 | 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,比较稳定;
【优先使用原生属性】
很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。
$.each(list,function(){
//A
var id=$(this).attr("id");
//B
var id=this.id;
})
测试结果
方案 | 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 |
结论
-
使用原生的API,可以极大的提高性能
最佳实践
-
对于id等常用的属性,用原生的属性,不要通过attr去获取;
【使用事件委托】
经常会遇到给一个列表中所有元素添加点击事件的业务场景,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:
$("li").click(function(){})
这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。JQuery在很早的版本中已经引入了事件委托机制,可以很大程度的降低添加事件监听的消耗和内存的消耗。
对1w条记录的列表进行测试:
var list=$("li");//length>1
list.click(function(){
})
$("ul").delegate("li","click",function(){})
测试结果
方案 | 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 |
结论
-
委托的性能优势是非常绝对的;
最佳实践
-
对于需要同时给两个以上的同类型元素添加事件时,用方案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()方法
本文出自 “安大叔性能测试” 博客,请务必保留此出处http://andashu.blog.51cto.com/8673810/1375329
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流Demo(By Smile.)</title>
<style type="text/css">
/* 标签重定义 */
body {
padding:0;
margin:0;
background: #ddd url(images/bg.jpg) repeat;
}
img {
border:none;
}
a {
text-decoration:none;
color:#444;
}
a:hover {
color:#999;
}
#title {
width: 600px;
margin: 20px auto;
text-align: center;
}
/* 定义关键帧 */
@-webkit-keyframes shade {
from {opacity: 1;}
15% {opacity: 0.4;}
to {opacity: 1;}
}
@-moz-keyframes shade {
from {opacity: 1;}
15% {opacity: 0.4;}
to {opacity: 1;}
}
@-ms-keyframes shade {
from {opacity: 1;}
15% {opacity: 0.4;}
to {opacity: 1;}
}
@-o-keyframes shade {
from {opacity: 1;}
15% {opacity: 0.4;}
to {opacity: 1;}
}
@keyframes shade {
from {opacity: 1;}
15% {opacity: 0.4;}
to {opacity: 1;}
}
/* 瀑布流样式 */
#wrap {
width:auto;
height:auto;
margin:0 auto;
position: relative;
}
#wrap .box {
width:280px;
height:auto;
padding:10px;
border:none;
float: left;
}
#wrap .box .info {
width:280px;
height:auto;
border-radius:8px;
box-shadow: 0 0 11px #666;
background: #fff;
}
#wrap .box .info .pic {
width:260px;
height:auto;
margin: 0 auto;
padding-top: 10px;
}
#wrap .box .info .pic:hover {
-webkit-animation:shade 3s ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img {
width:260px;
border-radius: 3px;
}
#wrap .box .info .title {
width:260px;
height:40px;
margin: 0 auto;
line-height:40px;
text-align:center;
color:#666;
font-size:18px;
font-weight: bold;
overflow:hidden;
}
</style>
<script type="text/javascript" src="Jquery.js"></script>
<script>
window.onload = function(){
//运行瀑布流主函数
PBL('wrap','box');
//模拟数据
var data = [{'src':'1.jpg','title':'This is a title.'},{'src':'2.jpg','title':'This is a title.'},{'src':'3.jpg','title':'This is a title.'},{'src':'4.jpg','title':'This is a title.'},{'src':'5.jpg','title':'This is a title.'},{'src':'6.jpg','title':'This is a title.'},{'src':'7.jpg','title':'This is a title.'},{'src':'8.jpg','title':'This is a title.'},{'src':'9.jpg','title':'This is a title.'},{'src':'10.jpg','title':'This is a title.'}];
//设置滚动加载
window.onscroll = function(){
//校验数据请求
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//创建box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//创建info
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//创建pic
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//创建img
var img = document.createElement('img');
img.src = 'images/'+data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//创建title
var title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//创建a标记
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap','box');
}
}
}
/**
* 瀑布流主函数
* @param wrap [Str] 外层元素的ID
* @param box [Str] 每一个box的类名
*/
function PBL(wrap,box){
// 1.获得外层以及每一个box
var wrap = document.getElementById(wrap);
var boxs = getClass(wrap,box);
// 2.获得屏幕可显示的列数
var boxW = boxs[0].offsetWidth;
var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
wrap.style.width = boxW*colsNum+'px';//为外层赋值宽度
// 3.循环出所有的box并按照瀑布流排列
var everyH = [];//定义一个数组存储每一列的高度
for (var i = 0; i < boxs.length; i++) {
if(i<colsNum){
everyH[i] = boxs[i].offsetHeight;
}else{
var minH = Math.min.apply(null,everyH);//获得最小的列的高度
var minIndex = getIndex(minH,everyH); //获得最小列的索引
getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);
everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
}
}
}
/**
* 获取类元素
* @param warp [Obj] 外层
* @param className [Str] 类名
*/
function getClass(wrap,className){
var obj = wrap.getElementsByTagName('*');
var arr = [];
for(var i=0;i<obj.length;i++){
if(obj[i].className == className){
arr.push(obj[i]);
}
}
return arr;
}
/**
* 获取最小列的索引
* @param minH [Num] 最小高度
* @param everyH [Arr] 所有列高度的数组
*/
function getIndex(minH,everyH){
for(index in everyH){
if (everyH[index] == minH ) return index;
}
}
/**
* 数据请求检验
*/
function getCheck(){
var documentH = document.documentElement.clientHeight;
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH+scrollH>=getLastH() ?true:false;
}
/**
* 获得最后一个box所在列的高度
*/
function getLastH(){
var wrap = document.getElementById('wrap');
var boxs = getClass(wrap,'box');
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* 设置加载样式
* @param box [obj] 设置的Box
* @param top [Num] box的top值
* @param left [Num] box的left值
* @param index [Num] box的第几个
*/
var getStartNum = 0;//设置请求加载的条数的位置
function getStyle(box,top,left,index){
if (getStartNum>=index) return;
$(box).css({
'position':'absolute',
'top':top,
"left":left,
"opacity":"0"
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//更新请求数据的条数位置
}
</script>
</head>
<body>
<section id="title">
<h2>瀑布流效果的学习</h2>By Smile.
</section>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="images/1.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/2.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/3.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/4.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/5.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/6.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/7.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/8.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/9.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/10.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
</div>
</body>
</html>