Atomics APIを知る / Understanding Atomics API

1. Atomics APIを知る sssssota / #jsconfjp
2. ⾃⼰紹介 ssssota (冨川宗太郎) sは4つ / テックリード {x:"ssssotaro",gh:"ssssota"} フロカン北海道 → フロカン東京 → Vue Fes 🔥 → JSConf JP
3. Atomics API 使ったことある⼈ 🙋
4. 使ってみる Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 1_000); → https://stackblitz.com/edit/atomics-wait-sleep $ node --eval "Atomics.wait(...)" $ bun --eval "Atomics.wait(...)" $ deno eval "Atomics.wait(...)"
5. JavaScriptはシングルスレッドである JavaScript はプロトタイプベースで、マルチパラダイムで、シングルスレッドで、動的な言語 https://developer.mozilla.org/ja/docs/Web/JavaScript 計算、ユーザーのイベント、画面の描画が単一のスレッドで実行される。 簡潔さの一方で、重いタスクを実行すると画面がガタつく。 → Worker (Web Workers / Worker threads) でマルチスレッドに対応
6. Workers間の通信は？ .postMessage() / .addEventListener('message') が使える。 基本的には、値はコピーされる。 addEventListener で値を受け取るので非同期での通信になる。 → 高速性のためのマルチスレッドで非同期通信＆値コピーでよいのか？
7. メモリ空間を共有する マルチスレッドプログラミングでは、スレッド間の通信方法として２つに分られる。 • 共有メモリ • メッセージパッシング postMessage はメッセージパッシングに相当。 共有メモリを利用することで、 同期的かつコピーを伴わないスレッド間通信を実現する。
8. Agents(≒Workers)間で共有されたメモリ空間を操作するArrayBuffer ArrayBufferなので、DataView経由で読み書きする。 const sab = new SharedArrayBuffer(1024 /* bytes */); const i32arr = new Int32Array(sab); // DataView i32arr[0] = 0xFF; SharedArrayBuffer
9. バイナリしか扱えない問題 ArrayBufferなので、数字しか格納できない。 ？「Workers間でデータをやり取りするのに文字列も送れないなんて😫」 → 自分で数値に変換してください。数値に変換しづらいものに使うべきではない。 最悪JSON.stringify + TextEncoderとか、 new TextEncoder().encode(JSON.stringify(obj)) typed-cstructというOSSもよいかも
10. 競合‧同期問題 「特定のメモリを読んで、数値を足して、書き込む」ことを考える 2つのワーカーが +1 ずつすると合計は +2 になってほしい。 が、ならないこともある。 これを、Data race（データ競合） という。 また、タスクが完了したことを 知るすべもない。
11. Atomics API 競合を回避するAtomicな操作、「不可分操作」を行うためのAPI Atomics.add() を使用して加算すれば、競合を回避しつつ加算・書き込みが可能。 Atomics.wait() / Atomics.notify() を使用すれば書き込みを通知できる。
12. Web WorkersはWeb API 2010年HTML5仕様 → HTML Living Standard 一方、SharedArrayBufferとAtomicsはECMAScript仕様に含まれる tc39/proposal-ecmascript-sharedmem → ES2017 Web Workersはブラウザでしか使用できない。 Node.js、Deno、Bunはそれぞれ独自のWorkers実装を持つ。 SharedArrayBufferとAtomicsはJavaScriptエンジンに実装されている。 仕様
13. SharedArrayBuffer is not defined おもむろに新しいタブでJavaScriptコンソールを開いて > new SharedArrayBuffer(4) してもエラーになる。 エンジンに実装されているなら、どこでも使えるんじゃ...?
14. 2018年に発表されたSpectreという脆弱性により、 SharedArrayBufferは一時的に無効化された。 悪用することでプロセス外のメモリが読める。 現在は条件付きで利用できる。 条件を満たしていない環境では、SharedArrayBufferは利用できない。 条件は以下の2点: • 保護されたコンテキスト内である (window.isSecureContext) • オリジン同士が分離されている (window.crossOriginIsolated) 無効化されたSharedArrayBuffer
15. SharedArrayBuffer / Atomics だれが使っている？ Workersが必要なケースは少なくないが、SharedArrayBuffer, Atomicsは？ → WebAssemblyをビルドするEmscriptenがマルチスレッド対応に利用 具体的には ffmpeg.wasmなど。 ただし、WASM側のAtomics操作を使うため、JSのAtomicsは使われていない。 Atomicsは本当に使われている？
16. Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 1_000); Atomics.waitはSABの値が変化するのを待機する。引数は以下: 1. typedArray: Int32Array | Int64Array 2. index: number 3. value: number 4. timeout?: number → Int32Arrayのindex:0の値が0じゃなくなるまで最大1,000ミリ秒待機 Atomics.waitはブロッキング操作なのでメインスレッドでは使えない。 最初のサンプルの解説
17. ⾼度な使⽤例: PartyTown Third-partyスクリプトの実行をWeb Workerに逃がしパフォーマンス向上を図る 1. Web Worker上で実行されるDOM操作等をProxyで補足 2. 補足した操作をMain threadに送信→Atomics.waitで完了を待つ 3. Main threadでDOM操作を実行、Atomics.notifyで完了通知 4. SharedArrayBuffer経由で返り値返却 制約はありつつも意欲的な解決策。 SharedArrayBufferが使用できない環境ではXHR+ServiceWorkerを利用。
18. おわり Atomics APIは SharedArrayBuffer とともに JavaScriptによる高速で安全な並列処理をもたらした。 JavaScriptのAtomicsはあまり使われていない(?) WebAssemblyからSharedArrayBufferを利用するケースが多いし、 使われていても、同期的な待機状態を作る目的だったりする。 あなたはAtomics API どう使いますか？