获得完整访问权限
测验

什么是 Web Worker 以及如何使用它们来提高性能？

主题
Web APIJavaScript性能
在GitHub上编辑

TL;DR

Web Worker 是一种在后台运行 JavaScript 的方法，与 Web 应用程序的主执行线程分开。这有助于执行繁重的计算，而不会阻塞用户界面。您可以使用 Worker 构造函数创建 Web Worker，并使用 postMessage 和 onmessage 方法与其通信。

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello, worker!');


worker.onmessage = function (event) {
  console.log('Message from worker:', event.data);
};


// worker.js
onmessage = function (event) {
  console.log('Message from main script:', event.data);
  postMessage('Hello, main script!');
};

什么是 Web Worker 以及如何使用它们来提高性能？

Web Worker 简介

Web Worker 提供了一种在后台运行 JavaScript 的方法，与主执行线程分开。这允许执行繁重的任务，如繁重的计算或 I/O 操作，而不会阻塞用户界面，从而带来更流畅的用户体验。

创建 Web Worker

要创建 Web Worker，您可以使用 Worker 构造函数并传递包含 worker 代码的 JavaScript 文件的 URL。

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

主脚本和 Web Worker 之间的通信

主脚本和 Web Worker 之间的通信使用 postMessage 方法和 onmessage 事件处理程序完成。

主脚本

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


// Send a message to the worker
worker.postMessage('Hello, worker!');


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

Worker 脚本

// worker.js
onmessage = function (event) {
  console.log('Message from main script:', event.data);
  // Send a message back to the main script
  postMessage('Hello, main script!');
};

Web Worker 的用例

繁重的计算

Web Worker 可用于执行繁重的计算，而不会阻塞主线程。例如，计算大型数据集或执行复杂的数学运算。

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


function heavyComputation(data) {
  // Perform heavy computation here
  return data * 2; // Example computation
}

数据处理

Web Workers 可用于处理大量数据，例如解析大型 JSON 文件或处理图像。

// worker.js
onmessage = function (event) {
  const processedData = processData(event.data);
  postMessage(processedData);
};


function processData(data) {
  // Process data here
  return data.map((item) => item * 2); // Example processing
}

Web Workers 的局限性

  • Web Workers 无法访问 DOM，因此它们无法直接操作用户界面。
  • 它们与主脚本具有单独的作用域，因此您需要使用 postMessage 来回传递数据。
  • 创建和管理 Web Workers 可能会增加代码库的复杂性。

延伸阅读

在GitHub上编辑