了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能。本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题。
jQuery对象栈
jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中。而每个jQuery对象都有三个属性:context、selector和prevObject,其中的prevObject属性就指向这个对象栈中的前一个对象,而通过这个属性可以回溯到最初的DOM元素集。
jQuery为我们操作这个内部对象栈提供了两个非常有用的方法:
.end()
.andSelf()
调用第一个方法只是简单地弹出一个对象(结果就是回到前一个jQuery对象)。第二个方法更有意思,调用它会在栈中回溯一个位置,然后把两个位置上的元素集组合起来,并把这个新的、组合之后的元素集推入栈的上方。
利用这个DOM元素栈可以减少重复的查询和遍历的操作,而减少重复操作也正是优化jQuery代码性能的关键所在。
优化示例
下面是一个函数(省略了前后代码),用于实现表格行条纹效果:
代码如下:
function stripe() {
$('#news').find('tr.alt').removeClass('alt');
$('#news tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
代码如下:
function stripe() {
$('#news').
find('tr.alt').removeClass('alt').end()
find('tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
代码如下:
var $news = $('#news');
function stripe() {
$news.find('tr.alt').removeClass('alt');
$news.find('tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论