红宝书第二十六讲:详解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并非轻量级线程 ↩
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。