Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebWorker And Atomics
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Programming
0
88
WebWorker And Atomics
WebWorkerとAtomics・SharedArrayBufferについて
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
5
2.5k
Parsing Javascript
brn
12
6.9k
JSON & Object Tips
brn
1
280
CA 1Day Youth Bootcamp for Frontend LT
brn
0
660
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
590
tc39 proposals
brn
0
640
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
490
Other Decks in Programming
See All in Programming
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
OpenTelemetry のサービスという概念について
azukiazusa1
1
390
Why 1 + 1 = 2 in Swift?
1plus4
1
240
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
object-oriented-conference-2024
fuwasegu
6
1.9k
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
Creating Retro-Style Photos Using Swift
ski
1
340
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
Designing for Performance
lara
601
67k
Fireside Chat
paigeccino
19
2.6k
What's in a price? How to price your products and services
michaelherold
236
11k
How to name files
jennybc
62
92k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Adopting Sorbet at Scale
ufuk
66
8.5k
Designing for humans not robots
tammielis
247
25k
Being A Developer After 40
akosma
56
580k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Optimizing for Happiness
mojombo
369
69k
Transcript
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 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); }); }
What is Atomics? SharedArrayBufferの欠点を解決するもの Atomics経由でSharedArrayBufferの値に触れることで、 各スレッド間での変数アクセスの順序問題を解決する。
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]); //? } }
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
ありがとうございました!