红宝书第二十六讲：详解Web Workers：专用、共享、Service Worker
资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲
一、专用Worker（Dedicated Worker）
每个页面的 独立线程，适合处理耗时任务（如大量计算），不与其它页面共享 12。
生命周期：随页面关闭而销毁。
示例1：主线程与专用Worker通信
// 主页面代码（main.js）
const worker = new Worker('worker.js');
// 发送数据给Worker
worker.postMessage('开始计算1+2');
// 接收Worker返回的数据
worker.onmessage = (e) => {
console.log('结果:', e.data); // 输出3
};
// worker.js代码
self.onmessage = (e) => {
const result = eval(e.data); // 危险操作！仅示例用
self.postMessage(result);
};
🔔 特性：
- 不能直接操作DOM（可在主线程间接操作）
- 文件需同源2
二、共享Worker（Shared Worker）
示意图
示例2：跨页面共享状态
// 主页面A、B、C使用相同代码
const sharedWorker = new SharedWorker('shared-worker.js');
sharedWorker.port.start(); // 必须调用
sharedWorker.port.postMessage('页面A说你好');
sharedWorker.port.onmessage = (e) => {
console.log('收到消息:', e.data);
};
// shared-worker.js
let connections = 0;
self.onconnect = (e) => {
const port = e.ports[0];
connections++;
port.postMessage(`当前连接数：${connections}`);
port.onmessage = () => {
// 处理消息...
};
};
三、Service Worker：网络请求守卫者
主要用于 拦截请求（缓存静态文件）、支持离线访问 和 推送通知35。
生命周期流程
示例3：注册Service Worker并缓存页面
// 主页面注册
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(() => console.log('注册成功'));
}
// sw.js代码
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll(['/index.html', '/style.css']);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
⚠️ 注意：必须通过HTTPS（本地localhost除外）5。
四、三者的核心区别
| 类型 | 作用域 | 典型用途 | 通信方式 |
|---|---|---|---|
| 专用Worker | 单个页面 | 复杂计算/图像处理 | postMessage |
| 共享Worker | 同源多页面 | 多标签页同步数据 | port.postMessage |
| Service Worker | 整个网站 | 离线缓存/推送通知 | 事件监听器（如fetch） |
五、注意事项
目录：总目录
上篇文章：红宝书第二十五讲：客户端存储（Cookie、localStorage、IndexedDB）：浏览器里的“记忆盒子”
下篇文章：红宝书第二十七讲：详解WebAssembly与asm.js如何实现高效执行
脚注
《JavaScript高级程序设计（第5版）》列举Service Worker的主要应用场景 ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》描述专用Worker的独立线程特性 ↩︎ ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》区分三种Worker的功能差异 ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》解释共享Worker支持多上下文通信 ↩︎
《JavaScript高级程序设计（第5版）》说明Service Worker通过
navigator.serviceWorker管理 ↩︎ ↩︎《JavaScript高级程序设计（第5版）》指出Worker并非轻量级线程 ↩︎