大家好，Vinyl 又來了！ ？

歡迎回到我的博客。我知道已經(jīng)有一段時(shí)間了，但我很高興能分享我在今年參與的一個(gè)項(xiàng)目中的一些最新發(fā)現(xiàn)和學(xué)習(xí)成果——一個(gè)用于起草、測(cè)試和實(shí)驗(yàn)智能法律合約的模板游樂場(chǎng)和文件。今天，我們將深入探討Web Workers：它們是什么、它們?nèi)绾喂ぷ饕约叭绾问褂盟鼈儊碓鰪?qiáng)您的前端項(xiàng)目。

好吧，讓我們想象一下你在一家酒吧喝點(diǎn)啤酒，調(diào)酒師（你的主線程）必須同時(shí)接受訂單、準(zhǔn)備訂單并清理柜臺(tái)。如果他們正忙著制定復(fù)雜的訂單（計(jì)算量很大），那么排隊(duì)的其他人都必須等待——這很令人沮喪，對(duì)吧？現(xiàn)在想象一下，調(diào)酒師有一個(gè)助手（網(wǎng)絡(luò)工作者），負(fù)責(zé)在后臺(tái)清潔和整理品脫玻璃杯，而調(diào)酒師則專注于接受和下訂單。這種團(tuán)隊(duì)合作確保運(yùn)營(yíng)更加順利。

這只是一個(gè)簡(jiǎn)短的概述。我知道您可能會(huì)從描述中想到 API，哈哈，不，它們不是！讓我們開始吧。

什么是網(wǎng)絡(luò)工作者？

Web 開發(fā)中的 Web Workers 與那個(gè)助手一模一樣。它們?cè)诤笈_(tái)處理繁重的任務(wù)，釋放主線程以保持應(yīng)用程序的響應(yīng)速度和流暢性。在本文中，我們將深入研究 Web Workers，探索它們的關(guān)鍵功能，解釋如何導(dǎo)航它們，并使用三個(gè)現(xiàn)實(shí)場(chǎng)景來展示它們?cè)谇岸碎_發(fā)中的強(qiáng)大功能。我還將提供在 Vue 等其他框架中使用 Web Workers 的技巧，因?yàn)檫@里的主要用例是 React。

三種類型的網(wǎng)絡(luò)工作者

在深入了解如何使用 Web Workers 之前，讓我們先了解一下三種主要類型：

專用 Workers： 這些特定于單個(gè)腳本，并且是最常用的 Workers。它們非常適合后臺(tái)計(jì)算或處理一個(gè)應(yīng)用程序?qū)嵗?API 調(diào)用等任務(wù)。

示例：壓縮特定用戶會(huì)話的數(shù)據(jù)。

共享工作線程：這些可以在多個(gè)腳本或?yàn)g覽器選項(xiàng)卡之間共享，這使得它們非常適合需要跨選項(xiàng)卡通信的任務(wù)，例如跨選項(xiàng)卡同步數(shù)據(jù)。

示例：在多個(gè)瀏覽器選項(xiàng)卡中保持用戶會(huì)話數(shù)據(jù)一致。

Service Workers：與 Dedicated Workers 和 Shared Workers 不同，它們攔截網(wǎng)絡(luò)請(qǐng)求并充當(dāng)應(yīng)用程序和網(wǎng)絡(luò)之間的代理。它們通常用于緩存和離線支持。

示例：當(dāng)用戶離線時(shí)提供緩存模板。

您可以在 MDN 的 Web Workers 文檔中閱讀有關(guān)這些類型的更多信息。

要知道使用哪個(gè)工作人員，請(qǐng)考慮您的任務(wù)范圍：

• 使用 Dedicated Workers 執(zhí)行獨(dú)立的單腳本任務(wù)。

• 使用共享工作人員進(jìn)行多選項(xiàng)卡通信。

• 使用 Service Worker 執(zhí)行與網(wǎng)絡(luò)相關(guān)的任務(wù)，例如緩存或離線功能。

Web Workers 的主要優(yōu)勢(shì)是它們能夠從主線程卸載這些任務(wù)，確保流暢的用戶體驗(yàn)。主線程和工作線程之間的通信通過消息系統(tǒng)使用 postMessage 和 onmessage API 進(jìn)行。

主要 Web Worker 功能

• onmessage：處理從主線程發(fā)送到工作線程的消息。

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

• postMessage：將消息從工作線程發(fā)送回主線程。

self.postMessage('Task completed');

• 終止：停止工作線程運(yùn)行。

worker.terminate();

• 錯(cuò)誤處理：捕獲worker中的錯(cuò)誤。

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

其他有用的函數(shù)包括用于加載外部腳本的 importScripts、用于關(guān)閉工作線程的 self.close 以及用于定時(shí)操作的 setTimeout/setInterval。如果需要，請(qǐng)參閱文檔以獲取更多詳細(xì)信息。

Web Playground 項(xiàng)目中的示例用例

以下是 Web Workers 可以顯著增強(qiáng)示例 Template Playground 項(xiàng)目的三個(gè)實(shí)際場(chǎng)景：

案例一：API調(diào)用模板數(shù)據(jù)

從 API 獲取模板數(shù)據(jù)可能會(huì)產(chǎn)生巨大的數(shù)據(jù)集，需要在使用前進(jìn)行解析。如果直接這樣做，這可能會(huì)阻塞 UI 線程。

1。創(chuàng)建工作文件： 創(chuàng)建 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)}