在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拖拽div实现思路
Feb 19 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
js获取页面description的方法
May 21 Javascript
js中unicode转码方法详解
Oct 09 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
从0搭建vue-cli4脚手架
Jun 17 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
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
jquery 指南/入门基础
2007/11/30 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Python动态加载模块的3种方法
2014/11/22 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
求职简历自荐信
2013/10/20 职场文书
客房主管岗位职责
2013/12/09 职场文书
《自选商场》教学反思
2014/02/14 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
值班管理制度范本
2015/08/06 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server