视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jq优化方法
2020-11-27 20:12:24 责编:小采
文档

1.使用链式写法

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会进行缓存,所以进一步加

快了执行速度。

下载本文
显示全文
专题