ウェブワーカーの概要

これまでこのコースのコンテンツの多くでは、 HTML のパフォーマンスに関する一般的な考慮事項、リソースヒント、各種リソースの最適化 初期ページ読み込み時間とユーザーに対する応答性を向上させる 特定のリソースの遅延読み込みを行えます。

ただし、JavaScript のパフォーマンスには、これまで認識されていなかった ウェブ ワーカーの役割は、Google Cloud で 次のモジュールで説明します。

JavaScript は、多くの場合、シングルスレッド言語として記述されます。実際には、 メインスレッドを指し、ブラウザが ブラウザに表示される作業の大半を占めます。この作業には、 レンダリング処理、HTML および CSS 解析、変換プロセスなど、 ユーザーエクスペリエンスを高める その他のユーザー向け作業などです実際には ブラウザは、他のスレッドを使用し、デベロッパーが GPU スレッドなどに直接アクセスできます。

JavaScript に関しては、一般的に デフォルトに限定されます。登録して使用できる スレッドを追加します。マルチスレッドを可能にする機能は JavaScript は Web Workers API として知られています。

ウェブワーカーが役立つのは、計算コストが高く、 メインスレッドで実行するには、ページを構成する長いタスクを発生させる必要がある 応答がありません。このような作業は、ウェブサイトのユーザーに対するインタラクションに Next Paint（INP）などを使用します。 メインスレッド以外で処理できますそうすることで、より多くの 他のタスクをメインスレッドで実行し、ユーザーの操作を高速化します。

このモジュールと具体的なユースケースを示す後続のデモでは、ウェブ できます。このデモでは、ウェブ ワーカーを使用して処理を実行する方法が示されています メインスレッドから JPEG ファイルから画像メタデータを読み取る方法と、 ユーザーが確認できるようにそのメタデータをメインスレッドに戻します。

ウェブワーカーの起動方法

ウェブワーカーを登録するには、Worker クラスをインスタンス化します。これを行うと、 そのため、ウェブワーカーのコードがある場所を指定し、ブラウザがこのコードを読み込む 新しいスレッドが作成されます。生成されるスレッドは多くの場合、 ワーカー スレッド。

const myWebWorker = new Worker('/js/my-web-worker.js');

ワーカーの JavaScript ファイル（この場合は my-web-worker.js）で、次の操作を行います。 独立したワーカー スレッドで実行するコードを記述できます。

ウェブワーカーの制限事項

メインスレッドで実行される JavaScript とは異なり、ウェブワーカーは直接アクセスできない window コンテキストに追加します。API へのアクセスが制限されています。ウェブ ワーカーには次の制約があります。

• ウェブ ワーカーは DOM に直接アクセスできません。
• ウェブ ワーカーは、メッセージングを使用して window コンテキストと通信できます つまり、ウェブ ワーカーがなんらかの方法で DOM に間接的にアクセスできるということです。
• ウェブワーカーのスコープが window ではなく self である。
• ウェブワーカー スコープには、JavaScript プリミティブへのアクセス権が与えられています。 構文、fetch などの API、多数の できます。

ウェブ ワーカーが window と通信する方法

ウェブワーカーはメインスレッドの window と通信できます。 コンテキスト情報を提供しますこのパイプラインを使用すると メインスレッドとウェブワーカーから 呼び出せますウェブワーカーから main スレッドで、ウェブ ワーカーのコンテキスト（self）で message イベントをセットアップします。

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

次に、メインスレッドの window コンテキストのスクリプトで、 新しい message イベントを使用して、ウェブ ワーカー スレッドからメッセージを取得できます。

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

ウェブワーカーのメッセージング パイプラインは、ウェブからの脱出手段のようなものです。 コンテキストで識別されます。これを使用して、ウェブ ワーカーから window にデータを送信できます。 その関数を使用して、DOM の更新など、 呼び出します。

理解度テスト

次のステップ: 具体的なウェブ ワーカーのユースケース

次のモジュールでは、ウェブ ワーカーの具体的なユースケースについて詳しく説明します。 示したものですこのモジュールで、ウェブワーカーを使用して 特定の URL を実行し、その Exif メタデータをウェブ ワーカーで読み取ります。そのデータは メインスレッドに戻してユーザーに表示します。