为什么在嵌套函数之外声明一个计数器变量会使循环慢 5 倍？

Question

我正在寻找一些我正在重新访问的 JavaScript 遗留代码的微优化，并注意到在最频繁调用的 for 循环中，计数器在使用它们的函数之外在全局范围内声明一次。我很好奇这是否真的是一种优化，因此我在 JavaScript 中创建了以下测试用例：

var tmp = 0;

function test(){

    let j = 0;

    function letItBe(){

        for(j = 0; j < 1000; j++){
            tmp = Math.pow(j, 2);
        }
    }

    function letItNotBe(){
        for(let l = 0; l < 1000; l++){
            tmp = Math.pow(l, 2);
        }
    }

    console.time("let it be");
    for(var i =0; i < 10000; i++){

        letItBe();
    }
    console.timeEnd("let it be");


    console.time("let it not be");
    for(var i =0; i < 10000; i++){

        letItNotBe();
    }
    console.timeEnd("let it not be");
}

test();

在 Chrome、Firefox 和 NodeJS 中，letItNotBe() 的运行速度明显快于 letItBe()

铬：

NodeJS：

用 var 改变 let 没有任何区别。

最初我的逻辑是，每次调用函数时声明一个新的计数器变量确实比最初声明一个变量然后简单地重置为 0 慢。然而，事实证明这是完全相反的和不同的在执行时间上是相当实质性的。

我的简单解释是，当计数器变量在使用它的函数之外声明时，JS 转译器需要以某种方式引用这个变量。而且由于它在父范围内，因此在递增时需要更多的执行来引用它。但这只是盲目的猜测。

任何人都可以给出任何有意义的解释为什么会发生这种情况，因为除了我已经拥有的测试之外，我需要重构代码并给出有意义的解释 mysefl :) 谢谢。

Answer 1

我读过一本书High Performance JavaScript，作者在第 2 章“数据访问”-“管理范围”-“标识符解析性能”部分对此进行了解释。

标识符解析不是免费的，因为实际上没有计算机操作 确实没有某种性能开销。越深入 执行上下文的作用域链存在标识符，越慢 它是用于读取和写入的访问。因此，当地 在函数内部访问变量总是最快的， 而全局变量通常是最慢的（优化 JavaScript 引擎能够在某些情况下对此进行调整）。

...

所有浏览器的总体趋势是越深入 范围链标识符存在，读取它的速度越慢，或者 写给。

...

鉴于此信息，建议在任何时候都使用局部变量 可以在不优化的情况下提高浏览器的性能 JavaScript 引擎。一个好的经验法则是始终存储 如果多次使用局部变量中的超出范围的值 在函数中。

在您的情况下，letItBe 和 letItNotBe 以相同的方式工作，使用相同的范围外 tmp 变量，它们都是闭包。唯一的区别是 @987654326 的计数器变量@循环：

• 变量j是为函数test()定义的，它对于函数letItBe()是“超出范围”的，所以执行letItBe()会导致引擎在标识符解析上做更多的工作
• 变量l在for循环范围内定义（见let keyword in the for loop），所以解析更快