当我在window.onload之前运行JavaScript时花费很长时间

Question

我有从1到n进行计数的代码。

下面的代码大约需要1秒钟。

const maxNum = Math.pow(2, 26);
const startTime = performance.now();
let result = 0;
for(let i = 1; i <= maxNum; i++) {
    result += i;
}
console.log(performance.now() - startTime);

但是，一旦我将相同的脚本放入window.onload中，大约需要65毫秒。为什么差异很大？

window.onload = function() {
    const maxNum = Math.pow(2, 26);
    const startTime = performance.now();
    let result = 0;
    for(let i = 1; i <= maxNum; i++) {
        result += i;
    }
    console.log(performance.now() - startTime);
};

Answer 1

此行为是因为您要在顶级上重新分配引用，至少在某些环境中，在全局级别上更改值比将引用重新分配给非全局变量要贵得多。

下面的代码片段在IIFE（立即运行）中执行相同的操作，将重新分配的result位于顶层。如您所见，处理过程花费的时间差不多（很长）：

let result = 0;
(() => {
  const maxNum = Math.pow(2, 26);
  const startTime = performance.now();
  for(let i = 1; i <= maxNum; i++) {
      result += i;
  }
  console.log(performance.now() - startTime);
})();

如果在IIFE中移动let result = 0，则该过程将更快，因为这样重新分配的变量将在本地范围内，而不是全局范围内。

[与在加载时立即执行的操作没有关系，而是与立即执行的操作无关-它仅与重新分配2 ** 26次的变量绑定是全局范围的事实有关。