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

大淘客构建自己的网站网上交易系统

wzjs 2025/9/8 6:22:04

大淘客构建自己的网站,网上交易系统,咋做网站,如何做自适应网站红宝书第二十六讲：详解Web Workers：专用、共享、Service Worker 资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、专用Worker（Dedicated Worker） 每个页面的独立…

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