请解释 Web Workers 的作用和用法。如何创建和使用 Web Workers？-JavaScript中文网-JavaScript教程资源分享门户

请解释 Web Workers 的作用和用法。如何创建和使用 Web Workers？

推荐答案

Web Workers 允许在后台线程中运行脚本，而不会阻塞主线程（UI线程）。这对于执行耗时操作，例如复杂的计算、数据处理或网络请求，非常有用，从而提高 Web 应用的响应速度和用户体验。

创建和使用 Web Workers 的基本步骤如下：

创建 Worker 脚本： 首先，创建一个独立的 JavaScript 文件（例如 worker.js），这个文件包含将在 Worker 线程中运行的代码。
主线程创建 Worker 对象： 在主线程的 JavaScript 代码中，使用 new Worker('worker.js') 创建一个 Worker 对象，指定 Worker 脚本的路径。
与 Worker 通信：
- 主线程通过 worker.postMessage(message) 向 Worker 发送消息。
- Worker 线程通过 self.onmessage = function(event) { ... } 接收消息。
- Worker 线程通过 self.postMessage(message) 向主线程发送消息。
- 主线程通过 worker.onmessage = function(event) { ... } 接收消息。
结束 Worker：
- 主线程使用 worker.terminate() 立即终止 Worker。
- Worker 线程使用 self.close() 自行终止。

示例代码：

worker.js (Worker 脚本):

-- -------------------- ---- -------
-------------- - --------------- -
  ----- ---- - -----------
  ------------------- ----------- ------
  
  -- --------
  --- ------ - --
  ------- ---- - - ----------- ---- -
    ------ -- --
  -

  ---------------------------------
--

主线程 JavaScript 代码:

-- -------------------- ---- -------
----- ------ - --- --------------------

---------------- - --------------- -
  --------------------- ------------
--

---------------------------

-- ---- ------
------------- -- -
    -------------------
    ------------------- -------------
-- ------

本题详细解读

Web Workers 的作用

Web Workers 的核心作用是实现多线程，或者更准确地说，是并发执行 JavaScript 代码。在浏览器中，默认情况下，所有的 JavaScript 代码都在主线程中运行。主线程负责处理用户界面的更新、事件处理等，如果主线程执行了耗时的操作（如循环计算、复杂动画等），会导致页面卡顿、无响应，影响用户体验。

Web Workers 将耗时操作转移到独立的后台线程中执行，从而保持主线程的流畅运行。这使得 Web 应用可以更好地利用多核 CPU 的能力，提升整体性能。

Web Workers 的限制

虽然 Web Workers 功能强大，但它也存在一些限制：

不能直接访问 DOM： Web Workers 不能直接访问主线程中的 DOM 元素、 window 对象、 document 对象等。它们只能通过消息传递和主线程进行数据交互。
有限的 API： Web Workers 拥有自己的全局作用域 (self)，支持一部分浏览器 API，但不是全部。例如，它们不支持 localStorage 或 sessionStorage。
同源策略： Web Workers 脚本必须与主线程脚本同源。

Web Workers 的类型

主要有两种类型的 Web Workers:

Dedicated Workers: 这是最常见的类型，一个 Dedicated Worker 只能被创建它的脚本所访问。上述示例代码使用的就是 Dedicated Worker。
Shared Workers: Shared Workers 可以被多个脚本共享访问，即使这些脚本来自不同的浏览上下文（例如不同的标签页或 iframe）。Shared Workers 的创建和使用与 Dedicated Worker 稍有不同。

如何创建和使用 Web Workers

如 推荐答案 中所述，创建和使用 Web Workers 的主要步骤包括创建 Worker 脚本、创建 Worker 对象、进行消息传递和终止 Worker。

创建 Worker 脚本

Worker 脚本是一个独立的 JavaScript 文件，包含了将在 Worker 线程中执行的代码。该脚本内部使用 self 对象代表 Worker 的全局作用域。self.onmessage 监听来自主线程的消息， self.postMessage 用于向主线程发送消息。

主线程创建 Worker 对象

在主线程的 JavaScript 代码中，需要使用 new Worker('worker.js') 创建一个 Worker 对象，其中 worker.js 是 Worker 脚本的路径。创建 Worker 对象时，浏览器会启动一个新的线程来运行该脚本。

通信

Web Workers 和主线程之间的通信是通过消息传递机制实现的。

主线程向 Worker 发送消息: 使用 worker.postMessage(message)， message 可以是任何 JavaScript 对象。
Worker 接收消息: 使用 self.onmessage = function(event) { ... }。 event 对象包含了 data 属性，其中存储着主线程发送过来的消息。
Worker 向主线程发送消息: 使用 self.postMessage(message)，这里的 message 同样可以是任何 JavaScript 对象。
主线程接收消息: 使用 worker.onmessage = function(event) { ... }。 event 对象包含了 data 属性，其中存储着 Worker 发送的消息。

终止 Worker

为了释放资源，不再需要 Worker 时应该及时终止它。

主线程终止 Worker: 使用 worker.terminate() 方法。这会立即终止 Worker 的执行。
Worker 自身终止: 使用 self.close() 方法。通常用于 Worker 完成工作后自行关闭。

Shared Workers 的使用

Shared Workers 可以被多个脚本共享，主要使用方式如下：

创建 Shared Worker: 使用 new SharedWorker('shared-worker.js') 来创建，并且通过 port.start() 开启消息通道。
通信: 每个连接到 Shared Worker 的脚本，都会获取到 sharedWorker.port 对象，通过该 port 对象使用 port.postMessage 发送消息， port.onmessage 接收消息，并且需要使用 port.start() 开启消息通道。

Shared Worker 内部，通过 onconnect 事件监听新的连接，然后使用port.postMessage 和 port.onmessage 处理消息。

使用 Web Workers 的场景

Web Workers 适用于以下场景：

耗时的计算任务: 例如图像处理、加密解密、大数据分析。
大量数据处理: 例如数据排序、过滤、搜索。
复杂的动画和渲染: 将计算密集型的渲染操作转移到 Worker 线程。
后台网络请求: 在后台进行网络数据获取，避免阻塞主线程。
其他需要在后台运行的任务: 任何需要长时间运行、不影响用户界面的任务。

纠错
反馈