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对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
js中键盘事件实例简析
Jan 10 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
详解参数传递四种形式
Jul 21 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
React服务端渲染原理解析与实践
Mar 04 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的FTP学习(四)
2006/10/09 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
js实现微信分享代码
2020/10/11 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
化工专业求职信
2014/07/01 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python