提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery提升性能最佳实践小结

jQuery性能 提升 实践 最佳 小结
2023-06-13 09:14:25 时间

将jquery对象缓存起来在
for循环中，不要每次都要访问数组的length属性，我们应该先将对象缓存进一个变量然后再操作，如下所示：

复制代码代码如下:

varmyLength=myArray.length;
for(vari=0;i<myLength;i++){
//要做的事
}

在循环外使用append

进行DOM操作是有代价的，如果需要往DOM中添加大量元素，你应该一次批量完成，而不是一次一个。
复制代码代码如下:

//别这样
$.each(reallyLongArray,function(count,item){
varnewLI="<li>"+item+"</li>";
$("#ballers").append(newLI);
});
//较好的做法
varfrag=document.createDocumentFragment();
$.each(reallyLongArray,function(count,item){
varnewLI="<li>"+item+"</li>";
frag.appendChild(newLI[0]);
});
$("#ballers")[0].appendChild(frag);不要在each()里用$("#id")的选择器，会有多次遍历查找dom元素，效率极低用document.createDocumentFragment()来减少页面的DOM结构改变的次数、刷新的次数

//或者这样
varmyHtml="";
$.each(myArray,function(i,item){
html+="<li>"+item+"</li>";
});
$("#ballers").html(myHtml);

保持简洁风格
复制代码代码如下:
//不理想
if($ventfade.data("currently")!="showing"){
$ventfade.stop();
}
if($venthover.data("currently")!="showing"){
$venthover.stop();
}
if($spans.data("currently")!="showing"){
$spans.stop();
}
//较好的
varelems=[$ventfade,$venthover,$spans];
$.each(elems,function(k,v){
if(v.data("currently")!="showing"){
v.stop();
}
})

慎用匿名函数
匿名函数的约束到处都是一种痛苦。他们难以调试，维护，测试或重用。相反，我们可以使用对象封装，将那些处理和回调函数组织并通过命名管理起来。
复制代码代码如下:
//不要这样
$(document).ready(function(){...
$("#magic").click(function(e){
$("#yayeffects").slideUp(function(){...
});
});
$("#happiness").load(url+"#unicorns",function(){...
})
});

//较好的
varPI={
onReady:function(){...
$("#magic").click(PI.candyMtn);
$("#happiness").load(url+"#unicorns",PI.unicornCb);
},
candyMtn:function(e){
$("#yayeffects").slideUp(PI.slideCb);
},
slideCb:function(){...
},
unicornCb:function(){...
}
}
$(document).ready(PI.onReady);

优化选择器
节点选择和DOM操作,根据给定的ID匹配一个元素总是使用#id去寻找element
复制代码代码如下:
//非常快
$("#containerdiv.robotarm");
//超级快
$("#container").find("div.robotarm");使用$.fn.find方法更快一些，因为第一个选择器是无须经过选择器引擎处理，在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法，这是非常快，因为它是原产于浏览器。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。

具体指定选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。
复制代码代码如下:
//未优化
$("div.data.gonzalez");
//优化后
$(".datatd.gonzalez");如果可以，尽量在选择器靠右侧的部分使用tag.class，而左侧只有tag或者只有.class。

避免过度的具体
复制代码代码如下:
$(".datatable.attendeestd.gonzalez");
//不写中间的会更好
$(".datatd.gonzalez");清爽的DOM结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了。


避免使用无定向通配符选择器
复制代码代码如下:
$(".buttons>*");//极慢
$(".buttons").children();//快很多
$(".gender:radio");//无定向搜索
$(".gender*:radio");//同上
$(".genderinput:radio");//这样好很多

使用事件委派

事件委派允许你为一个容器元素（例如，一个无序列表）绑定一个事件处理程序，而不需给容器内每个元素（例如，列表项）都去绑定。jQuery提供$.fn.live和$.fn.delegate。如果可能的话，你应该使用$.fn.delegate而不是$.fn.live，因为它省去了不必要的选择需要，其明确的情况下（对$.fn.live的文档的上下文），减少了大约80%的开销。除了有性能提升的好处，事件委派也使你在往容器里添加新元素时无需重新绑定事件，因为已经有了。

通过事件委派一次绑定多种事件，以减少事件冗余
复制代码代码如下:
//不好的(如果列表里面元素很多)
$("li.trigger").click(handlerFn);

//较好的:eventdelegationwith$.fn.live
$("li.trigger").live("click",handlerFn);

//最优的:$.fn.delegate
$("#myList").delegate("li.trigger","click",handlerFn);

移除元素
DOM操作是慢的，你应该尽量避免去操作它。jQuery在1.4版引入了
$.fn.detach从DOM中去掉所有匹配的元素。
复制代码代码如下:
var$table=$("#myTable");
var$parent=table.parent();
$table.detach();
//...添加大量的行到表格中
$parent.append(table);

.detach()和.remove()一样,除了.detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。


当大量元素修改CSS，应该使用样式表

如果你在用$.fn.css给多于20个元素修改CSS，考虑一下添加一个style标签，这样可以速度可以提升60%。
复制代码代码如下:
//多于20个明显慢
$("a.swedberg").css("color","#asd123");
$("<styletype="text/css">a.swedberg{color:#asd123}</style>").appendTo("head");

使用$.data而不是$.fn.data将$.data应用于DOM元素比直接调用jQuery选择结果的$.fn.data要快上10倍.虽然，这要先确定你是理解DOM元素与jQuery选择结果之间的区别的。
复制代码代码如下:
//常用
$(elem).data(key,value);
//快十倍
$.data(elem,key,value);


别费时间在空白的选择结果上了

jQuery将不会告诉你，如果你想运行的代码在一个空选择上，它会继续运行，好像没有什么错。影响性能。
复制代码代码如下:
//太遭了，执行了三个方法后才意识到里面是空的
$("#nosuchthing").slideUp();

//较好
var$mySelection=$("#nosuchthing");
if($mySelection.length){
mySelection.slideUp();
}

//最佳:addadoOnceplugin
jQuery.fn.doOnce=function(func){
this.length&&func.apply(this);
returnthis;
}
$("li.cartitems").doOnce(function(){
//makeitajax!\o/
});这层保护是适用于jQueryUIwidget，因为即使操作的元素为空其开销也不少。



定义变量
变量可以定义一个声明而不是几个
复制代码代码如下:
//老套写法
vartest=1;
vartest2=function(){...
};
vartest3=test2(test);

//新
vartest=1,
test2=function(){...
},
test3=test2(test);在自动执行的函数，变量的定义可以完全省掉。(function(foo,bar){...
})(1,2);


条件判断
复制代码代码如下:
//旧方法
if(type=="foo"||type=="bar"){...
}

//好方法
if(/^(foo|bar)$/.test(type)){...
}

//查找对象
if(({
foo:1,
bar:1
})[type]){...
}

作者：曾祥展
出处：学无止境（http://www.cnblogs.com/zengxiangzhan/）

相关文章