jQuery代码优化 遍历篇


Posted in Javascript onNovember 01, 2011

了解了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'); 
}); 
}

stripe()函数两次使用了ID选择符#news查找元素:一次是为了从带有alt类的行中删除该类,另一次是为了给新选中的行添加这个类。

优化这个函数的方法有两个,一是连缀。

连缀
连缀优化利用的就是jQuery的内部对象栈和.end()方法。优化后的代码如下:

function stripe() { 
$('#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'); 
function stripe() { 
$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版)》相关章节内容编撰而成。)

Javascript 相关文章推荐
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
Jquery $when done then的用法详解
May 20 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
js实现自定义路由
Feb 04 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 #Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 #Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 #Javascript
加载 Javascript 最佳实践
Oct 30 #Javascript
js判断是否为数组的函数: isArray()
Oct 30 #Javascript
You might like
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js 表格隔行颜色
2009/12/02 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
详解python之简单主机批量管理工具
2017/01/27 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
详解SQL的窗口函数
2022/04/21 Oracle