红宝书第二十六讲:详解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

示意图
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:网络请求守卫者

主要用于 拦截请求(缓存静态文件)、支持离线访问推送通知35

生命周期流程
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


四、三者的核心区别

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

五、注意事项

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

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

下篇文章:红宝书第二十七讲:详解WebAssembly与asm.js如何实现高效执行

脚注


  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并非轻量级线程

kovli
10 声望5 粉丝