大家好，Vinyl 又來了！ ？

歡迎回到我的部落格。我知道已經(jīng)有一段時(shí)間了，但我很高興能分享我今年參與的一個(gè)專案中的一些最新發(fā)現(xiàn)和學(xué)習(xí)成果——一個(gè)用於起草、測試和實(shí)驗(yàn)智能法律合約的模板遊樂場和文件。今天，我們將深入探討Web Workers：它們是什麼、它們?nèi)绾芜\(yùn)作以及如何使用它們來增強(qiáng)您的前端專案。

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

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

什麼是網(wǎng)路工作者？

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

三種類型的網(wǎng)路工作者

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

專用 Workers： 這些特定於單一腳本，並且是最常用的 Workers。它們非常適合後臺(tái)計(jì)算或處理一個(gè)應(yīng)用程式實(shí)例的 API 呼叫等任務(wù)。

範(fàn)例：壓縮特定使用者會(huì)話的資料。

共享工作執(zhí)行緒：這些可以在多個(gè)腳本或?yàn)g覽器標(biāo)籤之間共享，這使得它們非常適合需要跨選項(xiàng)卡通訊的任務(wù)，例如跨選項(xiàng)卡同步資料。

範(fàn)例：在多個(gè)瀏覽器標(biāo)籤中保持使用者會(huì)話資料一致。

Service Workers：與 Dedicated Workers 和 Shared Workers 不同，它們攔截網(wǎng)路請(qǐng)求並充當(dāng)應(yīng)用程式和網(wǎng)路之間的代理。它們通常用於快取和離線支援。

範(fàn)例：當(dāng)使用者離線時(shí)提供快取範(fàn)本。

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

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

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

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

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

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

主要 Web Worker 功能

• onmessage：處理從主執(zhí)行緒傳送到工作執(zhí)行緒的訊息。

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

• postMessage：將訊息從工作執(zhí)行緒傳回主執(zhí)行緒。

self.postMessage('Task completed');

• 終止：停止工作執(zhí)行緒運(yùn)行。

worker.terminate();

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

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

其他有用的函數(shù)包括用於載入外部腳本的 importScripts、用於關(guān)閉工作執(zhí)行緒的 self.close 以及用於定時(shí)操作的 setTimeout/setInterval。如果需要，請(qǐng)參閱文件以取得更多詳細(xì)資訊。

Web Playground 專案中的範(fàn)例用例

以下是 Web Workers 可以顯著增強(qiáng)範(fàn)例 Template Playground 專案的三個(gè)實(shí)際場景：

案例一：API呼叫模板數(shù)據(jù)

從 API 取得範(fàn)本資料可能會(huì)產(chǎn)生龐大的資料集，需要在使用前進(jìn)行解析。如果直接這樣做，這可能會(huì)阻塞 UI 執(zhí)行緒。

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)}