前回のモジュールでは、ウェブ ワーカーの概要について説明しました。ウェブ ワーカーは、JavaScript をメインスレッドから別のウェブ ワーカー スレッドに移動することで、入力の応答性を高めることができます。これにより、メインスレッドに直接アクセスする必要のない作業がある場合に、ウェブサイトのインタラクションから次の描画までの時間（INP）を改善できます。ただし、概要だけでは十分ではありません。このモジュールでは、ウェブ ワーカーの具体的なユースケースを紹介します。
たとえば、画像から Exif メタデータを削除する必要があるウェブサイトが考えられます。これは、それほど突飛なコンセプトではありません。実際、Flickr などのウェブサイトでは、ユーザーが Exif メタデータを表示して、ホストされている画像の技術的な詳細（色深度、カメラのメーカーとモデルなど）を確認できるようになっています。
ただし、画像をフェッチして ArrayBuffer に変換し、Exif メタデータを抽出するロジックをすべてメインスレッドで実行すると、コストが高くなる可能性があります。幸いなことに、ウェブ ワーカーのスコープでは、この処理をメインスレッドから外して実行できます。次に、ウェブ ワーカーのメッセージ パイプラインを使用して、Exif メタデータが HTML 文字列としてメインスレッドに送信され、ユーザーに表示されます。
ウェブ ワーカーを使用しない場合のメインスレッド
まず、ウェブ ワーカーを使用せずにこの処理を行った場合のメインスレッドの様子を確認します。これを行う方法は次のとおりです。
- Chrome で新しいタブを開き、その DevTools を開きます。
- パフォーマンス パネルを開きます。
- https://chrome.dev/learn-performance-exif-worker/without-worker.html に移動します。
- パフォーマンス パネルで、DevTools ペインの右上にある [Record] をクリックします。
- フィールドにこの画像リンク（または Exif メタデータを含む別の画像リンク）を貼り付け、[Get that JPEG!] ボタンをクリックします。
- インターフェースに Exif メタデータが入力されたら、[Record] をもう一度クリックして録画を停止します。
