Progressive Web App（PWA）是一种新兴的 Web 应用，具有许多优势，例如可在离线时访问、可在本地安装、快速响应等等。然而，为了实现这些功能，PWA 应用需要使用一些高级功能，如 Web Workers。在本文中，我们将详细讨论 Web Workers 和它们在 PWA 应用中的作用，同时提供示例代码和具体的指导意义。
什么是 Web Workers?
Web Workers 是用于在后台执行 JavaScript 的简单机制。与普通的 JavaScript 脚本不同，Web Workers 不会阻塞主线程，因此不会影响应用的响应性能。Web Workers 是在单独的线程中运行的，可以执行 CPU 密集型任务或需要大量计算资源的任务，而不会阻塞主应用程序线程。
Web Workers 对于处理需要复杂算法或大量数据运算的 PWA 应用来说非常有用。它们可以帮助减少应用程序的加载时间并提高应用程序的性能，从而提供更好的用户体验。
Web Workers 的类型
Web Workers 有两种类型：Dedicated Workers 和 Shared Workers。
Dedicated Workers 只能被一个脚本使用。只有它们本身可以读取和修改它们自己的数据，这些数据不能被与其他 Dedicated Workers 共享。
Shared Workers 则可以被多个脚本使用。因此，不同的脚本可以通过这些 Shared Workers 共享相同的数据。
在本文中，我们将使用 Dedicated Workers。
如何使用 Web Workers?
在我们实际应用 Web Workers 的时候，首先要了解如何创建 Web Workers 以及如何通过它们实现并行处理任务。在下面的代码示例中，我们演示了如何创建 Dedicated Workers 并向它们发送信息：
index.html:
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Workers Example</title>
</head>
<body>
<h1>Web Workers Example</h1>
<p>Result: <span id="result"></span></p>
<script>
const worker = new Worker('worker.js');
worker.postMessage('Hello');
worker.onmessage = (event) =>{
document.getElementById('result').innerHTML = event.data;
}
</script>
</body>
</html>worker.js:
self.onmessage = (event) => {
let res = '';
for(let i=0; i<10000000; i++) {
res += Math.random();
}
self.postMessage('Result: '+res.length);
}上述代码演示了如何在 index.html 中创建一个新的 Dedicated Worker，并向它发送消息。worker.js 中的代码首先在后台执行复杂的计算操作，然后通过 postMessage() 方法将结果发送回来。在 index.html 中，我们监听 Worker 对象的 onmessage 事件并在事件处理程序中更新页面上的相应元素。
PWA 应用中使用 Web Workers
明白了 Web Workers 的运作原理，我们可以开始探讨如何在 PWA 应用中使用它们。
假设我们的 PWA 应用中有一个执行复杂计算的函数。如果我们在主线程中执行这个函数，可能会使得这个函数阻塞主线程，从而影响应用程序的响应性能。为了避免这个问题，我们可以将这个函数放在 Web Worker 中，并让 Dedicated Worker 在后台运行。
现在，我们来看一下在 PWA 应用中如何使用 Web Workers，下面的示例演示了如何在 PWA 应用中使用 Web Workers 来执行后台运算：
// javascriptcn.com 代码示例
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("worker.js");
}
// 通过 worker.postMessage 向 Dedicated Worker 发送数据
w.postMessage({num: document.getElementById("num").value});
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}这个应用程序提供了一个输入框和一个“开始”按钮。当用户输入一个数字并单击开始按钮时，Dedicated Worker 将在后台执行复杂的计算，并将结果发送回主线程。与前面的示例快速上手不同，这个示例代码更为复杂，但是更加贴近实际的使用。
总结
Web Workers 是 PWA 应用程序中优化性能的关键工具之一。它们可以帮助我们将一些需要大量工作量的任务放在后台并发运行，从而提高 PWA 应用程序的响应性能并给用户更好的使用体验。本文简要地介绍了 Web Workers 的使用方式，并且提供了演示代码，可以让读者更好地理解如何在 PWA 应用程序中使用 Web Workers。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c78e97d4982a6eb5f6853