js-for循环的性能优化

112 阅读 0 评论 74 点赞

我是靠谱客的博主乐观万宝路，最近开发中收集的这篇文章主要介绍js-for循环的性能优化，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

只要做开发，就一直听别人说性能性能性能。但是我们能通过哪些方式使我们的代码性能更好呢？

这里的性能在我看来就是用尽可能少的空间、时间去做相同的事儿。

还是个小菜鸡，如有不对的地方还望大家指正。

首先，我们先做个初始数据：

let arr = []
for (let a = 0; a < 100; a++) {
    arr[a] = []
    for (let b = 0; b < 100; b++) {
        arr[a][b] = []
        for (let c = 0; c < 100; c++) {
            arr[a][b][c] = c
        }
    }
}

普通的for循环 —— 4.673ms

    console.time("demo1")
    for (let a = 0; a < arr.length; a++) {
        for (let b = 0; b < arr[a].length; b++) {
            for (let c = 0; c < arr[a][b].length; c++) {
            }
        }
    }
    console.timeEnd("demo1")	// demo1: 4.673ms

最原始的for循环耗时，单单这一个时间可能你也没觉得有多慢。

我们接着往下看。

第一次优化 —— 3.664ms

    console.time("demo2")
    let a,b,c
    for (a = 0; a < arr.length; a++) {
        for (b = 0; b < arr[a].length; b++) {
            for (c = 0; c < arr[a][b].length; c++) {
            }
        }
    }
    console.timeEnd("demo2")	// demo2: 0.103ms

不得了，4.673ms 直接缩成 0.103ms！这里不过就是把 for 循环的初始化放到了外面。由此可以看出可能 for 循环带着初始化表达式一遍遍的过着那循环体也说不定。不管因为啥，这初始化的部分以后咱还是交给门口月下四兄贵来解决吧。

这里居然没有注意到我每次循环后都没把变量名归零，现在想想也是，真是不应该。感谢楼下的大帅比指出问题，点赞！这里的一个逻辑修改为变量名外部定义，内部只做复制操作，这样循环时就不会反复开辟变量空间。每次循环都能比原循环快上2成。

第二次优化 —— 3.12ms

    console.time("demo3")
    let a,b,c
    let a_length = arr.length
    let b_length, c_length
    for (a = 0; a < a_length; a++) {
        b_length = arr[a].length
        for (b = 0; b < b_length; b++) {
            c_length = arr[a][b].length
            for (c = 0; c < c_length; c++) {
            }
        }
    }
    console.timeEnd("demo3")	// demo3: 0.048ms