什麼是 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}

); }

登入後複製