イベントループ、Web Worker、Service Worker

イベントループ

イベントループをブロックしてはならない長く重い計算に対しては、Web Workers を利用することができます。これは並列スレッドでコードを実行する方法です。
Web Worker はメインプロセスとメッセージを交換することができますが、独自の変数とイベントループを持ちます。
Web Worker は DOM にはアクセスできないので、主に計算のために複数のCPUコアを同時に使用するのに役立ちます。

https://ja.javascript.info/event-loop

nukopy

Web Worker

メインスレッドとワーカースレッドは同じプロセス内のスレッド間通信だけど「転送」する

nukopy

メインスレッドと Web Worker のデータ受け渡し

nukopy

ワーカースレッドを使用してバックグラウンドで（UI スレッドを邪魔せず）重い計算をする例

ワーカーは主に、ユーザーインターフェイスのスレッドを妨げずに CPU 負荷が大きい演算を実行するために役立ちます。このサンプルでは、ワーカーをフィボナッチ数の計算に使用します。

nukopy

サービスワーカー

サービスワーカーは、基本的に、ウェブアプリケーションと、ブラウザーおよびネットワーク (利用可能な場合) との間に位置するプロキシーサーバーとして機能します。これは、効果的なオフライン操作の構築ができるようにすること目的としています。ネットワークリクエストを傍受し、ネットワークが利用可能かどうかや、サーバー上の更新された資産に基づいて、適切なアクションをとります。また、プッシュ通知やバックグラウンド同期の API にもアクセスできるようになります。

nukopy

これ理解したい

JavaScript のスレッド並列実行環境