WebWorker and Atomics

WebWorker &

Atomics

名前: @brn_take (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/

WebWorker使ってますか？

WebWorker

•  ネイティブスレッド！ •  起動も簡単 •  メッセージパッシングでスレッドを意識しなくて良い

Pros

Cons

•  文字列のやり取りしかできない •  postMessage面倒くさい

What is SharedArrayBuffer?

WebWorkerの欠点を解決するもの

各Worker間で値を共有することを可能にする。これによって、WorkerのIOでserialize/deserializeする必要がなくなった。しかし、新たな問題が… スレッド競合…

What is SharedArrayBuffer?

//main.js constworker=newWorker('thread1.js'); constsharedArrayBuffer=newSharedArrayBuffer(1024); worker.postMessage(sharedArrayBuffer); worker.addEventListener('message',m=>{console.log(sharedArrayBuffer); });

//thread.js onmessage=buffer=>{fetch(...) .then(res=>{ constresponseBuffer=newUInt8Array(res.arrayBuffer());

consttargetBuffer=newUInt8Array(buffer); targetBuffer.copy(responseBuffer); postMessage(targetBuffer); }); }

What is Atomics?

SharedArrayBufferの欠点を解決するもの

Atomics経由でSharedArrayBufferの値に触れることで、各スレッド間での変数アクセスの順序問題を解決する。

What is Atomics?

//thread1.js

onmessage=buffer=>{setTimeout(()=>{ buffer[0]=1;buffer[1]=1;},10000); }

//thread3.jsonmessage=buffer=>{while(buffer[0]!==0){console.log(buffer[1]);//? } }

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 } }

What is Atomics?

メモリモデル Sequence Consistencyが導入されます。 acquire/release等のモデルは導入されません。実装 Google Chrome CanaryとFirefoxで動きます。エンジン現在のV8ではコンパイラ組み込み関数 __atomics_** Interlocked** を使って実装されてます。実装はsrc/runtime/runtime-atomics.ccにあります。

More detail

ブログ見てね。 http://brn-log.hatenablog.com/entry/2017/02/07/164545

ありがとうございました！

Engineering

WebWorker and Atomics