jquery性能优化

1.选择器的选择

id选择器性能最优，其次是标签选择器，再次是class选择器，最后是属性选择器$("#id")>$("p")>$(".class")>$("[attribute=value]")

2.缓存jquery对象

var $active_light = $("#trafic_light input");//缓存变量$active_light.bind("click",function(){});$active_light.css("border","1px dashed yellow");//添加链式语法简化代码$active_light.bind().css().fadeIn();

3.打算在其他变量中使用jquery对象，缓存到全局对象中去

window.$my={    head:$("head"),    traffic_light:$("#traffic_light"),    traffix_button:$("#trafic_button")};$my.head.append("script");

4.遍历dom元素时候 减少对于dom节点的删除和修改 提升性能

var list =[],$mylist = $("#mylist"),li="";for(var i =0;i < list.length;i++){    li +="<li>"+i+"</li>"}$mylist.html(li);

5.使用for循环或者while循环代替$.each() 性能方面

var array = new Array();for(var i = 0;i <array.length;i++){    array[i]=i;}

6.使用事件代理 来提升事件性能

$('#myTable').on('click','td',function(){    $(this).css('background','red');});

7.自定义插件复用代码

(function($){    $.fn.yourPluginName = function(){        //添加自己的代码        return this;    }})(jQuery);

8 使用join来拼接字符串

var array = new Array();for(var i = 0;i <10;i++){    array[i]=i;}$("#list").html(array.join(''));

9合理利用html的data属性 可以帮助我们插入数据 特别是前后端的数据交换

<div id="d1" data-role="page" data-last-value="43" data-options='{"name":"John"}'></div>$("#d1").data("role");$("#d1").data("lastValue");#("#d1").data("options").name;

10.尽量使用原生的js方法减少函数的调用

比如 var $cr = $("#cr"); $cr.is(":checked");var cr = $("#cr").get(0); cr.checked$(this).css("color","red");this.style.color="red";

11.压缩js代码
提供完整版+压缩版
使用Gzip压缩，去除js代码的注释，空白，并且压缩变量长度