Web Workers 主要有两种类型：
1. Dedicated Workers（专用 Web Workers）:
- 这是最常见的类型，每个 Dedicated Worker 与创建它的脚本有独立的全局上下文。它们可以通过消息传递与主线程通信。
// 在主线程中创建 Dedicated Worker
const worker = new Worker('worker.js');
// 在主线程中向 Worker 发送消息
worker.postMessage('Hello from main thread!');
// 在 Worker 中监听消息
self.addEventListener('message', function(event) {
console.log('Message from main thread:', event.data);
});
// 在 Worker 中向主线程发送消息
self.postMessage('Hello from worker!');
2. Shared Workers（共享 Web Workers）:
- 共享 Web Workers 被多个脚本共享，可以用于在不同的浏览器窗口或标签之间进行通信。它们有一个共享的全局上下文。
// 在脚本中连接到共享 Worker
const worker = new SharedWorker('shared-worker.js');
// 在脚本中向 Shared Worker 发送消息
worker.port.postMessage('Hello from main thread!');
// 在 Shared Worker 中监听消息
self.addEventListener('connect', function(event) {
const port = event.ports[0];
port.addEventListener('message', function(event) {
console.log('Message from main thread:', event.data);
});
port.start();
});
// 在 Shared Worker 中向脚本发送消息
self.addEventListener('message', function(event) {
console.log('Message from main thread:', event.data);
});
Web Workers 主要用于执行一些计算密集型或大规模数据处理的任务，以避免阻塞主线程，提高用户体验。然而，Web Workers 中不能直接访问 DOM，因为它们在独立的线程中运行，DOM 操作必须通过消息传递来实现。
在使用 Web Workers 时，需要注意消息传递的开销，因为数据需要在主线程和 Worker 之间进行拷贝。
转载请注明出处：http://www.zyzy.cn/article/detail/3682/HTML5