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 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript的==运算详解
Jul 20 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 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
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JavaScript类库D
2010/10/24 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Less 安装及基本用法
2018/05/05 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
对python中return和print的一些理解
2017/08/18 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
毕业生求职自荐书范文
2014/03/27 职场文书
女生节标语
2014/06/26 职场文书
2014年技术员工作总结
2014/11/18 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA