在JS性能优化中,有一个常见的小优化,即

// 不缓存
for (var i = 0; i < arr.length; i++) {
  ...
} // 缓存
var len = arr.length;
for (var i = 0; i < len; i++) {
  ...
}
第二种方式是大多数的程序猿推荐的一种写法,据说是有利于性能提升,本人没有检测过,但是找到一篇相关文章:
http://www.crimx.com/2015/04/21/should-array-length-be-cached-or-not/
大家可以参考该作者的一些意见。另外确实不是一个优雅的写法,这点我是同意的。 那么,我们就应该摒弃这种写法吗?不是的,还有另外一种情况,必须使用这种写法。 请看栗子:
var divs = document.getElementsByTagName("div"), i, div ;
for( i=0; i<divs.length; i++ ){
  div = document.createElement("div");
document.body.appendChild("div");
}
以上代码会导致无限循环:第一行代码会取得所有的div元素的nodelist,由于nodelist是动态的,因此只要有新的div添加到页面中,下一次的for循环就会再对divs.length求值,因此i和divs.length每次都会同时递增,结果他们的值永远不会相等,就创建了一个死循环。 所以,如果想要迭代一个nodelist最好使用length属性初始化第二个变量,然后将迭代器与该变量进行比较,修改后的代码如下:
var divs = document.getElementsByTagName("div"), i, div ,len ;
for(i=0;len=divs.length;i<len;i++){
  div = document.createElement("div");
  document.body.appendChild("div");
}
这个例子中初始化了len,由于len中保存着divs.length在循环开始时的一个快照,因此会避免上一个例子中出现的无限循环问题,因此当需要对nodelist进行循环迭代的时候,使用这种方法更为保险。 总结:
1.将length的值进行缓存,到底是否有利于性能优化,是一个需要根据具体情况进行判断的事情,总体来讲,减少对DOM的访问还是有好处的;
2.当需要操作nodelist的时候,建议将length的值进行缓存,可以避免出现死循环。


关于for循环中是否需要缓存length值的个人总结的更多相关文章

  1. C#Random函数在循环中每次获取一样的值

    首先需要了解一点Random函数的随机生成是和当前时间有关系,如果在短时间生成随机数,就会导致随机数生成出来是相同的. 不过我们可以在每次随机时指定一个Seed种子值,这样在循环里就可以每次获取不一样 ...

  2. 在循环中如何取input的值和增加点击事件

    {volist name="dianpu" id="dianpu"} <input style="border: none;" rea ...

  3. 关于for循环中的闭包问题

    还是昨天的那个简单的小项目,已经花了一天的时间了 - - .从&&的用法,到CSStext,到今天马上要谈的闭包(closure),通过一个小东西,真真发现了自己的各方面不足.昨天发完 ...

  4. 《逐梦旅程 WINDOWS游戏编程之从零开始》笔记5——Direct3D中的顶点缓存和索引缓存

    第12章 Direct3D绘制基础 1. 顶点缓存 计算机所描绘的3D图形是通过多边形网格来构成的,网网格勾勒出轮廓,然后在网格轮廓的表面上贴上相应的图片,这样就构成了一个3D模型.三角形网格是构建物 ...

  5. 关于Android中的三级缓存

    三级缓存的提出就是为了提升用户体验.当我们第一次打开应用获取图片时,先到网络去下载图片,然后依次存入内存缓存,磁盘缓存,当我们再一次需要用到刚才下载的这张图片时,就不需要再重复的到网络上去下载,直接可 ...

  6. js for 循环中的 变量问题。

    今日处理项目中的一个循环,本来就是一个小小的for循环,后来发现该段程序出现了问题,仔细检查代码没有发现其中的错误.无奈只好叫来了老大帮忙.通过在模版中断点调试(该方式只能自己写debugger断点) ...

  7. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  8. 关于在for循环中绑定事件打印变量i是最后一次。

    其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 关于ListView中convertView的缓存个数的探究

    在面试的时候经常会被问到一个有关ListView的问题:一个ListView的高度最多可以显示5个item,但是却有20条数据要显示,问最多会有多少个convertView会被复用?或者如在ListV ...

随机推荐

  1. Codeforces - 55D Beautiful numbers (数位dp+数论)

    题意:求[L,R](1<=L<=R<=9e18)区间中所有能被自己数位上的非零数整除的数的个数 分析:丛数据量可以分析出是用数位dp求解,区间个数可以转化为sum(R)-sum(L- ...

  2. JavaScript中堆栈解析,已经与delete之间的关系。

    1,在栈中的数据不会随意删除. 2,堆中的数据可以随意删除. 注意:用eval("var a")定义的变量存放在栈中. var 和function 语句在JavaScript中的优 ...

  3. 二叉树、平衡二叉树、B-Tree与B+Tree

    本文总结自:https://blog.csdn.net/chuixue24/article/details/80027689 二叉树(B树,binary tree) 左子树的键值 < 根的键值 ...

  4. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  5. 砝码称重V2

    总时间限制:  1000ms 内存限制:  65536kB 描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=100,000),要求:计算用这些砝码能称出的不同重量的个数 ...

  6. Hibernate -- 检索方式 HQL

    Hibernate 提供了以下几种检索对象的方式 导航对象图检索方式:  根据已经加载的对象导航到其他对象 OID 检索方式: 按照对象的OID 来检索对象 HQL 检索方式:使用面向对象的HQL查询 ...

  7. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  8. perl非root用户安装模块

    install perl Module 1. search module's package on [Google](https://www.google.com) or [CPAN Search S ...

  9. java-ConcurrentLinkedQueue 简单使用

    import java.util.concurrent.ConcurrentLinkedQueue; public class CacheTest { /** * * offer(E e) 将指定元素 ...

  10. [日常训练]AekdyCoin的跳棋

    Description $AekdyCoin$正在玩一个游戏,该游戏要用到两副牌和一个数轴和一个棋子. 刚开始的时候棋子位于数轴的$0$位置.然后$AekdyCoin$交替的从两副牌中抽取一张牌,然后 ...