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.3k
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
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
テスト駆動Kaggle
isax1015
1
620
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
What's new in AppKit on macOS 26
1024jp
0
150
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
CDK引数設計道場100本ノック
badmintoncryer
2
480
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Site-Speed That Sticks
csswizardry
10
700
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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
ありがとうございました!