在前端开发中，特别是在处理大量数据时，Web Workers 是一种非常有用的工具。它们允许我们在后台线程中运行 JavaScript 代码，从而避免阻塞主线程。这样做可以提高应用程序的性能和响应速度。但是，当涉及到发送和接收大量数据时，Web Workers 的性能可能受到限制。
在本文中，我们将探讨使用可传输对象（Transferable Objects）提高 Web Workers 处理大量数据时的性能。
可传输对象（Transferable Objects）
如果您正在处理大量数据（例如大型 JSON 对象），则将其传递给 Web Worker 可能需要很长时间。这是因为 JavaScript 具有单线程模型，因此它只能同时执行一个任务。如果您尝试在主线程中发送一个大型 JSON 对象，则整个线程都将被阻塞，直到该对象被完全传输到 Web Worker。
可传输对象（Transferable Objects）是一种改进了 Web Workers 性能的技术。它允许在主线程和 Web Worker 之间传递数据，而无需复制数据或等待数据传输完成。
要使用可传输对象，您需要使用两个方法：postMessage() 和 transferable()
// 主线程 const myBigObject = { /* 大型 JSON 对象 */ }; worker.postMessage(myBigObject, [myBigObject]);
// Web Worker self.addEventListener('message', (event) => { const myBigObject = event.data; // 处理数据 });
在主线程中，我们将大型 JSON 对象 myBigObject 传递给 Web Worker。注意，我们将 myBigObject 作为第二个参数传递给 postMessage() 方法。这告诉 JavaScript 引擎将 myBigObject 转换为可传输对象并在发送消息时传递它。在 Web Worker 中，我们可以像往常一样接收消息，并使用 event.data 访问传递的数据。
示例代码
以下是一个完整的示例，演示了如何使用可传输对象在 Web Workers 中处理大量数据：
-- -------------------- ---- ------- -- --- ----- ----------- - - -- -- ---- -- -- -- ----- ------ - --- -------------------- ------------------------------- --------------- -- --- ------ - --------- -------------------------------- ------- -- - ----- ----------- - ----------- -- ---- ----- ------ - ---------------------------- ------------------------- --- -------- -------------------- - -- ------- ------ ----- -展开代码
在上面的示例中，我们创建了一个名为 myBigObject 的大型 JSON 对象，并使用 new Worker() 创建了一个 Web Worker。然后，我们使用 postMessage() 将 myBigObject 发送到 Web Worker 并将其作为第二个参数传递。在 Web Worker 中，我们接收到消息并使用 processBigData() 函数处理数据。最后，我们使用 postMessage() 将处理结果返回给主线程。
指导意义
使用可传输对象可以显著提高 Web Workers 处理大量数据时的性能。但是，它们只适用于某些数据类型，例如 ArrayBuffers、ImageBitmaps 和 MessagePorts 等。如果您尝试将不支持的数据类型转换为可传输对象，则会抛出错误。
在处理大量数据时，请始终考虑使用 Web Workers 以避免阻塞主线程。如果您需要发送大型 JSON 对象或其他不支持的数据类型，请考虑将其切分为更小的块，并使用可传输对象进行传递。这将使您的应用程序更加快速和响应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30863
