Web Workers和Service Workers都是运行在浏览器后台的脚本，不改变页面结构，但能解决两类常见问题：一是主线程被复杂计算阻塞导致页面卡顿，二是网络不稳定或离线时页面无法加载。前者由Web Workers处理，后者主要靠Service Workers实现。
什么是Web Workers
Web Workers允许我们在独立于主线程的后台线程中执行JavaScript代码。常见类型包括专用Worker、共享Worker和Audio Worklet等。主线程通过postMessage与Worker通信，适合处理图像编码、大数据排序等耗时任务。
基本用法示例
下面演示如何创建专用Worker并在主线程与Worker之间传递消息：
// main.js 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });
worker.onmessage = function (event) {
console.log('收到Worker结果:', event.data);
};
worker.onerror = function (error) {
console.error('Worker出错:', error.message);
};
// worker.js Worker线程代码
onmessage = function (event) {
const list = event.data.data;
// 模拟耗时计算：求和
const sum = list.reduce(function (a, b) { return a + b; }, 0);
postMessage({ result: sum });
};
什么是Service Workers
Service Workers是一种特殊的Worker，充当浏览器与网络之间的代理。它可以拦截页面请求、缓存静态资源，并在离线时返回缓存内容。需要注意的是，Service Workers只能在HTTPS或localhost环境下注册。
注册与缓存示例
以下代码展示如何注册Service Worker并在安装阶段缓存应用外壳：
// 主线程注册
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function () {
console.log('Service Worker注册成功');
});
}
// sw.js Service Worker脚本
const CACHE_NAME = 'app-shell-v1';
const urlsToCache = ['/', '/styles.css', '/app.js'];
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
})
);
});
它们如何提升能力
并行处理能力
Web Workers将CPU密集型任务移出主线程，使页面在运算时仍能响应用户操作。多个Worker还可同时运行，利用多核CPU实现真正并行。
离线体验
Service Workers通过缓存策略和请求拦截，让用户关闭网络后依然能访问已缓存页面与数据，配合后台同步还能延后提交表单。
| 特性 | Web Workers | Service Workers |
|---|---|---|
| 运行目的 | 后台计算 | 网络代理与缓存 |
| 是否可拦截请求 | 否 | 是 |
| 访问DOM | 否 | 否 |
使用注意点
- Worker中不能直接操作DOM，也不能使用window对象的部分属性。
- Service Worker生命周期包含注册、安装、激活，更新时需修改缓存版本号。
- 调试时可打开浏览器开发者工具的Application面板查看Worker状态。
合理搭配Web Workers与Service Workers，可以让Web应用在性能和可用性上接近原生体验。
Web_WorkersService_Workers离线缓存修改时间：2026-07-29 08:51:21