Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebWorker And Atomics

WebWorker And Atomics

WebWorkerとAtomics・SharedArrayBufferについて

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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. ありがとうございました!