什么是 Web Worker 以及如何利用它们来优化前端性能

大家好，Vinyl 又来了！ ？

欢迎回到我的博客。我知道已经有一段时间了，但我很高兴能分享我在今年参与的一个项目中的一些最新发现和学习成果——一个用于起草、测试和实验智能法律合约的模板游乐场和文件。今天，我们将深入探讨Web Workers：它们是什么、它们如何工作以及如何使用它们来增强您的前端项目。

好吧，让我们想象一下你在一家酒吧喝点啤酒，调酒师（你的主线程）必须同时接受订单、准备订单并清理柜台。如果他们正忙着制定复杂的订单（计算量很大），那么排队的其他人都必须等待——这很令人沮丧，对吧？现在想象一下，调酒师有一个助手（网络工作者），负责在后台清洁和整理品脱玻璃杯，而调酒师则专注于接受和下订单。这种团队合作确保运营更加顺利。

这只是一个简短的概述。我知道您可能会从描述中想到 API，哈哈，不，它们不是！让我们开始吧。

什么是网络工作者？

Web 开发中的 Web Workers 与那个助手一模一样。它们在后台处理繁重的任务，释放主线程以保持应用程序的响应速度和流畅性。在本文中，我们将深入研究 Web Workers，探索它们的关键功能，解释如何导航它们，并使用三个现实场景来展示它们在前端开发中的强大功能。我还将提供在 Vue 等其他框架中使用 Web Workers 的技巧，因为这里的主要用例是 React。

三种类型的网络工作者

在深入了解如何使用 Web Workers 之前，让我们先了解一下三种主要类型：

专用 Workers： 这些特定于单个脚本，并且是最常用的 Workers。它们非常适合后台计算或处理一个应用程序实例的 API 调用等任务。

示例：压缩特定用户会话的数据。

共享工作线程：这些可以在多个脚本或浏览器选项卡之间共享，这使得它们非常适合需要跨选项卡通信的任务，例如跨选项卡同步数据。

示例：在多个浏览器选项卡中保持用户会话数据一致。

Service Workers：与 Dedicated Workers 和 Shared Workers 不同，它们拦截网络请求并充当应用程序和网络之间的代理。它们通常用于缓存和离线支持。

示例：当用户离线时提供缓存模板。

您可以在 MDN 的 Web Workers 文档中阅读有关这些类型的更多信息。

要知道使用哪个工作人员，请考虑您的任务范围：

• 使用 Dedicated Workers 执行独立的单脚本任务。

• 使用共享工作人员进行多选项卡通信。

• 使用 Service Worker 执行与网络相关的任务，例如缓存或离线功能。

Web Workers 的主要优势是它们能够从主线程卸载这些任务，确保流畅的用户体验。主线程和工作线程之间的通信通过消息系统使用 postMessage 和 onmessage API 进行。

主要 Web Worker 功能

• onmessage：处理从主线程发送到工作线程的消息。

self.onmessage = (event) => {
  console.log('Message received from main thread:', event.data);
};

• postMessage：将消息从工作线程发送回主线程。

self.postMessage('Task completed');

• 终止：停止工作线程运行。

worker.terminate();

• 错误处理：捕获worker中的错误。

self.onerror = (error) => {
  console.error('Worker error:', error.message);
};

其他有用的函数包括用于加载外部脚本的 importScripts、用于关闭工作线程的 self.close 以及用于定时操作的 setTimeout/setInterval。如果需要，请参阅文档以获取更多详细信息。

Web Playground 项目中的示例用例

以下是 Web Workers 可以显着增强示例 Template Playground 项目的三个实际场景：

案例一：API调用模板数据

从 API 获取模板数据可能会产生巨大的数据集，需要在使用前进行解析。如果直接这样做，这可能会阻塞 UI 线程。

1。创建工作文件： 创建 dataParser.worker.js。

// dataParser.worker.js
self.onmessage = (event) => {
  const { rawData } = event.data;
  const parsedData = rawData.map((template) => ({
    name: template.name,
    tag: template.tag,
  }));

  self.postMessage(parsedData);
};

2。在 React 中使用 Worker：

import React, { useState } from 'react';

export default function templateDataParser({ rawData }) {
  const [parsedData, setParsedData] = useState([]);

  const parseData = () => {
    const worker = new Worker(new URL('./dataParser.worker.js', import.meta.url));
    worker.postMessage({ rawData });

    worker.onmessage = (event) => {
      setParsedData(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={parseData}>Template Parsed Data</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(parsedData, null, 2)}

); }

登录后复制

案例2：URL压缩与解压

为了允许用户通过紧凑的 URL 共享他们的模板，Web Workers 可以有效地处理压缩和解压缩。

1。创建工作文件： 创建 urlCompressor.worker.js。

// urlCompressor.worker.js
import LZString from 'lz-string';

self.onmessage = (event) => {
  const { action, data } = event.data;
  let result;

  if (action === 'compress') {
    result = LZString.compressToEncodedURIComponent(data);
  } else if (action === 'decompress') {
    result = LZString.decompressFromEncodedURIComponent(data);
  }

  self.postMessage(result);
};

2。在 React 中使用 Worker：

import React, { useState } from 'react';

export default function URLCompressor({ template }) {
  const [compressedURL, setCompressedURL] = useState('');

  const compressTemplate = () => {
    const worker = new Worker(new URL('./urlCompressor.worker.js', import.meta.url));
    worker.postMessage({ action: 'compress', data: template });

    worker.onmessage = (event) => {
      setCompressedURL(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={compressTemplate}>Compress Template</button>
      <pre class="brush:php;toolbar:false">{compressedURL}

); }

登录后复制