当前位置：首页 > news >正文

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

news 2025/7/11 8:59:32

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

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

一、专用Worker（Dedicated Worker）

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

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

示例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（可在主线程间接操作）
文件需同源²

二、共享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：网络请求守卫者

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

生命周期流程

示例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除外）⁵。

四、三者的核心区别

类型	作用域	典型用途	通信方式
专用Worker	单个页面	复杂计算/图像处理	`postMessage`
共享Worker	同源多页面	多标签页同步数据	`port.postMessage`
Service Worker	整个网站	离线缓存/推送通知	事件监听器（如fetch）