在for循环中length值是否需要缓存


Posted in Javascript onJuly 27, 2015

在for循环中是否需要缓存length值,相信很多程序猿们都纠结过此问题,下面就这一问题的分析请看下文:

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

// 不缓存 
for (var i = 0; i < arr.length; i++) {
...
}

// 缓存
var len = arr.length;
for (var i = 0; i < len; i++) {

...
}

那么,我们就应该摒弃这种写法吗?不是的,还有另外一种情况,必须使用这种写法。

请看例子:

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的值进行缓存,可以避免出现死循环。

以上内容就是针对是否需要缓存length值在for循环中的全部介绍,希望大家喜欢。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
javascript快速排序算法详解
Sep 17 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
js实现弹窗效果
Aug 09 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 #Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JSON取值前判断
2014/12/23 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
基于python3实现倒叙字符串
2020/02/18 Python
python中数据库like模糊查询方式
2020/03/02 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
农村婚礼证婚词
2014/01/10 职场文书
保密普查工作实施方案
2014/02/25 职场文书
大学运动会通讯稿
2015/07/18 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript