在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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vue的$http的get请求要加上params操作
Nov 12 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弹出错误警告函数扩展性强
2014/01/17 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
分享php多功能图片处理类
2016/05/15 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
ExpressJS入门实例
2015/01/14 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JS判断数组那点事
2017/10/10 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
在python中修改.properties文件的操作
2020/04/08 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
大学四年规划书范文
2013/12/27 职场文书
简历自我评价模版
2014/01/31 职场文书
体操比赛口号
2014/06/10 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2015年安全生产责任书
2015/01/30 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫