本文通过一个实际的代码片段，来介绍如何使用浏览器原生 API setTinmeout，将 CPU 密集型的执行任务进行拆解，从而提高其在浏览器 UI 主线程里的执行效率，改善用户体验。

未优化之前的版本：

let i = 0;

let start = Date.now();

function count() {

  // do a heavy job
  for (let j = 0; j < 1e9; j++) {
    i++;
  }

  alert("Done in " + (Date.now() - start) + 'ms');
}

count();

上述 count 函数里的 for 循环的 i 累加，是一个 CPU 密集型任务，在执行完毕之前，JavaScript 引擎任务队列里的其他任务，没有机会得到执行。

优化版本

将 i 从 1 累加到 1e9 的任务，拆解成 1000 个小的子任务。每个子任务执行完毕之后，调用 setTimeout 调度自身，这样任务队列里其他任务有机会得到执行。

let i = 0;

let start = Date.now();

function count() {

  // do a piece of the heavy job (*)
  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  } else {
    setTimeout(count); // schedule the new call (**)
  }

}

count();

• 第一轮任务执行：i=1…1000000
• 第二轮任务执行：i=1000001…2000000

以此类推。

现在，如果在引擎忙于执行第 1 部分时出现新的辅助任务（例如 onclick 事件），它会排队，然后在第 1 部分完成时执行，然后再执行下一部分。 在 count 执行之间，使用 setTimeout 定期返回事件循环，为 JavaScript 引擎提供了调度执行其他任务的机会，以对其他用户操作做出反应。

let i = 0;

let start = Date.now();

function count() {

  // move the scheduling to the beginning
  if (i < 1e9 - 1e6) {
    setTimeout(count); // schedule the new call
  }

  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  }

}

count();

为浏览器脚本拆分 CPU 密集型任务的另一个好处是我们可以显示进度指示。

如前所述，只有在当前运行的任务完成后才会绘制对 DOM 的更改，无论当前运行的任务需要多长时间才能执行完毕。

下面是一个例子：

<div id="progress"></div>

<script>

  function count() {
    for (let i = 0; i < 1e6; i++) {
      i++;
      progress.innerHTML = i;
    }
  }

  count();
</script>

对 i 的更改要等到函数执行完成后才会显示，所以我们只会看到最后一个值。

但我们也可能想在任务期间展示一些东西，例如一个进度条。

如果我们使用 setTimeout 将繁重的任务拆分为多个部分，那么 i 会在多个部分执行之间绘制出来。

<div id="progress"></div>

<script>
  let i = 0;

  function count() {

    // do a piece of the heavy job (*)
    do {
      i++;
      progress.innerHTML = i;
    } while (i % 1e3 != 0);

    if (i < 1e7) {
      setTimeout(count);
    }

  }

  count();
</script>