JavaScript 中的多线程 Web Worker

JavaScript 以单一序列运行代码，这称为单线程。这种设计非常适合 Web 浏览器中的简单任务，但当主线程被繁重的任务（如复杂的计算或后台操作）阻塞时，它可能会导致问题。这些任务会使页面变慢且无响应。为了解决这个问题，JavaScript 提供了 Web Workers，它允许您将繁重的任务移至单独的线程，从而使主线程保持空闲，以实现顺畅的用户交互。

什么是 Web Worker？

Web Workers 是 Web API 的一项功能，允许 JavaScript 代码在单独的线程上在后台运行。这可以实现类似多线程的行为，通过从主线程卸载资源密集型任务来提高性能。

Web Worker 在不同的执行上下文中运行，这意味着它们无法访问 DOM、窗口或文档对象。但是，它们可以通过消息与主线程进行通信。

如何使用 Web Worker

以下是使用 Web Workers 的分步指南：

创建 Worker 文件 Web Workers 需要一个单独的 JavaScript 文件，其中包含要在后台执行的代码。例如，创建一个名为 worker.js 的文件：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const result = performHeavyComputation(data);
    self.postMessage(result);
};

function performHeavyComputation(input) {
    // Simulate a CPU-intensive task
    let total = 0;
    for (let i = 0; i < 1e7; i++) {
        total += i * input;
    }
    return total;
}

在主线程中初始化 Worker 使用 Worker 构造函数在主脚本中创建 Worker 的实例：

// main.js
const worker = new Worker('worker.js');

// Send data to the worker
worker.postMessage(42);

// Receive data from the worker
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

// Handle errors
worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

终止 Worker

当工作者的任务完成或者不再需要时，终止它以释放资源：

worker.terminate();

示例：对大型数组进行排序

对大型数组进行排序可能会阻塞主线程，导致 UI 冻结。让我们使用 Web Worker 来处理此任务：

**Worker 文件（sortWorker.js）：**

self.onmessage = function(event) {
    const sortedArray = event.data.sort((a, b) => a - b);
    self.postMessage(sortedArray);
};

**主要脚本：**

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker('sortWorker.js');

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
    console.log('Sorted array:', event.data);
};

sortWorker.onerror = function(error) {
    console.error('Error in sorting worker:', error.message);
};

Web Workers 的一些好处

提高性能：将任务卸载到单独的线程可防止主线程被阻塞。

更好的用户体验：即使在密集操作期间，UI 仍保持响应。

可扩展性：多名工人可以同时处理不同的任务。

Web Workers 开发人员面临的限制

除了优点之外，Web Workers 还存在一些缺点和局限性。

无 DOM 访问权限：工作人员无法直接操作 DOM。

上下文隔离：Worker 有自己的全局范围，不能访问主线程中的变量或函数。

开销：创建工人并与他们沟通需要成本，这使得他们不适合执行非常小的任务。

Web Workers 的结论

Web Workers 可让您在后台运行繁重的任务，让 JavaScript 感觉像是拥有多个线程。通过学习如何有效地使用它们，您可以开发速度更快、响应速度更快的 Web 应用程序。

对于需要更高级线程功能的场景，请考虑使用 Shared Workers 或 Worklets 等选项，它们可以扩展 Web Worker 模型。正确使用 Web Workers 可以显著提高 JavaScript 应用程序的性能和响应能力。