jQuery性能优化

大家都知道jQuery非常流行，是前端开发中重要的类库之一，也成为构建丰富web前端的利器。但是作为一个javascript类库，很多人并不是很清楚如何正确的使用jQuery来达到最佳的性能，特别是复杂的动画和web应用，它可能成为性能瓶顶。

我将在本篇文章中介绍我们在使用jQuery时，应该注意的一些性能问题，希望对大家开发高性能的web应用有所帮助。

使用最新版本的jQuery类库

JQuery每一个新的版本都会对上一个版本进行BUG修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery的提高性能。不过你需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。

使用合适的选择器

JQuery提供非常丰富的选择器DOM元素，选择器是开发人员最常使用的功能，但是很少开发人员会考虑使用不同选择器来处理性能问题。下面介绍几种常用选择器，以及他们之间的性能差异。

（1）$(“#id”)

使用id来定位DOM元素是最佳的提高性能的方式，因为jQuery底层将直接调用document.getElementById()。熟悉JavaScript的人都知道这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法。代码如下：

$(“#content”).find(“div”)

使用以上方法可以有效的缩小你定位的DOM元素。为了提高性能，建议从最近的ID元素开始往下搜索。

（2）$(“p”) , $(“div”) , $(“input”)

标签选择器的性能也是不错的，它是性能优化的第二种选择，因为jQuery将直接调用本地方法document.getElementsByTagName()来找到DOM元素。

（3）$(“.class”)

这种方法有可以有选择性的使用。对于IE9以上的浏览器，它支持本地方法document.getElementByClassName(),而对于IE8或者更早的版本，只能使用DOM搜索方式来实现，这会对性能产生较大影响。

（4）$(“[attribute=value]”)

对于属性选择器，本地JavaScript方法中并没有直接的实现，大多都是使用DOM搜索方式来达到效果，很多新版本浏览器支持querySelectorAll()方法，但是不通浏览器间的性能还是有区别。总体来说，使用这种方式来定位DOM元素，性能并不是非常理想。所以为了获得更好的性能优化效果 ，建议在开发中尽量避免这种对性能有害的方式。

（5）$(“:hidden”)

和属性选择器类似，伪选择器也没有直接在本地JavaScript方法中实现，jQuery需要搜索每一个元素来定位这个选择器，这将产生比较大的性能问题看，所以建议大家尽量不要使用。如果坚持使用，先用ID选择器定位父元素，然后再使用，这样对性能优化会有帮助。代码如下：

$(“content”).find(“:hidden”);

注意：尽量使用ID选择器，尽量给选择器指定上下文。

三、缓存对象

在书写jQuery代码中，开发人员最常用如下书写方式：

$(“#ydm input.on”).bind(“click”,function(){ . . .});

$(“#ydm input.on”).css(“border”,”1px dashed yellow”);

$(“#ydm input.on”).css(“background-color”,”orange”);

$(“#ydm input.on”).fadeIn(“slow”);

这样写导致的结果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：

var $a=$(“#ydm input.on”); //缓存变量

$a.bind(“click”,function(){ . . .});

$a.css(“border”,”1px dashed yellow”);

$a.css(“background-color”,”orange”);

$a.fadeIn(“slow”);

在这个例子中，如果使用链式操作将更加简洁，这里只是为了说明缓存变量的重要性，这和Java开发中不要随意创建对象一样，可以有效的提高代码运行性能。

链式操作改写如下：

var $a=$(“#ydm input.on”); //缓存变量

$a.bind(“click”,function(){ . . .});

.css({“border”:”1px dashed yellow”,

“background-color”:”orange”

});

.fadeIn(“slow”);

如果打算在其他函数中使用jQuery对象，可以把它们缓存在全局环境中。代码示例如下：

//在全局范围内定义一个对象（例如：window对象）

Window.$my={

head:$(“head”),

a:$(“#a”),

b:$(“#b”)

};

function do_something(){

//现在可以引用存储的结果并操作它们

var script=document.creatElement(“script”);

$my.head.append(script);

//当在函数内部操作时，可以继续将查询存入全局对象中去

$my.l{i}_{r}esults=$(“#some_ul li”);

$my.t{d}_{r}esults=$(“#some_table td”);

//将全局函数作为一个普通的jQuery去使用

$my.td_resules.css(“. . .”);

$my.a.css(“. . .”);

}

//也可以在其他函数中使用它

注意：不要让相同的选择器在代码中出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加、删除或者修改DOM节点，但是在一些循环，例如for(),while()或者$each()中处理节点时，必须注意，代码如下：

var ydm_100_list=[. . .] //假设有一百分字符串

$yd{m}_{l}ist=$(ydm_list”) //选择到

• 元素

for(var i=0;<ydm_100_list.length;i++){

$ydm_list.append(“<li>”+ydm_100_list[li]+”</li>”);

}

以上代码中，将每一个新添加的标签元素都作为一个节点添加到容器ID中，实际上消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作，将整个字符串在插入DOM之前全部创建好，再插入，代码如下：

var ydm_100_list=[. . .] //假设有一百分字符串

$yd{m}_{l}ist=$(ydm_list”) //选择到

• 元素

for(var i=0;<ydm_100_list.length;i++){

ydm_100_list+=”

• ”+ydm_100_list[li]+”
• ”;

  }

  $ydm_list.html(ydn_100_list);

  五、数组方式使用jQuery对象

  使用jQuery选择器获取结果是一个jQuery对象。然而，jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单的for或者while循环来处理，而不是$.each(),这样能使你的代码更快。

  $.each(array.function(i){

  aray[i]=i;

  });

  使用for代替each（）方法，代码如下：

  var array=new Array();

  for(var i=0;i<array.length;i++){

  array[i]=I;

  }

  六、事件代理

  每一个JavaScript事件（例如:click,mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时，事件代理会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景颜色设置为红色，代码如下：

  $(“#mytable td”).click(function(){

  $(this).css(‘background’,’red’);

  });

  假设有100个td元素，在使用以上方式的时候，需要绑定100个事件，这将带来很负面的性能影响。

  代替这种效率很差的多元素事件监听的方法就是，只需要向他们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素，带入如下：

  $(“#mytable”).click(function(e){

  var $clicked=$(e.target); //e.targeta 捕捉到触发元素

  $clicked.css(‘background’,’red’);

  })

  在改进的方式中，只为一个元素绑定了一个事件，性能得到很大的提升，在jQuery1.7之后的版本中提供了一个新的方式on(),可方便的将整个事件监听封装到一个便利的方法中，代码如下：

  $(“#mytable”).on(‘click’,’td’,function(){

  $(this).css(‘background’,’red’);

  });

  七、将代码转化成jQuery插件

  如果每次都需要花费一定去开发类似的代码，可以考虑封装成插件，能够使代码具有更好的重用性，并且能够有效的组织代码。创建一个插件代码如下：

  (function($){

  $fn.yourPlugName=function(){

  //your code goes here

  Return this;

  };

  })(jQuery)；

  八、使用join()来拼接字符串

  使用join()拼接长字符串，而不要使用”+”来拼接字符串，有助于性能优化，特别是长字符串处理的时候。

  首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，代码如下：

  var array=[];

  for(var i=0;i<=10000;i++){

  array[i]=’

• ’+i+’
• ’;

  }

  $(‘#list’).html(array.join(‘ ’));

  九、合理利用html5中的Data属性

  Html5的data属性可以帮助我们插入数据，特别是前后端的数据交换，jQuery的data()方法，有效的利用html5的属性，来自动得到数据，代码如下：

  读取数据，需要用如下代码：

  $(“#ydm”).date(“role”); //page

  $(“#ydm”).date(“lastvalue”); //43

  $(“#ydm”).data(“options”.name) //”john”

  以上，是对jQuery性能优化的一些介绍，希望能研究出更多的jQuery开发性能优化的方法，开发出高性能的web引用。