jquery性能优化

一、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.