1、jQuery性能优化javascript
(1)使用最新版本的jQuery类库css
jQuery每个新的版本都会较上一版进行Bug修复和一些优化,同时也会包含一些创新,因此建议使用最新版本的jQuery来提升性能。不过须要注意的是,在更换版本后,要记得测试你的代码,毕竟有时候不是彻底向后兼容。html
(2)使用合适的选择器html5
①$(“#id”)java
使用id来定位DOM元素无疑是最佳提升性能的方式,由于jQuery底层将直接调用本地方法document.getElementById()。若是这个方式不能直接找到你须要的元素,能够考虑使用find()方法,代码以下:jquery
$(“#id”).find(“element”);编程
②$(“p”),$(“div”),$(“input”)后端
标签选择器的性能也是不错的,它是性能优化的第二选择,由于jQuery将直接调用本地方法document.getElementByTagName()来定位DOM元素。数组
③$(“.class”)浏览器
类选择器对于比较欣的浏览器如IE9,它支持本地方法document.getElementByClassName(),而对于老的浏览器,如IE8或者更早版本,只能靠使用DOM搜索方式来实现,这无疑对性能产生较大的影响。因此建议有选择性地使用它。
④$(“[attribute=value]”)
对于利用属性来定位DOM元素,本地javascript方法中并无直接地实现,大多都是使用DOM搜索方式来达到效果,不少现代浏览器都支持querySelectorAll()方法,可是不一样浏览器间的性能仍是有区别,整体来讲,使用这种方式来定位DOM元素,性能并非很是理想。因此为了得到更好的优化效果,建议开发中尽可能避免使用这种对性能有害的方式
⑤$(“:hidden”)
和上面利用属性来定位DOM的方式相似,这种伪选择器也一样没有直接在本地javascript方法中实现,而且jQuery须要搜索每个元素来定位这个选择器,这将对应用带来比较大的性能问题,因此建议尽可能不要使用。若是坚持要使用这种方式,请先使用ID选择器定位父元素,而后再使用该选择器,这样对性能会有帮助,如:
$(“#comment”).find(“:hidden”)
$(“#username”).find(“checkbox”)
以上是使用选择器的基本规则,性能自上而下依次降低。另外可使用jsPerf来直观查看性能区别,地址:http://jsperf.com/id-vs-class-vs-tag-selectors/2
总结注意:一、尽可能使用ID选择器
二、尽可能给选择器指定上下文
(3)缓存对象
在开发代码中,可能会常常这么写:
$(“#traffic_light input.on”).bind(“click”,function(){…});
$(“#traffic_light input.on”).css(“border”,”1px solid red”);
$(“#traffic_light input.on”).css(“background-color”,”red”);
$(“#traffic_light input.on”).fadeIn(“slow”);
编程中的跳跃思惟致使你有可能这样书写代码,这无可厚非,可是这样致使的结果是:jQuery会在建立每个选择器的过程当中,查找DOM,建立多个jQuery对象。比较好的书写方式以下:
var $active_light=$(“#traffic_light input.on”);
$active_light.bind(“click”,function(){…});
$active_light.css(“border”,”1px solid red”);
$active_light.css(“background-color”,”red”);
$active_light.fadeIn(“slow”);
然而,在本例中使用链式方式将更加简洁,可是这里职位说明使用缓存变量的重要性,这和java开发中不要随意的建立对象同样,能够帮助有效地提升代码运行性能。
使用jQuery链式操做再加以改善后:
var $active_light=$(“#traffic_light input.on”);
$active_light.bind(“click”,function(){…}).css({“border”:”1px solid red,"background-color”:”red”}).fadeIn(“slow”);
若是想在其余函数中使用jQuery对象,可把它们缓存到全局环境中:
$(function() {
//在全局范围定义一个对象
window.$my = {
head: $("head"),
traffic_light: $("#traffic_light"),
traffic_button: $("#traffic_button")
};function do_something() {
//如今能够引用存储的结果并操做它们
var script = document.createElement("script");
$my.head.apped(script);
//当在函数内部操做时,能够继续将查询存入全局对象中
$my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
//将全局函数做为一个普通的jquery对象去使用
$my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "yellow");
}
//也能够在其余函数中使用
});
(4)循环时的DOM操做
咱们从一个实例开始讲起:
var top_100_list=[...]//假设这里是100个独一无二的字符串
$mylist=$("#mylist")
for(var i=0;i<top_100_list.length;i++){
$mylist.append("<li>"+top_100_list[i]+"</li>");
}
以上代码中,咱们将每个新添加的标签元素都做为一个节点添加到容器ID中,实际上jQuery操做消耗的性能也不低,因此更好的方式是尽量地减小DOM操做,这里应该将整个元素字符串在插入DOM以前所有建立好,修改代码以下:
var top_100_list=[...]//假设这里是100个独一无二的字符串
$mylist=$("#mylist")
for(var i=0;i<top_100_list.length;i++){
top_100_list[i]+=li>"+top_100_list[i]+"</li>";
}$mylist.html(top_100_list[i]);
更有甚者:
for(i=0;i<100;i++){
var $mylist=$(“#mylist”); //竟然把$mylist循环获取了100次
$mylist.append(“This is item is”+i)
}
(5)数组方式使用jQuery对象
使用jQuery选择器获取结果是一个jQuery对象,然而,jQuery类库会让你感受你正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使代码更快。
$.each(array,function(i) {
array[i]=i;
});
用for循环来代替$.each()
var array=new Array();
for(var i=0;i<array.length;i++){
array[i]=i;
}
另外注意检查长度也是一个检查jQuery对象是否存在的方式:
var $comment=$("#comment");
if($comment){//老是true
//do somethis
}
if($comment.length){//拥有元素才返回true
//do something
}
(6)事件代理
每个javascript事件(例如:click,mouseover等)都会冒泡到父级节点。当咱们须要给多个元素调用同个函数时这点颇有用。
好比,要为一个table绑定这样一个行为:点击td后,把背景色设置为红色,代码以下:
$("#mytable td").click(function(){
$(this).css("background-color","red");
})
那么假设有100个td元素,在使用以上方式的时候,你绑定了100个事件,这将带来很负面的性能影响。代替这种效率不好的多元素事件监听的方法就是:只需向它们的父节点绑定一次事件,而后经过event.target获取当前点击的元素,代码以下:
$("#mytable").click(function(e){
var $clickele=$(e.target); //e.target捕捉到触发的目标元素
$clickele.css("background-color","red");
});
在jQuery1.7中新增on(),来帮助你将整个时间监听封装到一个便利方法中,以下:
$("#mytable").on(‘click’,’td’,function(){
$clickele.css("background-color","red");
});
(7)将代码转化成jQuery插件
若是每次都须要花上必定的时间去开发相似的jQuery代码,那么能够考虑将代码变成插件。这样可以使代码有更好的重用性,而且可以有效的帮助你组织代码。建立jQuery插件教程:
(8)使用join()来拼接字符串
也许你以前一直使用"+”来拼接字符串,如今你能够改改了。虽然它可能会有点奇怪,但它确实有助于优化性能,尤为是长字符串处理的时候
例如:
var array=[];
for(var i=0;i<array.length;i++){
array[i]=i;
}
$("#list").html(array.join(''));
(9)合理利用HTML5的Data属性
html5中的data属性能够帮助咱们插入数据,特别是先后端的数据交换。jQuery的data()方法,有效地利用哦个了html5的属性,来自动获得数据。例如:
html代码:
<div id=”data1” data-role=”page” data-last-value=”33” data-options=’{“name”:”Jhon”}’></div>
jQuery代码:
$(“#data1”).data(“role”); //page
$(“#data1”).data(“lastvalue”) //33
$(“$data1”).data(“options”) //Jhon
(10)尽可能使用原生的js
下面一段代码用来判断多选框是否被选中:
jQuery代码:
var $cs=$("#cs"); //jQuery对象
$cs.click(function() {
if($cr.is(":checked")){ //jQuery判断方式
alert("感谢您的支持!");
}
});
javascript代码:
var $cr=$("#cr"); //jQuery对象
var cr=$cr.get(0); ///DOM对象
$cs.click(function() {
if(cr.checked){ //原生javascript方式判断
alert("感谢您的支持!");
}
});
毋庸置疑,第二种方式效率高于第一种方式,由于它不须要拐弯抹角地去调用不少函数。经验告诉咱们,方法的选择很重要,有时候你也许根本不须要jQuery。
(11)压缩javascript代码
如今的Web项目老是离不开大量的javascript,而JS文件的体积愈来愈大,随之也影响到页面的感知性能。所以,须要对javascript文件进行压缩,一方面是使用Gzip;另外一方面是去除javascript文件里的注释、空白,而且压缩局部变量长度等。
js压缩工具不少,可使用老牌的JSMin,YUI Compressor,它们均可以用来压缩js,后者还能够用来处理CSS,也可使用新工具,好比Google Closure Compiler和UglifyJS。