在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中哈希表的几种用法总结
Jan 28 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python 字典中取值的两种方法小结
2018/08/02 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
小学班主任自我评价
2015/03/11 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
民事调解协议书
2016/03/21 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL