在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 相关文章推荐
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
webpack3之loader全解析
Oct 26 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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下实现农历日历的代码
2007/03/07 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
关于php循环跳出的问题
2013/07/01 PHP
培养自己的php编码规范
2015/09/28 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
JS重要知识点小结
2011/11/06 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python查看微信撤回消息代码
2018/06/07 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Django的models模型的具体使用
2019/07/15 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
详解python 内存优化
2020/08/17 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
管理部副部长岗位职责范文
2014/03/09 职场文书
社区食品安全实施方案
2014/03/28 职场文书
疾病防治方案
2014/05/31 职场文书
公司年底活动方案
2014/08/17 职场文书
2014年女职工工作总结
2014/11/27 职场文书
部队个人年终总结
2015/03/02 职场文书