在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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
提升python处理速度原理及方法实例
2019/12/25 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
《值日生》教学反思
2014/02/17 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
装修施工安全责任书
2014/07/24 职场文书
村道德模范事迹材料
2014/08/28 职场文书
大学辅导员述职报告
2015/01/10 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
企业愿景口号
2015/12/25 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Python pandas之求和运算和非空值个数统计
2021/08/07 Python