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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Is Xcode slowly dying out in 2025?
uetyo
1
270
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.5k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The World Runs on Bad Software
bkeepers
PRO
69
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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
ありがとうございました!