JS 多线程 web worker 基本使用
简介：
JS 是单线程，所有的任务都是在一个线程中完成的，也就是说，只能同时执行一个任务，因此有时多个任务同时进行的时候，会阻塞，比如UI会一直在渲染，同时还要进行复杂逻辑的处理，这时候我们就要使用多线程 worker
Worker的作用：
就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
下面是 JavaScript Worker 的详细使用步骤：
创建 Worker 对象
在主线程中创建 Worker 对象，传入一个 JavaScript 文件的 URL，该文件会在 Worker 线程中运行。
const worker = new Worker('worker.js');创建 Message 事件监听器
在主线程中为 Worker 对象添加 message 事件监听器，用于接收 Worker 线程发送的消息。
worker.addEventListener('message', (event) => {
console.log('Received message from worker:', event.data);
});发送消息给 Worker 线程
在主线程中通过 postMessage() 方法向 Worker 线程发送消息。
worker.postMessage({type: 'calculate', data: [1, 2, 3]});在 Worker 线程中处理消息
在 Worker 线程中为 self 对象添加 message 事件监听器，用于接收主线程发送的消息。
self.addEventListener('message', (event) => {
if (event.data.type === 'calculate') {
const result = calculate(event.data.data);
self.postMessage({type: 'result', data: result});
}
});
function calculate(data) {
return data.reduce((a, b) => a + b);
}发送消息给主线程
在 Worker 线程中通过 postMessage() 方法向主线程发送消息。
self.postMessage({type: 'result', data: result});需要注意的是，Worker 线程中不能直接操作 DOM，因为它们没有访问主线程的权限。如果需要操作 DOM，可以在 Worker 线程中处理数据，然后将处理结果通过 postMessage() 方法发送给主线程，在主线程中更新 DOM。
除了使用 JavaScript 文件创建 Worker 对象，还可以使用 Blob 对象或者 Data URL 创建 Worker 对象。Blob 对象可以动态生成 JavaScript 代码，Data URL 可以将 JavaScript 代码转换为 Base64 编码，并以字符串形式传递给 Worker 对象。
