Web Worker
Web Worker是HTML5提供的一个API，它允许JavaScript运行在后台线程中，独立于主线程，从而实现多线程编程，提高Web应用程序的性能和响应速度。
Web Worker的特点如下：
- 独立于主线程
Web Worker可以在后台线程中运行，不会阻塞主线程的执行，从而提高Web应用程序的响应速度。
- 可以并行执行
Web Worker的多线程模型可以使得多个线程并行执行，从而提高Web应用程序的性能。
- 不能直接访问DOM和BOM
Web Worker不能直接访问DOM和BOM，因为这些API都是基于浏览器的主线程实现的，但是Web Worker可以通过postMessage方法和onmessage事件与主线程进行通信，从而实现数据的传递和交互。
- 可以引入外部脚本
Web Worker可以通过importScripts方法引入外部脚本，从而扩展其功能。
使用场景
- 大量计算密集型任务
Web Worker适合用于执行大量计算密集型的任务，如图像处理、音视频编解码等。
- 后台数据处理
Web Worker可以在后台线程中处理数据，从而不影响主线程的执行。例如，可以使用Web Worker来处理数据的压缩、解压、加密等操作。
- 异步网络请求
使用Web Worker可以在后台线程中执行异步网络请求，从而避免阻塞主线程。例如，可以使用Web Worker来处理大量的WebSocket连接。
示例
以下是一个简单的Web Worker示例，用于计算斐波那契数列的第n项：
在HTML文件中：
<!DOCTYPE html>
<html>
<head>
<title>Web Worker示例</title>
</head>
<body>
<label for="n">输入n：</label>
<input type="number" id="n">
<button id="calculate">计算</button>
<div id="result"></div>
<script>
// 创建Web Worker对象
const worker = new Worker('worker.js');
// 获取HTML元素
const nInput = document.getElementById('n');
const calculateBtn = document.getElementById('calculate');
const resultDiv = document.getElementById('result');
// 监听Web Worker返回的消息
worker.onmessage = function(event) {
resultDiv.innerHTML = `斐波那契数列的第${nInput.value}项为${event.data}`;
};
// 点击计算按钮时，向Web Worker发送消息
calculateBtn.onclick = function() {
worker.postMessage(nInput.value);
};
</script>
</body>
</html>
在worker.js文件中：
// 监听主线程发送的消息
onmessage = function(event) {
const n = parseInt(event.data);
const result = fibonacci(n);
// 向主线程发送消息
postMessage(result);
};
// 计算斐波那契数列的第n项
function fibonacci(n) {
if (n == 0 || n == 1) {
return n;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
当用户在页面中输入一个正整数n并点击计算按钮时，主线程会向Web Worker发送一个消息，Web Worker会计算斐波那契数列的第n项并向主线程发送一个消息，主线程在接收到消息后更新页面中的结果。这个过程中，Web Worker在后台线程中运行，不会阻塞主线程的执行，从而提高了Web应用程序的响应速度。
Service Worker
示例
下面是一个简单的Service Worker示例，它可以缓存并离线访问指定的URL（假设我们要缓存的URL是/example）：
// 注册Service Worker
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js").then(function(registration) {
console.log("Service Worker 注册成功：", registration.scope);
}).catch(function(error) {
console.log("Service Worker 注册失败：", error);
});
}
// 缓存指定的URL
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open("example-cache").then(function(cache) {
return cache.addAll([
"/example",
"/styles.css",
"/script.js",
"/image.png"
]);
})
);
});
// 拦截网络请求并返回缓存的响应
self.addEventListener("fetch", function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
// 清理过期的缓存
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName !== "example-cache") {
return caches.delete(cacheName);
}
})
);
})
);
});
在这个示例中，我们首先注册了一个Service Worker，并在install事件中缓存了指定的URL和相关资源。在fetch事件中，我们拦截了所有网络请求，并尝试从缓存中获取相应的响应。如果缓存中没有对应的响应，则继续发起网络请求。在activate事件中，我们清理了过期的缓存。
通过这个示例，我们可以看到Service Worker的基本使用方式，它可以帮助我们实现离线缓存和网络代理等高级功能，从而提高Web应用程序的可靠性和性能。
参考
-
ServiceWorker的介绍：juejin.cn/post/713083…
-
ServiceWorker的缓存、拦截等实例：juejin.cn/post/716589…
