こんにちは、ヴァイナルがまた來(lái)ました! ?

私のブログへようこそ。かなり時(shí)間が経ってしまいましたが、今年取り組んできた 1 つのプロジェクト、つまりスマートな法的契約の草案、テスト、実験に使用されるテンプレート プレイグラウンドに取り組む中で、最新の発見(jiàn)と學(xué)んだことの一部を共有できることを嬉しく思います。そして書(shū)類。今日は、Web ワーカー について、その概要、仕組み、フロントエンド プロジェクトを強(qiáng)化するために Web ワーカーを使用する方法について詳しく説明します。

それでは、あなたがビールを飲むためにバーにいると想像してみましょう。バーテンダー (メインスレッド) は注文を受け、注文の準(zhǔn)備をし、カウンターを一度に掃除しなければなりません。彼らが複雑な注文 (重い計(jì)算) を作成するのに忙しい場(chǎng)合、列に並んでいる他の人は待たなければなりません。イライラしますよね?ここで、バーテンダーにアシスタント (Web ワーカー) がいて、バーテンダーが注文を受けて注文することに集中している間、バックグラウンドでパイント グラスの洗浄と整理を擔(dān)當(dāng)していると想像してください。このチームワークにより、スムーズな業(yè)務(wù)が保証されます。

これはほんの概要です。この説明から API を想像するかもしれませんが (笑)、いいえ、違います。早速見(jiàn)ていきましょう。

Web ワーカーとは何ですか?

Web 開(kāi)発における Web ワーカーはまさにそのアシスタントに似ています。これらはバックグラウンドで負(fù)荷の高いタスクを処理し、メインスレッドを解放してアプリの応答性とスムーズさを維持します。この記事では、Web ワーカーについて詳しく説明し、その主要な機(jī)能を調(diào)べ、Web ワーカーを操作する方法を説明し、3 つの現(xiàn)実世界のシナリオを使用してフロントエンド開(kāi)発における Web ワーカーの力を?qū)g証します。また、ここでの主な使用例は React であるため、Vue などの他のフレームワークで Web ワーカーを使用するためのヒントも提供します。

3 種類の Web ワーカー

Web Workers の使用方法に入る前に、次の 3 つの主要なタイプを理解しましょう。

専用ワーカー: これらは 1 つのスクリプトに固有であり、最も一般的に使用されるワーカーです。これらは、バックグラウンド計(jì)算や 1 つのアプリ インスタンスの API 呼び出しの処理などのタスクに最適です。

例: 特定のユーザー セッションのデータを圧縮します。

共有ワーカー: これらは複數(shù)のスクリプトまたはブラウザー タブ間で共有できるため、タブ間でのデータの同期など、クロスタブ通信が必要なタスクに最適です。

例: 複數(shù)のブラウザ タブ間でユーザー セッション データの一貫性を維持します。

サービス ワーカー: 専用ワーカーや共有ワーカーとは異なり、これらはネットワーク リクエストをインターセプトし、アプリとネットワーク間のプロキシとして機(jī)能します。これらは通常、キャッシュとオフライン サポートに使用されます。

例: ユーザーがオフラインのときにキャッシュされたテンプレートを提供します。

これらのタイプの詳細(xì)については、MDN の Web Workers ドキュメントを參照してください。

どのワーカーを使用するかを知るには、タスクの範(fàn)囲を考慮してください。

• 分離された単一スクリプトのタスクには専用ワーカーを使用します。

• 複數(shù)タブの通信には共有ワーカーを使用します。

• キャッシュやオフライン機(jī)能などのネットワーク関連のタスクには Service Worker を使用します。

Web Workers の主な利點(diǎn)は、これらのタスクをメインスレッドからオフロードして、スムーズなユーザー エクスペリエンスを保証できることです。メインスレッドとワーカー間の通信は、postMessage API と onmessage API を使用するメッセージング システム経由で行われます。

Web ワーカーの主要な機(jī)能

• onmessage: メインスレッドからワーカーに送信されたメッセージを処理します。

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

• postMessage: ワーカーからメインスレッドにメッセージを送り返します。

self.postMessage('Task completed');

• terminate: ワーカーの実行を停止します。

worker.terminate();

• エラー処理: ワーカー內(nèi)のエラーをキャッチします。

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

その他の便利な関數(shù)には、外部スクリプトをロードするための importScripts、ワーカーをシャットダウンするための self.close、時(shí)間指定された操作のための setTimeout/setInterval などがあります。詳細(xì)については、必要に応じてドキュメントを參照してください。

Web プレイグラウンド プロジェクトでの使用例の例

Web ワーカーがサンプルの Template Playground プロジェクトを大幅に強(qiáng)化できる 3 つの実踐的なシナリオを次に示します。

ケース 1: テンプレート データの API 呼び出し

API からテンプレート データを取得すると、使用前に解析する必要がある巨大なデータセットが生成される場(chǎng)合があります。これを直接実行すると、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 でワーカーを使用する:

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