Web Worker 概览

<ph type="x-smartling-placeholder">

到目前为止，本课程中的大部分内容侧重于概念，例如 一般 HTML 性能考虑因素、资源提示、各种优化措施 有助于缩短初始网页加载时间以及提高对用户的响应速度的资源类型 以及延迟加载特定资源。

不过，性能的一个方面是 这也是 Web Worker 在改进 输入响应速度，我们将在下一单元中介绍相关内容。

JavaScript 通常被描述为一种单线程语言。在实践中， 是指主线程，即浏览器处理脚本的单个线程 您在浏览器中看到的大部分工作。这项工作包含涉及的任务 例如脚本编写、某些类型的呈现工作、HTML 和 CSS 解析， 以及其他类型的可提升用户体验的面向用户的工作。事实上 浏览器会使用其他线程来完成您作为开发者没有完成的工作 （例如 GPU 线程）。

涉及 JavaScript 时，您通常只能 主线程（但默认情况下仅限该线程）你可以注册和使用 额外线程。实现多线程处理的功能 JavaScript 称为 Web Workers API。

如果您的工作需要处理大量的计算开销， 就无法在主线程上运行，否则会导致耗时较长的任务 无响应。此类任务无疑会影响与 Next Paint (INP) 有助于了解您何时可以完成 完全在主线程外完成的这样做有助于腾出更多空间 在主线程上执行其他任务，以便加快用户互动速度。

本单元和展示具体用例的后续演示涵盖了 Web 应用 worker。此演示本身展示了如何使用 Web Worker 执行 如何在主线程之外从 JPEG 文件读取图片元数据，以及如何 可以将相关元数据传回主线程以供用户查看。

Web Worker 的启动方式

Web Worker 可通过实例化 Worker 类进行注册。当您执行 因此，您可以指定 Web Worker 代码所在的位置，浏览器会加载 然后为其创建新线程。由此产生的线程通常会调用 工作器线程。

const myWebWorker = new Worker('/js/my-web-worker.js');

然后，您可以在 worker 的 JavaScript 文件（在本例中为 my-web-worker.js）中 然后编写在单独的工作器线程中运行的代码。

Web Worker 的限制

与在主线程上运行的 JavaScript 不同，Web Worker 无法直接访问 window 上下文。并且对所提供 API 的访问权有限。网络 worker 受到以下限制条件的约束：

  • Web Worker 无法直接访问 DOM。
  • Web 工作器可以通过消息传递与 window 上下文通信 流水线，这意味着 Web Worker 可以通过某种方式间接访问 DOM。
  • Web Worker 的范围是 self，而不是 window。
  • Web Worker 作用域确实有权访问 JavaScript 基元和 以及 fetch 等 API，以及相当多的 其他 API。

Web Worker 如何与 window 通信

Web Worker 可以与主线程的 window 进行通信 通过消息传递流水线传递上下文。通过此流水线，你可以将数据 来自主线程和 Web Worker。为了将数据从 Web Worker 发送到 主线程上，您可以在 Web Worker 的上下文中设置 message 事件 (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

然后，在主线程上的 window 上下文内的脚本中，您可以接收 使用另一个 message 事件从 Web 工作器线程中返回消息：

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Web Worker 的消息传递流水线是各种 Web 攻击的逃逸方法 工作器上下文。使用它，您可以将数据从 Web Worker 发送到 window 更新 DOM 或执行其他必须在 主线程。

知识测验

Web Worker 在哪个线程上运行？

主线程。
请重试。
它自己的线程（也称为“Web 工作器线程”）。
正确！
GPU 线程。
请重试。

Web Worker 可以访问哪些内容？

JavaScript 基元，例如数组和对象。
正确！
window 上下文中可用的 API 的严格子集， 包括fetch。
正确！
window 上下文，但只能间接。
正确！

Web Worker 如何访问“window”上下文？

直接通过引用 window 对象的成员。
请重试。
Web Worker 无法以任何方式访问 window。
请重试。
通过由 postMessage 协助的消息传递流水线 方法 (self)。
正确！

后续内容：一个具体的 Web Worker 用例

下一单元详细介绍了一个具体的 Web Worker 用例， 有所帮助。在该模块中，Web Worker 用于从 指定网址，并在 Web Worker 中读取其 Exif 元数据。然后，系统会将这些数据 返回到主线程，以便显示给用户