jQuery代码优化之遍历

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

在网站制作、成都网站设计中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设十载了，客户满意度97.8%，欢迎成都创新互联客户联系。

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

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

文章标题：jQuery代码优化之遍历
URL分享：http://www.shufengxianlan.com/qtweb/news33/22033.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容