在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. html 基础--一般标签

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  2. ReadyBoost

    ReadyBoost是Windows Vista中的新技术,在继Windows Vista的下一代操作系统Windows 7中,同样包含了这项技术,它利用了闪存随机读写及零碎文档读写上的优势来提高计算 ...

  3. jQuery单选框跟复选框美化

    在线演示 本地下载

  4. anacoda的spyder在调用matplotlib的时候无法显示动画效果【学习笔记】

    ipython console的默认设置将图像结果显示在终端,但是这样显示存在的问题是无法显示动画效果,因此需要将动画效果显示到单独的窗口,按照下面的截图即可显示. 方法一.按照如下截图显示设置,重启 ...

  5. js 的编译

    js和其他语言一样,也是需要编译的,代码编译发生在代码执行之前,js代码的编译会经历如下几个阶段 1.分词,词法分析  这个过程会将由字符串组成的字符分解成有意义的代码块,这些代码块称为词法单元,例如 ...

  6. Curator学习

    Curator是对zookeeper的高级封装. 考虑到使用它来开发zookeeper应用的方便,特此来记录总结学习与开发使用过程的问题. 1. curator-framework Curator F ...

  7. truncate delete 与 drop的区别

    一张表几亿条数据.根据task_id删除几千万. delete删除后查询,发现查询速度还是没有变快.explain查看 rows并没有发生变化.查询速度肯定也不会变化.原因? truncate del ...

  8. Remove Duplicates from Sorted List ,除去链表中相邻的重复元素

    Remove Duplicates from Sorted List : Given a sorted linked list, delete all duplicates such that eac ...

  9. 缓存技术内部交流_01_Ehcache3简介

    参考资料: http://www.ehcache.org/documentation/3.2/getting-started.html http://www.ehcache.org/documenta ...

  10. 分分享知识-快乐自己: @Component注解的使用

    @controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 @service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 @repositor ...