Javascript进阶-长任务优化：WebWorker与时间分片
# 前端长任务
js 是单线程的语言。如果一段 js 代码的逻辑占用了大量 CPU，那么就会造成「阻塞」，从而导致后面的渲染逻辑迟迟无法执行。
一般来说，超过 50ms 的任务，就是「长任务」。
# 长任务优化 1: 使用 Web Worker
对于长任务，在浏览器环境下，可以使用 Worker 规范，来开启子线程专门用来计算，主线程只负责发起计算任务和读取计算结果。
在 nodejs 中，可以通过 child_process 或 worker_thread 来开启多进程或者工作线程，达到类似的效果。
假设现在要实现一个长任务计算，主线程的整体流程是：
- 主线程加载 worker 线程
- 主线程向 worker 线程发送数据，告诉 worker 线程开始计算任务
- 主线程监听 worker 线程返回的数据，然后根据具体业务逻辑使用它
主线程代码如下：
/*
* @Author: dongyuanxin
* @Date: 2021-01-11 23:29:13
* @Github: https://github.com/dongyuanxin/blog
* @Blog: https://xin-tan.com/
* @Description: 长任务优化-worker
*/
import ReactDom from "react-dom";
import React, { useEffect } from "react";
const App = () => {
useEffect(() => {
// 开启一个worker线程
const worker = new Worker("./6.worker.js");
// 监听worker线程传来的消息
worker.addEventListener("message", e => {
console.log(`>>> [main.js] worker's data is:`, e.data);
});
// 监听worker线程的报错
worker.addEventListener("messageerror", e => {
console.log(`>>> [main.js] worker's error is:`, e.data);
});
// 将任务交给worker线程执行
console.log(">>> [main.js] 开始进行任务计算");
worker.postMessage(1000000n);
console.log(">>> [main.js] 交给Worker处理");
}, []);
return <span>App</span>;
};
const rootElement = document.getElementById("root");
ReactDom.render(<App />, rootElement);
worker 线程的整体流程是：
- 监听主线程发送数据，收到数据时，启动计算任务
- 计算完后，将任务结果发送给主线程
worker 线程代码如下：
// 在worker线程中，self的作用类似window
// 监听主线程传来的消息
self.addEventListener("message", e => {
// 执行计算任务
console.log(`>>> [worker.js] main's data is:`, e.data);
for (let i = 0n; i < e.data; i = i + 1n) {
// 模拟浪费CPU的计算
}
// 将计算结果返回给主线程
self.postMessage(e.data * 2n);
});
# 长任务优化 2: 使用 Generator Function
对于长任务来说，WebWorker 本质上是使用多线程。还有其它方法吗？有，可以尝试将长任务分解成短任务。
这里「分解成短任务」，不是说将其拆分为多个子函数，因为这样还是一次性都要执行，由于函数堆栈调用，时间甚至更慢。而是说，让长任务运行到某个部分，然后暂停，空出 CPU 去执行其它任务，例如渲染界面、响应用户交互。之后，再拿回 CPU，继续上次的计算。
这种处理思路，有点像早期操作系统，只有一个进程。那怎么让用户看起来所有的任务都在执行呢？只能来回切换任务，但同一时刻，其实只有一个任务在执行；而多进程，是同一时刻，多个任务同时进行。也就是并发和并行的区别。
那么，想要做到这个效果，需要满足 2 个条件：
- 能够暂停函数，让出 CPU 控制权
- 能够回到函数，拿到 CPU 控制台权继续执行
这时，就要使用 es6 提供的 generator 函数，也就是协程在 js 语言规范中的实现。
# 实现 1: 利用 generator 实现长任务切分
// gen参数是一个generator函数
function ts(gen) {
if (typeof gen !== "function") {
return;
}
let generator = gen();
return function next() {
const res = generator.next();
if (res.done) {
return;
}
// 在下一次js的事件循环中，继续执行gen函数中的逻辑
setTimeout(next);
};
}
ts 函数在当前 js 事件循环中，执行传入的 generator 函数的部分逻辑；然后让出 cpu 控制权，并且在下次事件循环中，继续执行剩余部分逻辑；循环往复，直到完成。
下面是使用ts()来对长任务进行切分的效果：
function* run() {
yield;
for (let times = 0; times < 10; ++times) {
for (let i = 0n; i < 1000000n; i += 1n) {}
console.log(`>>> finish duty: ${times + 1} / 10`);
yield;
}
}
const runGen = ts(run);
runGen();
这个任务总共大概 300ms（系统是 Mac 2020 16 寸）。通过 yiled，将长任务切分成 10 个短任务。从而避免一直占用 js 线程，阻塞当前的事件循环，导致之后的渲染出错。
# 实现 2: 更好地切分长任务
进一步考虑下一种情况，假设通过 yield 关键词切分的子任务，执行时间太短（比如就循环了 100 次，可能就几毫秒）。这样长任务会被切的非常碎，分布在很多次事件循环中执行。整体的执行时间会增加。
优化的思路：通过「批量执行」子任务。统计子任务执行时间，如果执行时间太短（小于 25ms），那么继续执行，保证每次执行的 1 个或者 n 个子任务的总时间，总时间大于等于 25ms。
代码实现如下：
function ts2(gen) {
if (typeof gen !== "function") {
return;
}
let generator = gen();
return function next() {
const startTime = Date.now();
let res;
do {
res = generator.next();
} while (!res.done && Date.now() - startTime < 25);
if (res.done) {
return;
}
// 在下一次js的事件循环中，继续执行gen函数中的逻辑
setTimeout(next);
};
}
const runGen2 = ts2(run);
runGen2();