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

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


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

五、注意事项
  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并非轻量级线程 ↩︎

http://www.dtcms.com/a/108629.html

相关文章:

  • PyTorch中Linear全连接层
  • 视频设备轨迹回放平台EasyCVR如何搭建公共娱乐场所远程视频监控系统
  • 铁路语义分割数据下载RailSem19: A Dataset for Semantic Rail Scene Understanding
  • 使用Android 原生LocationManager获取经纬度
  • 教育软件 UI 设计:打造吸睛又实用的学习入口
  • SELinux
  • Leetcode-100 二分查找常见操作总结
  • 数据点燃创新引擎:数据驱动的产品开发如何重塑未来?
  • Airflow量化入门系列:第一章 Apache Airflow 基础
  • 红宝书第二十五讲:客户端存储(Cookie、localStorage、IndexedDB):浏览器里的“记忆盒子”
  • Leetcode 6233 -- DFS序列 | 两遍DFS
  • Vue中JSEncrypt 数据加密和解密处理
  • Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
  • wireshak抓手机包 wifi手机抓包工具
  • linux 时钟
  • 【爬虫】网页抓包工具--Fiddler
  • 【Audio开发二】Android原生音量曲线调整说明
  • LInux基础指令(二)
  • 【VS+Qt】vs2022打开 vs2015项目
  • FastAPI中Pydantic异步分布式唯一性校验
  • 机器视觉调试——现场链接相机(解决各种相机链接问题)
  • 自然语言处理(22:(第六章2.)​seq2seq模型的实现​)
  • 图片懒加载、无限滚动加载、监听元素进入视口加载数据。「IntersectionObserver」
  • scala编程语言
  • 服务器数据恢复—Raid6阵列硬盘故障掉线,上层虚拟机数据如何恢复?
  • linux-firewalld防火墙允许端口
  • 【SLAM经典算法详解】Ubuntu 20.04部署LeGO-LOAM:从环境配置到KITTI适配,解决常见编译错误
  • 从零开发美颜SDK:美颜滤镜API的核心技术与实现
  • 多视图几何--立体校正--Fusiello方法
  • CMake学习--如何在CMake中编译静态库、动态库并在主程序中调用