红宝书第二十六讲：详解Web Workers：专用、共享、Service Worker

红宝书第二十六讲：详解Web Workers：专用、共享、Service Worker

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、专用Worker（Dedicated Worker）

每个页面的 独立线程，适合处理耗时任务（如大量计算），不与其它页面共享 ^[1][2]。

生命周期：随页面关闭而销毁。

示例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）

多个页面共享的线程（如多个标签页共用聊天室连接）^[3][4]。

示意图

flowchart TB
    标签页1 --> 共享Worker
    标签页2 --> 共享Worker
    共享Worker --> Websocket服务器

示例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：网络请求守卫者

主要用于 拦截请求（缓存静态文件）、支持离线访问 和 推送通知^[3][5]。

生命周期流程

flowchart LR
    注册 --> 安装(Install) --> 激活(Activate) --> 拦截请求

示例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]。

四、三者的核心区别

五、注意事项

1. 无法访问DOM：所有Worker都不能直接操作DOM^[2]
2. 避免滥用Worker：创建过多Worker会消耗内存^[6]
3. 生命周期管理：Service Worker需要处理更新策略^[1]

目录：总目录
上篇文章：红宝书第二十五讲：客户端存储（Cookie、localStorage、IndexedDB）：浏览器里的“记忆盒子”

脚注

1. 《JavaScript高级程序设计（第5版）》列举Service Worker的主要应用场景 ↩ ↩

2. 《JavaScript高级程序设计（第5版）》描述专用Worker的独立线程特性 ↩ ↩ ↩

3. 《JavaScript高级程序设计（第5版）》区分三种Worker的功能差异 ↩ ↩

4. 《JavaScript高级程序设计（第5版）》解释共享Worker支持多上下文通信 ↩

5. 《JavaScript高级程序设计（第5版）》说明Service Worker通过navigator.serviceWorker管理 ↩ ↩

6. 《JavaScript高级程序设计（第5版）》指出Worker并非轻量级线程 ↩