在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 相关文章推荐
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
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
一个程序下载的管理程序(一)
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
暑假实习求职信范文
2013/09/22 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
粗加工管理制度
2014/02/04 职场文书
个人贷款承诺书
2014/03/28 职场文书
质量负责人任命书
2014/06/06 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python+Tkinter制作专属图形化界面
2022/04/01 Python
python数据处理之Pandas类型转换
2022/04/28 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android