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
120
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
6
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Discover Metal 4
rei315
2
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Scaling GitHub
holman
460
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
A designer walks into a library…
pauljervisheath
207
24k
Optimizing for Happiness
mojombo
379
70k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
For a Future-Friendly Web
brad_frost
179
9.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
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
ありがとうございました!