Web ワーカーとは何か、またフロントエンドのパフォーマンスを最適化するために Web ワーカーを活用する方法

こんにちは、ヴァイナルがまた来ました! ?

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

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

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

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

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

3 種類の Web ワーカー

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

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

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

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

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

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

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

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

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

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

• 複数タブの通信には共有ワーカーを使用します。

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

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

Web ワーカーの主要な機能

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

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

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

self.postMessage('Task completed');

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

worker.terminate();

• エラー処理: ワーカー内のエラーをキャッチします。

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

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

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

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

ケース 1: テンプレート データの 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 でワーカーを使用する:

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 でワーカーを使用する:

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}

); }

ログイン後にコピー