在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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
Laravel日志用法详解
2016/10/09 PHP
Redis构建分布式锁
2017/03/28 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
母校寄语大全
2014/04/10 职场文书
指导教师评语
2014/04/26 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书