标签：
1、使用最新版本的jQuery类库
2、使用合适的选择器（以下是使用选择器的基本规则，性能自上而下依次下降）
1）$("#id")
使用id来定位DOM元素无疑是最佳提高性能的方式，因为jquery底层将直接调用本地方法document.getElementById()。
如果这个方式不能直接找到你需要的元素，那么可以考虑调用find()方法。
$("#content").find("div")
建议从最近的ID元素开始往下搜索。
2）$("p"),$("div"),$("input")
jquery将直接调用本地方法document.getElementByTagName()来定位DOM元素。
3）$(".class")
对于比较新的浏览器例如IE9，它支持本地方法document.getElementByClassName()。而对于老的浏览器，只能靠DOM搜索方式来实现，无疑对性能产生较大的影响。
4）$("[attribute=value]")
利用属性来定位DOM元素，本地javascript方法中并没有直接地实现，大多都是使用DOM搜索方式达到效果。性能不是不是非常理想。建议开发中尽量避免。
5)$(":hidden")
同上，没有直接在本地javascript方法中实现。并且jquery需要搜索每一个元素来定位这个选择器。建议不要用。如果坚持使用这种方式，请先使用ID选择器定位父元素，然后再使用该选择器。如：
$("#content").find(":hidden");
$("a.button").filter(":animated");
注意：①尽量使用ID选择器。
②尽量给选择器指定上下文。
3、缓存对象
$(function () { // $("#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(){...}) // .css({ // "border":"1px dashed yellow", // "background-color":"orange" // }) // .fadeIn("slow"); }); // 如果打算在其他函数中使用jquery对象，那么可以缓存到全局环境中。 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","green"); // 你也可以在其他函数中使用它们 }
记住，永远不要让相同的选择器在你的代码里出现多次。
4、循环时的DOM操作
使用jquery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如for(),while(),或者$.each()中处理节点时，注意：
$(function () { // var top_100_list= []; //假设这里是100个独一无二的字符串 // var $myList=$("#mylist"); //jquery选择到<ul>元素 // for(var i= 0;i<top_100_list.length;i++){ // $myList.append("<li>"+top_100_list[i]+"</li>"); // } // 更好的方式，尽量减少DOM操作，以下将整个元素字符串在插入DOM之前全部创建好 var top_100_list= []; var $myList=$("#mylist"); var top_100_li=""; for(var i=0;i<top_100_list.length;i++){ top_100_li+="<li>"+top_100_list[i]+"</li>"; } $myList.html(top_100_li); // 切莫 // for(var i=0;i<100;i++){ // var $myList=$("#mylist"); // $myList.append("This is list item"+i); // } });
5、数组方式使用jquery对象
在性能方面，建议使用简单for或者while循环来处理，而不是$.each()
$(function () { var array=new Array(); // array=[]; 略... // 使用each方法 $.each(array,function(i){ array[i]=i; }); // 使用for代替each()方法 for(var i=0;i<array.length; i++){ array[i]=i; } });
此外，检测长度也是一个检查jquery对象是否存在的方式。
$(function () { var $content=$("#content"); if($content){ //总是true // Do something } if($content.length){ //拥有元素才返回true // Do something } });
6、事件代理
$(function () { // $("#myTable td").click(function(){ // $(this).css("background","red"); // }); // 以上，假设有100个td元素，在使用的时候绑定了100个事件，这将带来很负面的性能影响 // 代替这种多元素事件监听的方法就是，只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素 // $("#myTable").click(function(e){ // var $clicked=$(e.target); // $clicked.css("background","red"); // }); // 同时，在jquery1.7中提供了一个新的方式on()，将整个事件监听封装到一个便利的方法中。 $("#myTable").on("click","td",function(){ $(this).css("background","red"); }); });
7、将你的代码转换成jquery插件
;(function($){ $.fn.youPluginName=function(){ // You code goes here return this; } })(jQuery);
8、使用join()来拼接字符串
也许之前一直用“+”来拼接长字符串，但现在可以使用join()，它确实有助于优化性能，尤其在长字符串处理的时候
$(function () { // 首先创建一个数组，然后循环，最后使用join()把数组转化为字符串 var array = []; for (var i = 0; i <= 10000; i++) { array[i] = "<li>" + i + "</li>"; } $("#list").html(array.join(‘‘)); });
运行效果则添加了10001个li。
9、合理利用HTML5的Data属性
10、尽量使用原生javascript方法
$(function () { // 用来判断多选框是否被选中 // $cr=$("#cr"); // $cr.click(function(){ // if($cr.is(":checked")){ // alert("感谢您的支持！你可以继续操作！"); // } // }); // 这里可以使用原生的javascript var $cr=$("#cr"); var cr=$cr.get(0); $cr.click(function(){ if(cr.checked){ alert("感谢您的支持！你可以继续操作！"); } }); });
同样，类似
$(this).css("color","red"); 优化成 this.style.color="red";
$("<p></p>"); 优化成 $(document.createElement("p"));
11、压缩javascript
标签：
原文地址：http://www.cnblogs.com/zhaojieln/p/4272565.html
