Ecmascript2017の SharedArrayBuffer Atomics について

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