jQuery代码优化 遍历篇

了解了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版）》相关章节内容编撰而成。）

赞 (0)

相关推荐

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • jQuery代码优化 事件委托篇

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一

  • JQuery教学之性能优化

    jQuery是一款非常优秀的javascript框架,当我们使用到jQuery后就再也不想回到javascript时冗长的代码,那么jQuery的优化就摆在了我们的面前.那么我们优化JQuery应该从那些方面入手呢? 1.使用最新版本的jQuery 新版本相对于旧版本会做性能上的改进,还有就是添加新功能. 2.选择器的使用 我们通常会使用id选择器.class选择器.元素选择器.伪类选择器和元素选择器.在使用时我的建议是最好使用id选择器,其次是class选择器>元素选择器>Element选择

  • 优化Jquery,提升网页加载速度

    总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法. 复制代码 代码如下: <div id="content"><form method=&

  • JQuery性能优化的几点建议

    针对jquery性能优化这个主题,想必大家都有所了解.下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考. 一.选择器性能优化建议 1. 总是从#id选择器来继承:这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了: 2. 在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$('head')),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用tag来修饰cla

  • jQuery性能优化技巧分析

    本文较为详细分析了jQuery性能优化技巧.分享给大家供大家参考.具体分析如下: 一.使用最新版本的jQuery类库 jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 二.使用合适的选择器 jQuery选择器性能最佳到最差方式如下: id选择器,如$('#id', context) 标签选择器,如$('p', context) class选择器,如$('.class', context) 属性选择器,如

  • jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的二.请使用一个var来定义变量如果你使用多个变量的话,请如下方式定义: 复制代码 代码如下: var page = 0,   $loading = $('#loading'),   $body = $('body'); 不要给每一

  • Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解. 首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈.其次,jquery的优化与web优化中的某些方法是一样的. a.压缩js.使用代码压缩技术,减小文件体积.(使用jsmin.YUI Compressor等). b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.把事件注册上提到父节点上,这 样就不需要为每

  • jQuery代码优化 遍历篇

    了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能.本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题. jQuery对象栈 jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中.而每个jQuery对象都有三个属性:context.selector和prevObject,其中的prevObject属性就指向这个对象栈中的

  • jquery动态遍历Json对象的属性和值的方法

    1.遍历 json 对象的属性 //定义json对象 var person= { name: 'zhangsan', pass: '123', fn: function(){ alert(this.name+"的密码="+this.pass); } } //遍历person属性包括方法,如果不想显示出方法,可用typeof(person[item])== "function"来判断 for(var item in person){ alert("perso

  • jquery属性,遍历,HTML操作方法详解

    Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQ

  • jQuery 循环遍历改变a标签的href(实例讲解)

    把info类下面所有的a标签链接后天加"#article". jQuery(document).ready(function($){ $('.info a').each(function(){ let Ahref = $(this).html() + "#article"; $(this).attr("href",Ahref); }); }); 以上这篇jQuery 循环遍历改变a标签的href(实例讲解)就是小编分享给大家的全部内容了,希望能给

  • jquery 动态遍历select 赋值的实例

    获取select 选中的值: $("#selDepUnit").children('option:selected').val(); Ajax 动态为select赋值: $.ajax({ type: "POST", url: "/department/findDepByPid", data:"pid="+pid, success: function (data) { $("#selDep").empty()

  • jQuery循环遍历子节点并获取值的方法

    本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>

  • jQuery 获取遍历获取table中每一个tr中的第一个td的方法

    如下所示: <tbody id="already_question_list"> <tr> <td><?php echo $val['unique_number']; ?></td> <td><?php echo $val['year'].'-'.$val['series']; ?></td> <td><?php echo $val['content'] ?><

  • jQuery实现遍历复选框的方法示例

    jQuery实现遍历复选框的方法示例

    本文实例讲述了jQuery实现遍历复选框的方法.分享给大家供大家参考,具体如下: 1.问题背景: 这里有10个复选框,根据选择的复选框获取其值,并将其值用"--"连接,插入到div中 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历复选框</title> <script type="tex

  • jQuery实现遍历XML节点和属性的方法示例

    本文实例讲述了jQuery实现遍历XML节点和属性的方法.分享给大家供大家参考,具体如下: 用jquery遍历xml网上已经有很多, 但是看了好多文章, 对于不指定属性名称的遍历方法却没有 研究了一下, 好像jquery没有attributes. 还是要借助于原生态的JS 以下是JS代码 <script type="text/javascript" src="js/jquery.min.js"></script> <div id=&qu

  • jQuery代码优化 选择符篇

    本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述

随机推荐