WebWorker And Atomics

WebWorkerとAtomics・SharedArrayBufferについて

Transcript

1. WebWorker & Atomics
2. 名前: @brn_take (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/
3. WebWorker使ってますか？
4. WebWorker •  ネイティブスレッド！ •  起動も簡単 •  メッセージパッシングでスレッドを意識しなくて良い Pros Cons •  文字列のやり取りしかできない •  postMessage面倒くさい
5. What is SharedArrayBuffer? WebWorkerの欠点を解決するもの 各Worker間で値を共有することを可能にする。 これによって、WorkerのIOでserialize/deserializeする必要が なくなった。 しかし、新たな問題が… スレッド競合…
6. What is SharedArrayBuffer? // main.js const worker = new Worker('thread1.js'); const sharedArrayBuffer = new SharedArrayBuffer(1024); worker.postMessage(sharedArrayBuffer); worker.addEventListener('message', m => { console.log(sharedArrayBuffer); }); //thread.js onmessage = buffer => { fetch(...) .then(res => { const responseBuffer = new UInt8Array(res.arrayBuffer()); const targetBuffer = new UInt8Array(buffer); targetBuffer.copy(responseBuffer); postMessage(targetBuffer); }); }
7. What is Atomics? SharedArrayBufferの欠点を解決するもの Atomics経由でSharedArrayBufferの値に触れることで、 各スレッド間での変数アクセスの順序問題を解決する。
8. What is Atomics? // thread1.js onmessage = buffer => { setTimeout(() => { buffer[0] = 1; buffer[1] = 1; }, 10000); } // thread3.js onmessage = buffer => { while (buffer[0] !== 0) { console.log(buffer[1]); //? } }
9. What is Atomics? // thread1.js onmessage = buffer => { setTimeout(() => { Atomics.store(buffer, 1, 1); Atomics.store(buffer, 0, 1); }, 10000); } // thread3.js onmessage = buffer => { while (Atomics.load(buffer, 0) !== 0) { console.log(Atomics.load(buffer, 1)); //1 } }
10. What is Atomics? メモリモデル Sequence Consistencyが導入されます。 acquire/release等のモデルは導入されません。 実装 Google Chrome CanaryとFirefoxで動きます。 エンジン 現在のV8ではコンパイラ組み込み関数 __atomics_** Interlocked** を使って実装されてます。 実装はsrc/runtime/runtime-atomics.ccにあります。
11. More detail ブログ見てね。 http://brn-log.hatenablog.com/entry/2017/02/07/164545
12. ありがとうございました！