标签：
一、jQuery性能优化
（1）使用最新版本的jQuery类库
jQuery每一个新的版本都会较上一版进行Bug修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery来提高性能。不过需要注意的是，在更换版本后，要记得测试你的代码，毕竟有时候不是完全向后兼容。
（2）使用合适的选择器
①$(“#id”)
使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById()。如果这个方式不能直接找到你需要的元素，可以考虑使用find()方法，代码如下：
$(“#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
总结注意：1、尽量使用ID选择器
2、尽量给选择器指定上下文
（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。
标签：
原文地址：http://www.cnblogs.com/dodomonster/p/5277782.html
