在for循环中length值是否需要缓存

 更新时间:2015年07月27日 14:14:07   作者:欧阳隐  
这篇文章主要介绍了在for循环中length值是否需要缓存,需要的朋友可以参考下

在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循环中的全部介绍,希望大家喜欢。

相关文章

  • js实现0ms延时定时器的几种方式

    js实现0ms延时定时器的几种方式

    本文主要介绍了js实现0ms延时定时器的几种方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • electron-builder打包配置详解

    electron-builder打包配置详解

    本文主要介绍了electron-builder打包配置详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JS时间控制实现动态效果的实例讲解

    JS时间控制实现动态效果的实例讲解

    下面小编就为大家带来一篇JS时间控制实现动态效果的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript中async和await的使用及队列详情

    JavaScript中async和await的使用及队列详情

    这篇文章主要介绍了JavaScript中async和await的使用及队列详情,主要围绕js中async和await简单解析展开面试中可能会问到的关于队列的一些场景和知识点,需要的朋友可以参考一下
    2022-07-07
  • JS实现登录页面记住密码和enter键登录方法推荐

    JS实现登录页面记住密码和enter键登录方法推荐

    下面小编就为大家带来一篇JS实现登录页面记住密码和enter键登录方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-05-05
  • JS前后端实现身份证号验证代码解析

    JS前后端实现身份证号验证代码解析

    这篇文章主要介绍了JS前后端实现身份证号验证代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 基于bootstrap实现多个下拉框同时搜索功能

    基于bootstrap实现多个下拉框同时搜索功能

    这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形式详细分析了JavaScript结合时间函数动态操作页面元素的相关实现技巧,需要的朋友可以参考下
    2019-12-12
  • JS异步编程Promise对象详解

    JS异步编程Promise对象详解

    本文详细讲解了JS异步编程之Promise对象,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 如何用JavaScript检测当前浏览器是无头浏览器

    如何用JavaScript检测当前浏览器是无头浏览器

    这篇文章主要介绍了如何用JavaScript检测当前浏览器是无头浏览器,对无头浏览器感兴趣的同学,可以参考一下
    2021-04-04

最新评论