Web Worker 的基本用法Web Worker 是一种在浏览器环境中实现多线程的技术，它允许在主线程之外执行脚本，

Web Worker 是一种在浏览器环境中实现多线程的技术，它允许在主线程之外执行脚本，从而避免阻塞用户界面（UI）。Web Worker 可以处理计算密集型任务，如数据处理、图像处理等，而不影响页面的交互性。以下是 Web Worker 的基本用法和一些示例。

Web Worker 的基本用法

创建 Worker：创建一个 Worker 对象，传入一个 URL，该 URL 指向 Worker 脚本的位置。Worker 脚本必须是一个网络文件，并且要遵循同源策略。
```
javascript
const worker = new Worker('worker.js');
```

通信机制： Web Worker 通过 postMessage 方法与主线程进行通信，并通过 onmessage 事件监听器接收消息。

主线程发送消息给 Worker：

javascript
worker.postMessage({ data: 'Hello from main thread!' });

Worker 发送消息给主线程：

javascript
// 在 worker.js 中
self.onmessage = function(event) {
    console.log('Received message:', event.data);
    self.postMessage('Hello from worker!');
};

终止 Worker：当不再需要 Worker 时，可以调用 terminate 方法来结束 Worker 的执行。
```
javascript
worker.terminate();
```

示例：使用 Web Worker 进行计算

假设我们需要在 Web Worker 中执行一个耗时的计算任务，如计算斐波那契数列的第 n 项。

主线程

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker Example</title>
</head>
<body>
    <input type="number" id="fibonacciInput">
    <button onclick="calculateFibonacci()">Calculate Fibonacci</button>
    <p id="result"></p>

    <script>
        function calculateFibonacci() {
            const input = document.getElementById('fibonacciInput').value;
            const worker = new Worker('worker.js');

            worker.postMessage(input);

            worker.onmessage = function(event) {
                document.getElementById('result').textContent = event.data;
                worker.terminate(); // 结束 Worker
            };
        }
    </script>
</body>
</html>

Worker 脚本 (worker.js)

javascript
self.onmessage = function(event) {
    const n = parseInt(event.data, 10);
    let result = fibonacci(n);
    self.postMessage(result);

    function fibonacci(n) {
        if (n <= 1) return n;
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
};

在这个示例中，当用户输入一个数字并点击按钮时，主线程会创建一个新的 Worker 并发送消息给它。Worker 收到消息后开始计算斐波那契数列，并将结果通过 postMessage 发送给主线程。主线程接收到结果后将其显示在页面上，并终止 Worker。

注意事项

同源策略：Worker 脚本必须位于与主页面相同的源（协议、域名、端口）上。
资源限制：Worker 的数量和内存使用量是有限制的，过多的 Worker 可能会被浏览器终止。
DOM 访问：Worker 不能直接访问 DOM 元素，也不能访问 window 对象。但是，可以通过 self 访问 Worker 的全局作用域。
错误处理：Worker 中的错误可以通过 worker.onerror 事件来捕获。

通过使用 Web Worker，可以有效地将计算密集型任务从主线程中分离出来，从而提高应用程序的性能和用户体验。