一、jQuery性能优化
1、尽量使用最新版的jQuery类库
jQuery每一个新的版本都会较上一个版本进行bug修复和优化,同时也会包含一些创新,可以使用最新版的jQuery来提高性能。但是不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。
2、使用合适的选择器
2.1、$("#id")
使用id选择器无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById()。当然,如果这个方式不能直接找到你需要的元素,那么可以考虑调用find()方法。
$("#selector").find("div")
使用以上代码可以有效缩小你定位的DOM元素。为了提高性能,建议从最近的ID元素开始往下搜索。
2.2、$("p")、$("div")、$("input")
标签选择器的性能也是不错的,它是性能优化的第二个选择,因为jQuery将直接调用本地方法document.getElementsByTagName()来定位DOM元素。
注意:1、尽量使用ID选择器
2、尽量给选择器指定上下文。
3、缓存对象
在书写jQuery代码中,开发人员经常喜欢使用如下的书写方式:
$("#id input.on").bind("click",function(){……});
$("#id input.on").css("border","1px solid yellow");
$("#id input.on").css("background-color","orange");
$("#id input.on").fadeIn("slow");
以上这种方式,jquery会在创建每一个选择器的过程中,查找DOM,创建多个jquery对象。比较好的书写方式如下:
var $target=$("#id input.on");//缓存变量
$target.bind("click",function(){……});
$target.css("border","1px solid yellow");
$target.css("background-color","orange");
$target.fadeIn("slow");
在本例中,如果使用链式方式将更加简洁,但是这里只是为了说明使用缓存变量的重要性。
4、循环时的DOM操作
使用jquery可以很方便的添加,删除或者修改DOM节点,但是在一些循环,例如for(),while()或者$.each()中处理节点时,需要注意:
<pre name="code" class="javascript">var arry=[……];//假设这里有100个独一无二的字符串
$mylist=$("#mylist"); //选择<ul>元素
var arry_li="";//这个变量将用来存储我们的列表元素
for(var i=0,length=arry.length;i<length;i++) {
arry_li+="<li>"+arry[i]+"</li>";
}
$mylist.append(arry_li);
以上代码中,我们尽可能的减少DOM操作,将整个元素字符串在插入dom之前全部创建好,最后在追加到dom中。
5、数组方式使用jquery对象
使用jquery选择器获取结果是一个jquery对象。然而,jquery类库会让你感觉到你正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。
$.each(array,function(){
array[i]=i;
});
使用for代替each()方法,代码如下:
var array=new Array();
for(var i=0,length=array.length;i<length;i++){
array[i]=i;
}
另外,检查jquery对象的length属性,可以判断该对象是否存在:
var $target=$("#content");
if($target.length){ //拥有元素才返回true
//your code……
}
6、事件代理
每一个javascript事件(例如:click,mouseover等)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如,我们要为一个表格绑定这样一个行为:点击td后,把背景色设置为红色,代码如下:
$("#table td").click(function(){
$(this).css('background','red');
});
假设有100个td元素,使用上述的方式,你绑定了100个事件,这将带来很负面的性能影响。
代替以上这种效率很差的多元素事件监听的方法是,你只需要向他们的父节点绑定一次事件,然后通过event.target获取到点击的当前元素,代码如下:
$("#table").click(function(e){
var $clicked=$(e.target); //e.target捕捉到触发的目标元素
$clicked.css("background","red");
});
在改进方式中,你只为一个元素绑定了一次事件。显然,这种方式的性能要优于之前那种。jquery1.7及以上版本提供了一个新的方法on(),来帮助我们将整个监听封装到一个便利方法中,如:
$("#table").on("click","td",function(){
$(this).css("background","red");
});
8、使用join()来拼接字符串
也许你之前一直使用"+"来拼接长字符串,现在你可以改变了。虽然它可能会有点奇怪,但它确实有助于你优化性能,尤其是长字符串处理的时候。如:
var array=[];
for(var i=0;i<10000;i++){
array[i]="<li>"+i+"</li>";
}
$("#list").html(arry.join(' '));
9、合理利用HTML5的Data属性
html5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jquery的data()方法,有效的利用了html5的属性,来自动得到数据。如:
<div id="d1" data-role="page" data-last="43" data-options='{"name":"John"}'></div>
为了读取数据,你需要使用如下代码:
var $target=$("#d1");
$target.data("role"); //"page"
$target.data("lastValue"); //43;
$target.data("options"); //"John";
10、尽量使用原生的javascript方法
下面的一段代码,用来判断多选框是否被选中:
var $cr=$("#cr"); //jquery对象
$cr.click(function(){
if($cr.is(":checked")){ //jquery方式判断
alert("继续");
}
});
它使用了jQuery提供的is()方法来判断多选框是否选中,但这里可以直接使用原生的javascript方法,看下面代码:
var $cr=$("#cr"); //jquery对象
var cr=$cr.get(0); //DOM对象,获取$cr[0]
$cr.click(function(){
if(cr.checked){ //原生的javascript方式判断
alert("继续");
}
});
毋庸置疑,第二种方式效率高于第一种,因为它不需要拐弯抹角的去调用许多函数。
还有更多类似的操作.如:
$(this).css("color","red");
优化成:
this.style.color="red";
把如下代码:
$("<p></p>")
优化成:
$(document.createElement("p"));
经验告诉我们,方法的选择很重要,有时候你也许根本不需要jquery.
11、压缩javascript
现在的Web项目总数离不开大量的javascript,而js文件的体积越来越大,随之也影响到页面的感知性能。因此,需要对javascript文件进行压缩。一方面使用Gzip;另一方面则是去除javascript文件里的注释、空白,并且压缩局部变量长度等。
压缩javascript的工具有很多。比如JSMin,YUI Compressor,他们都可以用来压缩脚本文件(后者还可以处理css),还有比如Google Closure Compiler和UglifyJS.