【Q755】简述 WebWorker API

[shfshanyue]

1. 如何使用 worker
2. worker 与主线程是如何通信的
3. 在 worker 中进行的工作有哪些限制

[Babytiann]

在 Web 中，Web Worker 是一种允许将脚本运行在后台线程的机制，能够使得主线程不被阻塞，提升应用的性能。

如何使用Worker?

1. 首先需要创建一个webWorker
   const worker = new Worker('worker.js');
2. 然后可以使用postMessage()向webWorker发送消息
   worker.postMessage({ message: 'Hello Worker!' });
3. 使用onMessage来接收worker发送回来消息
   worker.onmessage = function(event) { console.log('Received from Worker:', event.data); };
4. 如果不需要了，可以使用terminate来终止
   worker.terminate();

worker 与主线程是如何通信的

Web Worker 与主线程之间的通信是通过消息传递的方式进行的，采用的是异步的 postMessage 方法。

在 worker 中进行的工作有哪些限制

1. 无法直接访问 DOM Worker 在后台线程中运行，无法访问主线程中的 DOM，也不能直接进行 UI 更新。这是为了确保 Worker 不会干扰主线程的 UI 渲染。
2. 限制的 API Worker 不能访问 window 对象，限制了它访问一些 API（如 localStorage, document, alert）。但可以访问其他如 XMLHttpRequest 和 fetch，以及 WebSocket 等一些网络相关的 API。
3. 没有直接的 UI 操作能力 由于 Web Worker 是在一个独立的线程中运行的，它不能直接操作页面上的 UI 元素，只能通过消息来与主线程交互，主线程再去更新 UI。
4. 共享内存和并发问题 Web Worker 与主线程的数据是通过消息传递的，传递的数据会被复制，而不是引用。因此，大量数据的传递可能会导致性能瓶颈。如果需要共享内存，可以使用 SharedArrayBuffer 和 Atomics 进行低层次的并发控制。
5. Worker 生命周期 Worker 是在创建时启动的，执行完任务后需要被终止。否则，它会一直在后台运行，消耗系统资源。
6. 没有同步通信 postMessage 是异步的，不能直接返回结果。这意味着 Worker 运行时，主线程无法等待结果，而是通过监听返回事件来接收结果。