jQuery代码优化遍历篇
2023-06-13 09:14:31 时间
了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能。本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题。
jQuery对象栈
jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中。而每个jQuery对象都有三个属性:context、selector和prevObject,其中的prevObject属性就指向这个对象栈中的前一个对象,而通过这个属性可以回溯到最初的DOM元素集。
jQuery为我们操作这个内部对象栈提供了两个非常有用的方法:
.end()
.andSelf()
调用第一个方法只是简单地弹出一个对象(结果就是回到前一个jQuery对象)。第二个方法更有意思,调用它会在栈中回溯一个位置,然后把两个位置上的元素集组合起来,并把这个新的、组合之后的元素集推入栈的上方。
利用这个DOM元素栈可以减少重复的查询和遍历的操作,而减少重复操作也正是优化jQuery代码性能的关键所在。
优化示例
下面是一个函数(省略了前后代码),用于实现表格行条纹效果:
复制代码代码如下:
jQuery对象栈
jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中。而每个jQuery对象都有三个属性:context、selector和prevObject,其中的prevObject属性就指向这个对象栈中的前一个对象,而通过这个属性可以回溯到最初的DOM元素集。
jQuery为我们操作这个内部对象栈提供了两个非常有用的方法:
.end()
.andSelf()
调用第一个方法只是简单地弹出一个对象(结果就是回到前一个jQuery对象)。第二个方法更有意思,调用它会在栈中回溯一个位置,然后把两个位置上的元素集组合起来,并把这个新的、组合之后的元素集推入栈的上方。
利用这个DOM元素栈可以减少重复的查询和遍历的操作,而减少重复操作也正是优化jQuery代码性能的关键所在。
优化示例
下面是一个函数(省略了前后代码),用于实现表格行条纹效果:
functionstripe(){
$("#news").find("tr.alt").removeClass("alt");
$("#newstbody").each(function(){
$(this).children(":visible").has("td")
.filter(":group(3)").addClass("alt");
});
}
stripe()函数两次使用了ID选择符#news查找元素:一次是为了从带有alt类的行中删除该类,另一次是为了给新选中的行添加这个类。
优化这个函数的方法有两个,一是连缀。
连缀
连缀优化利用的就是jQuery的内部对象栈和.end()方法。优化后的代码如下:
functionstripe(){
$("#news").
find("tr.alt").removeClass("alt").end()
find("tbody").each(function(){
$(this).children(":visible").has("td")
.filter(":group(3)").addClass("alt");
});
}
第一次调用.find()会把表格行推到栈上,然后的.end()方法则把这些行弹出,从而让下一次调用.find()仍然是在#news表格上执行操作。这样就把两次选择符查找减少为一次。
另一个优化方法是缓存。
缓存
所谓缓存,在这里就是把之前操作的结果保存起来,以便将来重用。优化后的代码如下:
var$news=$("#news");
functionstripe(){
$news.find("tr.alt").removeClass("alt");
$news.find("tbody").each(function(){
$(this).children(":visible").has("td")
.filter(":group(3)").addClass("alt");
});
}
与连缀的方法相比,缓存方式稍嫌冗长,因为额外创建了一个用于保存jQuery对象的变量。但从另一个角度来看,这种方式在代码中可以实现对选中元素的两次操作完全分离,而这也许可以满足我们其他情况下的需求。同样,因为可以把选中的元素保存在stripe()函数之外,也就避免了每次调用函数时重复查询选择符的操作。
结论
利用jQuery的内部对象栈和缓存,可以减少重复的DOM查询及遍历,从而提高脚本执行速度。
因为根据ID在页面中选择元素速度极快,以上两个例子在优化前后不会有明显的性能差异。在实际编码中,应该选择可读性最好、最容易维护的方式。如果真的遇到了性能瓶颈,以上优化技术都可以起到立竿见影的效果。
(注:本文基于《jQuery基础教程(第3版)》相关章节内容编撰而成。)
相关文章
- jQuery+bootstrap实现有省略号的数据分页
- jQuery遍历List对象
- WordPress 技巧:在 Footer 载入 jQuery 代码
- jquery遍历表格,以及遍历radio,使用iCheck设置radio选中详解编程语言
- jquery each循环遍历完再执行的方法详解编程语言
- jQuery表单属性伪类选择器
- jquery遍历input取得input的name
- jQuery温习篇强大的JQuery选择器
- jquery控制listbox中项的移动并排序的实现代码
- 一些实用的jQuery代码片段收集
- 来自国外的30个基于jquery的Web下拉菜单
- jQuery的Ajax的自动完成功能控件简要说明
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- Jquery显示、隐藏元素以及添加删除样式
- jQuery遍历Form示例代码
- jquery遍历数组与筛选数组的方法
- JQuery获取或设置ckeditor的数据(示例代码)
- jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
- jquery鼠标停止移动事件
- jquery遍历select元素(实例讲解)
- Jquery遍历checkbox获取选中项value值的方法
- jQuery之字体大小的设置方法
- jquery数组封装使用方法分享(jquery数组遍历)
- jQuery遍历Table应用示例
- jquery加载图片时以淡入方式显示的方法
- JQuery中的事件及动画用法实例