jQuery性能优化
1.使用最新版本的jQuery类库
jQuery每一个新的版本都会较上一版进行Bug修复和一些优化，同事也会包含一些创新，所以建议使用最新版本的jQuery来提高性能。不过你需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。
2.使用合适的选择器
jQuery提供给开发人员非常丰富的手段来使用选择器定位DOM元素，它是开发人员最常使用的功能，但是很少有开发人员会考虑使用不同的选择器来处理性能问题。这里我们将介绍几种常用的选择器，及其它们之间的性能差异。
$("#id")
使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElemenetById()。熟悉JavaScript的人，都了解这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find方法。代码如下：
$("#content").find("div")
使用以上代码可以有效的缩小你的定位的DOM元素，为了提高性能，建议从最近的ID元素开始往下搜索。
$("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选择器定位父元素，然后再使用该选择器，这样对性能优化会有帮助。代码如下：
$("#content").find(":hidden");
$("a.button").filter(":animated");
以上是使用选择器的基本规则，性能自上而下依次下降，如果大家在开发中使用选择器，请遵循以上这个简单的优化性能规则。
注意：
1.尽量使用ID选择器。
2.尽量给选择器指定上下文。
3.缓存对象
在书写jQuery代码中，开发人员经常喜欢如下书写方式：
$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px dashed yellow");
$("#traffic_light input.on").css("background-color","orange");
$("#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 dashed yellow"); $active_light.css("background-color","orange"); $active_light.fadeIn("slow");
在本例中，如果使用链式方式将更加简洁，但是这里只为说明使用缓存变量的重要性，这和Java开发中不要随意的创建对象一样，可以帮助你有效的提高代码运行性能。
上面代码可以使用jQuery的链式操作再加以完善。如下所示。
var $active_light = $("#tracffic_light input.on"); $active_light.bind("click",function(){...}) .css({ "border":"1px dashed yellow", "background-color":"orange" }) .fadeIn("slow");
如果你打算在其他函数中使用jQuery对象，那么你可以把它们缓存到全局环境中。如下代码所示：
//在全局范围定义一个对象（例如：window对象）
window.$my = { head:$("head"), traffic_light:$("#traffic_light"), traffic_button:$("#traffic_button") }; function do_something(){
//现在你可以引用存储的结果并操作它们
var script = document.createElement("script");
$my.head.append(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","greed");
}
//你也可以在其他函数中使用它
记住，永远不要让相同的选择器在你的代码里出现很多次。
4.循环时的DOM操作
使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如for(),while()或者$.each()中处理节点时，下面有个实例值得大家注意，代码如下：
var top_100_list = [...] //假设这里是100个独一无二的字符串 $mylist = $("#mylist");//jQuery选择到<ul>元素 for(var i =0; l = top_100_list.length; i<l; i++){ $mylist.append("<li>"+top_100_list[i]+"</li>"); }
以上代码中，我们将每一个新添加的标签元素都作为一个节点添加容器ID中，实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作，这里应该将整个元素字符串在插入DOM之前全部创建好，修改代码如下：
var top_100_list = [...],$mylist = $("#mylist") top_100_li = " "; //这个变量将用来存储我们的列表元素 for(var i = 0 ; l= top_100_list.length; i<l; i++){ top_100_li += "<li>"+top_100_list+"</li>" } $mylist.html(top_100_li);
记得以前有一个同事也写过类似的代码，代码如下： for(i=0;i<100;i++){ var $myList = $('#myList'); $myList.append('This is list item' + i); } 看出问题所在了吧，居然把#myList循环获取了100次！
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对象是否存在的方式，下面一段代码通过length属性检查页面中是否含有id为“content”元素：
var $content = $('#content'); if($content){// 总是true //Do something } if($content.length){ //拥有元素才返回true //Do something }
6.事件代理
每一个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.target捕捉到触发的目标元素
$clicked.css('background','red');
});
在改进方式中，你只为一个元素绑定了1个事件。显然，这种方式的性能要优于之前那种。同时，在jQuery1.7中提供了一个新的方式on(),来帮助你将整个事件监听封装到一个便利方法中，如下所示：
$('#myTable').on('click','td',function(){
$(this).css('background','red');
});
7.将你的代码转化成jQuery插件
如果你每次都需要花上一定的时间去开发类似的jQuery代码，那么你可以考虑将代码变成插件。
它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码。创建一个插件代码如下：
(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery);
8.使用join()来拼接字符串
也许你之前一直使用“+”来拼接长字符串，现在你可以改改了。虽然它可能会有点奇怪，但它却是有助于优化性能，尤其是长字符串处理的时候。
首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，代码如下：
var array = []; for(var i=0;i<=10000;i++){ array[i] = '<li>'+i+'</li>'; } $('#list').html(array.join(''));
9.合理利用HTML5的Data属性
HTML5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data()方法，有效的利用HTML5的属性，来自动得到数据。下面是个例子：
<div id="dl" data-role="page" data-last-value = "43" data-options = '{"name":"John"}'></div>
为了读取数据，你需要使用如下代码：
$("#dl").data("role"); //"page"
$("#dl").data("lastValue"); //43
$("#dl").data("options").name; //"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。
浙公网安备 33010602011771号
