在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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
VBScript版代码高亮
2006/06/26 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
JavaScript实现异步图像上传功能
2018/07/12 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python中的错误处理
2016/04/10 Python
python读取oracle函数返回值
2016/07/18 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python添加菜单图文讲解
2019/06/04 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python实现超市商品销售管理系统
2019/11/22 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
解决python3输入的坑——input()
2020/12/05 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Python文件操作的面试题
2013/06/22 面试题
客户表扬信范文
2014/01/10 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Golang生成Excel文档的方法步骤
2021/06/09 Golang
python ansible自动化运维工具执行流程
2021/06/24 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript