jq优化

1.使用链式写法

$('div').find('h3').eq(2).html('Hello');
采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使
用缓存的)非链式写法,大约快了25%。

2.事件的委托处理(Event Delegation)

 javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。

 利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在

要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?


$("td").on("click", function(){

$(this).toggleClass("click");

});
回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,
这个事件会"冒泡"到父元素table上面,从而被监听到。
因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。
这就叫事件的"委托处理",也就是子元素"委托"父元素处理这个事件。
$("table").on("click", "td", function(){ $(this).toggleClass("click"); });

 3.用对选择器

(1)最快的选择器:id选择器和元素标签选择器

  遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。

(2)较慢的选择器:class选择器

  $('.className')的性能,取决于不同的浏览器。

  Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都

没有部署这个方法,所以这个选择器在IE中会相当慢。

4.子元素和父元素的关系

$('.child', $parent)

$parent.find('.child')

$parent.children('.child')

$('#parent > .child')

$('#parent .child')

$('.child', $('#parent'))

(1) $('.child', $parent)·

  这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),

这会导致一定的性能损失。它比最快的形式慢了5%-10%。

(2) $parent.find('.child')

  这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName

等等),所以速度较快。

(3) $parent.children('.child')

  这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。

(4) $('#parent > .child')

  jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个

个过滤出父元素#parent,这导致它比最快的形式大约慢70%。

(5) $('#parent .child')

  这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,

大概比最快的形式慢了77%。

(6) $('.child', $('#parent'))

  jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。

  所以,最佳选择是$parent.find('.child')。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加

快了执行速度。

posted @ 2017-11-20 17:43  ALLpick  阅读(281)  评论(0编辑  收藏  举报