在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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
Node.js实现文件上传
Jul 05 Javascript
React快速入门教程
Jan 17 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP制作万年历
2015/01/07 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python动态加载包的方法小结
2016/04/18 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
初中毕业生的自我评价
2014/03/03 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
求职信如何撰写?
2019/05/22 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python