在现代 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 文件的路径。
const worker = new Worker('worker.js');
（二）通信机制
主线程和 Worker 线程之间通过 postMessage 和 onmessage 方法进行通信。
1. 主线程向 Worker 发送消息
worker.postMessage('Hello, Worker!');
2. Worker 接收消息
在 Worker 脚本中，通过监听 message 事件接收消息。
self.onmessage = function(event) {
console.log('Received message:', event.data);
};
3. Worker 向主线程发送消息
postMessage('Hello, Main Thread!');
4. 主线程接收消息
在主线程中，通过监听 message 事件接收来自 Worker 的消息。
worker.onmessage = function(event) {
console.log('Received message:', event.data);
};
（三）终止 Worker
如果不再需要 Worker，可以调用 terminate 方法终止它。
worker.terminate();
三、Web Worker 的使用示例
以下是一个简单的计数器示例，展示了如何使用 Web Worker 在后台进行计数，并将结果发送回主线程。
1. 主线程代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器示例</title>
</head>
<body>
<p>计数：<output id="result"></output></p>
<button id="startBtn">开始工作</button>
<button id="stopBtn">停止工作</button>
<script>
const startBtn = document.getElementById("startBtn");
const stopBtn = document.getElementById("stopBtn");
let worker; // 用于存储 Worker 线程
startBtn.onclick = function () {
worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
};
stopBtn.onclick = function () {
worker.terminate();
worker = null;
};
</script>
</body>
</html>
2. Worker 脚本代码
// worker.js
let count = 0;
setInterval(function () {
count++;
postMessage(count);
}, 1000);
四、注意事项
（一）同源限制
Web Worker 只能在同源页面之间使用。如果页面的协议、域名或端口不同，通信将无法进行。
（二）安全性
在 Worker 脚本中，不能访问 DOM 或其他页面对象。如果需要在 Worker 中加载其他脚本，可以使用 importScripts 方法。
（三）性能影响
虽然 Web Worker 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。
