在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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
vue 使用post/get 下载导出文件操作
Aug 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 和 HTML
2006/10/09 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
总结js函数相关知识点
2018/02/27 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python远程连接MySQL数据库
2019/04/19 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python笔记之代理模式
2019/11/20 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
学校爱国卫生月活动总结
2014/06/25 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
python glom模块的使用简介
2021/04/13 Python
oracle数据库去除重复数据
2022/05/20 Oracle