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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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 学习提高路线分享
2011/10/23 PHP
PHP 图片水印类代码
2012/08/27 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php数组分页实现方法
2016/04/30 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JS 时间显示效果代码
2009/08/23 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
详解a++和++a的区别
2017/08/30 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
幼儿园教师求职信
2015/03/20 职场文书
高三化学教学反思
2016/02/22 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
Django框架中模型的用法
2022/06/10 Python