jQuery知识篇三（代码优化篇）

1、使用最佳选择器

 

     通常比较常用的选择器有以下几个：

 

        1.ID选择器 $("#id")

 

        2.标签选择器 $("td")

 

        3.类选择器 $(".target")

 

        4.属性选择器 $("td[target='target']")

 

        5.伪类选择器 $("td:hidden")

 

    结论

 

        1.原生方法是最快的方法，如果可能，尽量选择用原生

 

        2.性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

 

        3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应，所以很快；类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName)，为了兼顾IE6、7、8的性能，避免使用全局的类选择器；

 

        4.属性和伪类选择器非常慢，如非必要，尽量少使用伪类选择器和属性选择器

 

    最佳实践

 

        1.为模块中操作最频繁的元素和根元素设置id，然后缓存；

 

        2.对没有id的元素检索，尽量采用路径最短的祖先元素id作为默认的搜索范围，并采用纯类选择器或者标签选择器；

 

        3.尽量避免复杂的选择器

 

 

2、父类查询子类 最佳模式：$parent.find('.child') 或者$('.child', $('#parent'))

                        最差模式：$('#parent .child')  或者 $('#parent > .child')

 

 

要在DOM元素中存储数据，使用$.data 要比 选择器.data 要快

       var elem = $("#ajia");

       $.data( elem[0],key,value )     >     elem.data(key,value);

       //这类写法亦可：$.data('#id',key,value);

 

       原因：因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多

 

 

3、使用事件委托

 

    给一个列表中所有元素添加点击事件，传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件：

 

     $("li").click(function(){})

 

    这种方法的在列表数量比较大的时候会有严重的性能问题，应该值得关注。

 

    可以使用JQuery的事件委托机制，能很大程度的降低添加事件监听的消耗和内存的消耗。

 

    A:

    var list=$("li");//length>1    list.click(function(){  })

 

    B:

    $("ul").delegate("li","click",function(){})  //或者1.7版本以后的 on 事件

 

结论

 

    委托的性能优势是非常绝对的；

 

最佳实践

 

    对于需要同时给两个以上的同类型元素添加事件时，用方案B来代替A

 

 

4、大循环采用更高效的遍历方式

 

 JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历，除此之外，还可以采用JS原生的for循环、while等来实现迭代：

 

 var list=ul.find("li");

A:

  var i=list.length; 

  while(i--){  

     e=$(list[i])  

  }

B:

  list.each(function(){  

     e=$(this);  

  });

C:

  $.each(list,function(){     

     e=$(this);  

  });

 

结论

 

    总体上来说A>C>B

 

最佳实践

 

    追求极致性能，用原生方法；

 

    循环数量少的话，建议使用$.each()，比较稳定；