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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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文件上传类
2015/10/29 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Fabric 应用案例
2016/08/28 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python中str内置函数用法总结
2020/12/27 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
临床医学专业学生的自我评价分享
2013/11/21 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
幼儿园标语大全
2014/06/19 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
保护地球的宣传语
2015/07/13 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
MySQL大小写敏感的注意事项
2021/05/24 MySQL