您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

jq优化方法

2025/3/4 3:03:42发布51次查看
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会进行缓存,所以进一步加
快了执行速度。
以上就是jq优化方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product