zoukankan      html  css  js  c++  java
  • 谈一谈循环的性能提升

    循环在任何编程语言中都会大量的使用,在JS中也不例外。对于JS来说,循环也有其特殊之处,这边笔记主要写的是JS中性能提升。

    首先要来和大家统一一下概念,下面是for循环的基本概念

    for循环按照如下顺序执行:①→②→③→④→②→③→④
    所以大家可以看到①循环初始化语句只执行一次,而其他三步每次循环都执行。

    接下来可以从四方面入手,来进行性能优化

    ①递减迭代
    正如上面图片所示,大多数情况,开发者喜欢递增的方式进行迭代,即从0开始增加到某个特定值为止。而事实上,递减的迭代会更高效。

    ②简化循环条件语句
    循环条件语句再每次循环都进行运算,所以要尽量是其精简。
    先举一个反例
    1.     for(var i = 0; i < document.images.length; i++){
    2.         //处理document.images[i]
    3.        
    4.     }

    在这个例子中,由于循环条件语句每次循环都执行,所以他每次都会进行一次document.images的遍历,而通常DOM操作是非常耗时的。
    我们可以尝试做下面的优化:
    1.     for(var i = 0, len = document.images.length; i < len ; i++){
    2.         //处理document.images[i]
    3.        
    4.     }

    把循环条件语句中的DOM访问结果缓存历来,这样整个循环只会访问一次DOM了,大大提升了性能。


    在所有的浏览器中,通过将HTML容器上需要遍历的次数缓存起来都会大大提升速度。其中在Safari 3中速度会提高两倍,而在IE7中速度会提高170倍

    ③简化循环体
    循环体是执行最多的,所以要确保其被最大限度地优化。应该尽量移除哪些密集的计算。

    ④合并循环条件和更新语句


    1. var i, someArray = [];
    2. for(i = someArray.length; i--;){
    3.     //处理someArray[i]
    4. }


    上面的代码中,将循环用到的变量声明都提前,这样可以提升一部分效率;条件语句为i--,这样使得i同0比较,而不是与数组的长度比较,这样也挺高了效率;
    此外还去除了更新语句。

    文章转载于:http://www.w3cfuns.com/notes/21719/ae9ca104af0ced18837445db1956ed98.html

  • 相关阅读:
    读胶料温度代码
    干掉win10自带的不给力的应用(转自https://jingyan.baidu.com/article/08b6a591b7398514a8092238.html)
    安装SQL提示重启电脑失败,解决办法
    几种加解密方法:AES、DES、SHA数据加密
    SQL数据库添加新账号,只操作指定数据库
    jQuery中attr()、prop()、data()用法及区别
    jquery.cookie() 的使用(原)
    功能强大的web打印控件lodop的使用
    Win+R命令大全
    Vue
  • 原文地址:https://www.cnblogs.com/ricoliu/p/6090326.html
Copyright © 2011-2022 走看看