在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 指南/入门基础
Nov 30 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
google广告之另类js调用实现代码
Aug 22 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
JQuery实现自定义对话框的代码
2008/06/15 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
建筑自我鉴定
2013/10/19 职场文书
职务聘任书范文
2014/03/29 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL