在现代 Web 开发中，JavaScript 的单线程特性常常导致一些问题，尤其是在处理复杂或耗时的任务时。当一个脚本运行时间过长，整个页面可能会变得无响应，导致用户体验下降。为了解决这一问题，HTML5 引入了 Web Worker，它允许 JavaScript 在后台线程中运行，从而充分利用多核 CPU 的优势，避免页面假死现象。

一、什么是 Web Worker？

Web Worker 是一种在后台线程中运行的 JavaScript 代码，它允许 Web 应用程序具备后台处理能力。通过 Web Worker，可以将耗时的任务分配给后台线程，从而避免阻塞主线程，提高页面的响应性和性能。

（一）特点

• 后台运行：在后台线程中运行，不影响主线程的执行。
• 多线程支持：充分利用多核 CPU，提高处理效率。
• 通信机制：通过 postMessage 和 onmessage 方法与主线程通信。
• 独立作用域：每个 Worker 都有自己的全局作用域，与其他线程隔离。

（二）适用场景

• 复杂计算：如数学运算、数据处理等。
• 异步任务：如文件读取、网络请求等。
• 实时数据处理：如实时图表、游戏等。

二、Web Worker 的基本用法

（一）创建 Worker

创建一个 Worker 非常简单，只需要在主线程中实例化一个 Worker 对象，并传入一个 JavaScript 文件的路径。

（二）通信机制

主线程和 Worker 线程之间通过 postMessage 和 onmessage 方法进行通信。

1. 主线程向 Worker 发送消息

2. Worker 接收消息

在 Worker 脚本中，通过监听 message 事件接收消息。

3. Worker 向主线程发送消息

4. 主线程接收消息

在主线程中，通过监听 message 事件接收来自 Worker 的消息。

（三）终止 Worker

如果不再需要 Worker，可以调用 terminate 方法终止它。

三、Web Worker 的使用示例

以下是一个简单的计数器示例，展示了如何使用 Web Worker 在后台进行计数，并将结果发送回主线程。

1. 主线程代码

2. Worker 脚本代码

四、注意事项

（一）同源限制

Web Worker 只能在同源页面之间使用。如果页面的协议、域名或端口不同，通信将无法进行。

（二）安全性

在 Worker 脚本中，不能访问 DOM 或其他页面对象。如果需要在 Worker 中加载其他脚本，可以使用 importScripts 方法。

（三）性能影响

虽然 Web Worker 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。