未优化之前的版本：
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>
