Web Worker面白い
Web Workerは開いているページと同じプロセス内の別スレッドで処理をする仕組みです。
ワーカーはDOM APIなどのいくつかのブラウザの機能にアクセスすることができませんが、メインとなるページのレンダリングや、ユーザー操作に影響を与えるような重たい処理を別のスレッドに分離することができます。
Web WorkerとPromise
Web Workerは別のスレッドを用意してそこで実行されますが、Promiseは基本的にメインスレッド内で実行されます。Promiseの非同期処理はひとつのスレッド内で、時間的に処理を分割して処理を進めるようになっています。 await は分かりやすくPromiseの処理を待ちます。
よく並列処理と並行処理の違いとされるものです。
ワーカーの種類
ワーカーはそのアクセス範囲や方法でいくつかの種類が存在します。
専用ワーカー dedigated worker
専用ワーカーはいわゆる普通のワーカーで、ひとつのタブプロセスからのみ呼び出されます。
共有ワーカー shared worker
共有ワーカーは、同一ドメインのタブプロセスで共有されるワーカーです。
サービスワーカー service worker
サービスワーカーは、あるドメインとパスに紐づけられたワーカーで、リクエストに対して手を加えたり、キャッシュを返却したりするプロキシサーバーの様な役割ができます。
動作しているワーカーの確認
Chromeでの確認方法です。他のブラウザでも確認する手段はあると思いますが特に調べていません。
専用ワーカーは確認したいページ中でデベロッパーツールを開き、 Console タブのプルダウン内に表示されます。
動作している shared workerは chrome://inspect/#workers から、service workerは chrome://inspect/#service-workers から確認することができます。
ワーカー情報の下に表示されている inspect をクリックするとデベロッパーツールが開かれます。
最近見たワーカーを使った面白テーマ
OffscreenCanvas
まだ実験的機能の段階ですが、OffscreenCanvasというWeb APIがあります。メインスレッドであるページでCanvasを取得し、Web Workerの呼び出し時に渡すことでDOM APIにアクセスできないWeb Workerから画面描画を可能にします。
記事だとこれが分かりやすそう。
Workerから描画をすることで、ユーザーの操作性を邪魔せずにリッチなアニメーションなどの見た目が実現できます。見た目はリッチだけどこのサイト重いなみたいなのを回避できる。
WebAssemblyの応用
またWebAssemblyの登場で、ネイティブ向けに実装されていたJavaScript以外の言語のリソースがブラウザ上で扱えるようになりました。
OffscreenCanvasと組み合わせることでCLI（Command Line Interface）ツールなどをブラウザ上から利用することができます。
↓その方針でやっているかは分からないですが、WebAssemblyを使ってブラウザでわいわいしている例
GoをWebAssembly化してSSHの暗号化処理などをWebブラウザで完結させてPiping Server経由のSSHができるようなった。https://t.co/PzWQkcqyhRを利用している。 pic.twitter.com/mnCUbJY0mX
— nwtgck (ja) (@nwtgck_ja) 2023年6月13日
プロセスとスレッド
