jQuery代码优化之遍历

开发 前端
了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能。本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题。

收藏与使用选择符查找页面中的元素相对应,jQuery遍历操作背后的工作机制也很有特色。了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能。本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题。

jQuery对象栈

jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中。而每个jQuery对象都有三个属性:context、selector和prevObject,其中的prevObject属性就指向这个对象栈中的前一个对象,而通过这个属性可以回溯到最初的DOM元素集。

jQuery为我们操作这个内部对象栈提供了两个非常有用的方法:

◆ end()

◆ andSelf()

调用第一个方法只是简单地弹出一个对象(结果就是回到前一个jQuery对象)。第二个方法更有意思,调用它会在栈中回溯一个位置,然后把两个位置上的元素集组合起来,并把这个新的、组合之后的元素集推入栈的上方。

利用这个DOM元素栈可以减少重复的查询和遍历的操作,而减少重复操作也正是优化jQuery代码性能的关键所在。

优化示例

下面是一个函数(省略了前后代码),用于实现表格行条纹效果:

  1. function stripe() {  
  2.     $('#news').find('tr.alt').removeClass('alt');  
  3.     $('#news tbody').each(function() {  
  4.         $(this).children(':visible').has('td')  
  5.         .filter(':group(3)').addClass('alt');  
  6.     });  

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

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

连缀

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

  1. function stripe() {  
  2.     $('#news').  
  3.     find('tr.alt').removeClass('alt').end()  
  4.     find('tbody').each(function() {  
  5.         $(this).children(':visible').has('td')  
  6.         .filter(':group(3)').addClass('alt');  
  7.     });  

第一次调用.find()会把表格行推到栈上,然后的.end()方法则把这些行弹出,从而让下一次调用.find()仍然是在#news表格上执行操作。这样就把两次选择符查找减少为一次。

另一个优化方法是缓存。

缓存

所谓缓存,在这里就是把之前操作的结果保存起来,以便将来重用。优化后的代码如下:

  1. var $news = $('#news');  
  2. function stripe() {  
  3.     $news.find('tr.alt').removeClass('alt');  
  4.     $news.find('tbody').each(function() {  
  5.         $(this).children(':visible').has('td')  
  6.         .filter(':group(3)').addClass('alt');  
  7.     });  

与连缀的方法相比,缓存方式稍嫌冗长,因为额外创建了一个用于保存jQuery对象的变量。但从另一个角度来看,这种方式在代码中可以实现对选中元素的两次操作完全分离,而这也许可以满足我们其他情况下的需求。同样,因为可以把选中的元素保存在stripe()函数之外,也就避免了每次调用函数时重复查询选择符的操作。

结论

利用jQuery的内部对象栈和缓存,可以减少重复的DOM查询及遍历,从而提高脚本执行速度。

因为根据ID在页面中选择元素速度极快,以上两个例子在优化前后不会有明显的性能差异。在实际编码中,应该选择可读性最好、最容易维护的方式。如果真的遇到了性能瓶颈,以上优化技术都可以起到立竿见影的效果。

原文:http://www.ituring.com.cn/article/382

【编辑推荐】

  1. jQuery代码优化之基本事件
  2. jQuery与MooTools库的一些比对
  3. 使用jQuery设计数据表格之实现Ajax功能
  4. 10月10款有趣强大的jQuery插件推荐
  5. 10个新鲜的Ajax相关的jQuery插件
责任编辑:陈贻新 来源: 图灵社区
相关推荐

2011-10-31 13:31:03

jQuery

2012-04-26 13:12:09

jQuery代码优化

2011-01-21 10:01:07

jQueryjavascriptweb

2011-06-14 11:14:10

性能优化代码

2022-12-06 08:29:01

2013-09-16 16:01:23

Android开发代码

2013-06-09 15:31:35

jQueryjQuery优化性能优化

2011-08-03 16:51:01

jQuery

2011-06-22 17:11:18

SEO

2010-07-02 09:00:57

jQuery

2011-06-20 14:44:49

网站优化

2017-09-08 18:29:17

jQuery代码React

2011-06-28 18:04:06

网站优化

2011-06-24 16:44:43

网站优化

2021-07-29 14:20:34

网络优化移动互联网数据存储

2022-08-31 12:15:09

JavaScript代码优化

2009-07-03 10:34:06

JSP bean

2011-06-23 19:13:08

ALT标签

2009-06-30 11:23:02

性能优化

2018-01-09 16:56:32

数据库OracleSQL优化
点赞
收藏

51CTO技术栈公众号