自己电脑做网站 路由器上海个人网站建立
红宝书第二十六讲：详解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）
多个页面共享的线程（如多个标签页共用聊天室连接）34。
示意图
示例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） |
五、注意事项
- 无法访问DOM：所有Worker都不能直接操作DOM2
- 避免滥用Worker：创建过多Worker会消耗内存6
- 生命周期管理：Service Worker需要处理更新策略1
目录：总目录
上篇文章：红宝书第二十五讲：客户端存储（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并非轻量级线程 ↩︎