在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 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
JScript实现地址选择功能
Aug 15 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 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 高手之路(一)
2006/10/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python九九乘法表的实例
2017/09/26 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
物流合作计划书
2014/01/10 职场文书
演讲比赛策划方案
2014/06/11 职场文书
公司授权委托书
2014/10/17 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技