在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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue-lazyload使用总结(推荐)
Nov 01 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Python wordcloud库安装方法总结
2020/12/31 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
在校生党员自我评价
2013/09/25 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
二年级语文教学反思
2014/02/02 职场文书
《画》教学反思
2014/04/14 职场文书
求职信内容怎么写
2014/05/26 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书