ウェブワーカーの概要

<ph type="x-smartling-placeholder">

これまでこのコースのコンテンツの多くでは、 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);
});
<ph type="x-smartling-placeholder">

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

理解度テスト

ウェブワーカーはどのスレッドで実行されますか。

メインスレッド。
もう一度お試しください。
独自のスレッド（ウェブ ワーカー スレッドとも呼ばれます）。
正解です。
GPU スレッド。
もう一度お試しください。

ウェブワーカーがアクセスできるもの

JavaScript プリミティブ（配列やオブジェクトなど）
正解です。
window コンテキストで利用可能な API の厳密なサブセット。 fetch を含む。
正解です。
window コンテキスト。ただし、間接的です。
正解です。

ウェブワーカーが `window` コンテキストにアクセスするにはどうすればよいですか。

window オブジェクトのメンバーを参照することで直接使用する。
もう一度お試しください。
ウェブ ワーカーは、いかなる方法でも window にアクセスできません。
もう一度お試しください。
postMessage によって促進されるメッセージ パイプライン経由 メソッド（self）を呼び出します。
正解です。

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

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