随着移动浏览器的不断发展，越来越多的网站和应用程序将它们的目光转向了 PWA（渐进式 Web 应用程序），以提供更好的离线体验和更快的加载速度。然而，PWA 应用程序的性能问题往往是一个挑战。当网页变得越来越复杂和功能强大时，其性能和响应速度也会受到影响。这时候，Web Workers 是一个非常受欢迎的解决方案，以提升 PWA 应用程序的性能。
Web Workers - 什么是它？
Web Workers 是一个能够在后台线程中执行 JavaScript 代码的 API。在 Web Workers 中，代码可以被分离到另一个线程中，避免阻塞主 UI 线程，从而提高 Web 应用程序的响应速度。Web Workers 和普通的 JavaScript 代码很相似，但它们可以在后台执行，并且不能访问 DOM 元素。因此，Web Workers 的主要应用领域是处理大量计算密集型任务和 I/O 操作等。
Web Workers - 如何使用？
通过简单地实例化一个 Worker 对象，您就可以在后台线程中运行 JavaScript 代码：
const worker = new Worker('worker.js');在这个示例中，'worker.js' 是一个你想运行的 JS 文件。在这个文件中，你可以使用标准 JavaScript 语法来编写你的代码，但你需要使用特殊的 postMessage() 方法来将消息发送回主线程。
// worker.js 文件
let result = 0;
for (let i = 0; i < 1000000000; i++) {
result += i;
}
postMessage(result);在这个示例中，我们计算了 1 到 10 亿之间的所有数字的总和，然后使用 postMessage() 方法将结果发送回主线程。
在主线程中，你需要监听 'message' 事件来获取从 Web Worker 中发送回的消息。
worker.addEventListener('message', event => {
console.log(`The result is ${event.data}`);
});在这个示例中，我们在控制台中打印了 Web Worker 发送正确的结果。
Web Workers - 在 PWA 中的应用
PWA 应用程序的一个常见问题是，当您同时进行多项处理时，您的应用程序可能会变得卡顿或响应速度变慢。例如，当您需要同时处理大量图像或数据时，这可能会导致应用程序似乎停止响应。这时，Web Workers 可以帮助您避免此问题。
以下是一个如何使用 Web Workers 来在 PWA 应用程序中优化性能的示例。
示例说明
在这个示例中，您将研究如何使用 Web Workers 来优化图像处理。
第一步：创建一个简单的 PWA Web 应用程序
您可以使用现有的 PWA 库（如 Workbox）来创建一个简单的 PWA 应用程序。这里是一个基本示例：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
-----------------------
-------------------------------
------------------ -- -
-------------------- ------ ----------- -- --------------
--
------------ -- -
-------------------- ------ ------------ ------- -- -------
---
---
-第二步：使用 Web Workers 加载图像
在 Web Worker 中处理图像可以避免阻塞主线程。以下示例演示了如何使用 Web Workers 来加载并处理图像：
-- -------------------- ---- -------
-- ------ --
----- ------ - --- --------------------
-------- -------------- -
----- --- - --- --------
---------- - -- -- -
--------------------
------ ----
---- ---
---
--
------- - ----
-在这个示例中，我们首先通过创建一个 Image 对象来加载图像。一旦图像被加载到内存中，我们就将其传递给 Web Worker。
以下是 worker.js 文件的代码：
-- -------------------- ---- -------
-- --------- --
-------- ------------------- -
----- ----- - -----------------
----- --- - ---------------
----- ------ - --- ---------------------------- --------------
----- --- - ------------------------
-------------------- -- ---
----- --------- - ------------------- -- ------------- ---------------
----- ------ - -
---- ----
------- --------------
--
--------------------
-
--------------------------- --------------在这个示例中，我们将已加载图像传递给一个 Web Worker 来处理。在 Web Worker 中，我们提取了每个像素的颜色，并将其发送回主线程。
第三步：使用 Web Workers 渲染图像
一旦您已经使用 Web Workers 将图像数据加载到内存中，下一步是使用 OffscreenCanvas（该 API 允许您在 Web Workers 中呈现图像）在后台渲染图像。
-- -------------------- ---- -------
-- ------ --
-------- ------------------- ------- -
----- ------ - --- --------------------
--------------------
------- -------
------- ------
---
-
------------------- --------在这个示例中，我们使用 OffscreenCanvas 的上下文来呈现图像。我们使用一个新的 Web Worker 来渲染图像，并在渲染完毕后将结果发送回主线程。
以下是 worker.js 文件的代码：
-- -------------------- ---- ------- -- --------- -- -------- -------------------- - ----- ------ - ------------------ ----- ------ - ------------------ ----- --- - ------------------------ ----- --------- - --- ----------------- ------------- --------------- --------------------------- -- --- -- ------------ -------------------- - --------------------------- ---------------
在这个示例中，我们提取了像素数据，并将其用作一个新的 ImageData 对象。然后，我们将图像数据绘制到 OffscreenCanvas 上下文中，并将渲染结果发送回主线程。
结论
使用 Web Workers 可以有效地将计算密集型任务从主 UI 线程中分离出来，从而提高 PWA 应用程序的性能和响应速度。无论您是需要处理大量图像、数据，还是需要进行一些复杂的计算，Web Workers 都是从 Web 应用程序中提高性能最有效的解决方案之一。
本文中的示例代码非常的简单，但无论在项目中引入 Web Workers 总会有所帮助。记得在开发中带上一些复杂计算量的任务，看看加入 Web Workers 是否有所提升。最后，希望大家可以成功地将 Web Workers 的设计模式应用到自己的 PWA 应用程序中，从而提高其性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67064380d91dce0dc85ac9e2