Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
20161113-nodefest
chikoski
November 13, 2016
Technology
12
4.5k
20161113-nodefest
chikoski
November 13, 2016
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
110
festudy02-wasm
chikoski
1
780
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
540
Functions in JavaScript
chikoski
1
810
20171018-WASM
chikoski
2
1k
20171002-wejs
chikoski
1
470
20170924-html5conference-wasm
chikoski
5
9.9k
Equivalence_in_JS
chikoski
0
810
いまさら振り返るPromise
chikoski
1
360
Other Decks in Technology
See All in Technology
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
830
GCCP Creator @ COSCUP 2022
line_developers_tw
PRO
0
1.4k
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
400
Power Automate for desktopで 配信環境を改善してみた話
akiika
0
260
Learning to Solve Hard Minimal Problems
takmin
1
320
ジョブ管理システムをAWS Step Functionsに移行する時の勘所
non97
0
490
ふりかえりの技術 / retrospectives
soudai
3
160
Trusted Web プロトタイプ
finengine
0
320
フィンテック養成勉強会#24
finengine
0
330
psql, my favorite tool!
nuko_yokohama
1
180
最先端の生成AIから考える、ビジネスにおける10年後のパラダイムシフト
sbtechnight
1
320
Oracle Cloud Infrastructure:2022年7月度サービス・アップデート
oracle4engineer
PRO
0
180
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Practical Orchestrator
shlominoach
178
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
In The Pink: A Labor of Love
frogandcode
131
21k
4 Signs Your Business is Dying
shpigford
169
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Building an army of robots
kneath
298
40k
Navigating Team Friction
lara
175
11k
Bash Introduction
62gerente
598
210k
Transcript
JavaScriptでの並列プログラミング: 共有メモリーと不可分操作、ロック N.Shimizu (nshimizu@mozilla-japan.org) 東京node学園祭(2016/11/13)
N. Shimizu / @chikoski •Mozilla Japan で Developer relation (エヴァンジェリスト)をしています
JavaScript, asm.js, WASM, DevTools, Rust, etc •ドキュメントの翻訳や、製品の翻訳も行なっています •コミュニティ活動: •html5j Web プラットフォーム部 / ゲーム部 •We are JavaScripters •プログラミング言語そのものが好きです •https://speakderdeck.com/chikoski/
None
None
Proudly non-profit, Mozilla makes products like Firefox with a mission
to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)
Our mission is to promote openness, innovation & opportunity on
the Web. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
Project Positron(Geckoを使用したElectron互換のアプリシェル) : https://github.com/mozilla/positron
JavaScriptはメインスレッドの時間を譲り合って共有します • 非同期処理を行うことで、実行時間を他のプログラムに譲れます • 例:アニメーション • スケジューラーがある場合:アニメーションを行う長い繰り返し処理 • JS: 1フレームごとの処理に分割し、window.requestAnimationFrameで他のプログラムに時間を譲る
1フレームの処理 1フレームの処理 1フレームの処理 非同期 処理 非同期 処理 非同期 処理 他の処理 他の処理
GVODUJPOVQEBUF \ CFGPSF6QEBUF VQEBUF0CKFDU4UBUVT VQEBUF(SBQIJDT BGUFS6QBUF
XJOEPXSFRVFTU"OJNBUJPO'SBNF VQEBUF ^ window.requestAnimationFrame を利用したアニメーションの描画ループ
WPJENBJO \ XIJMF USVF \ֿך搀ꣲٕ٦فכ04ח״גծ黝㹅♧儗⨡姺ׁתׅ CFGPSF@VQEBUF VQEBUF@PCKFDU@TUBUVT VQEBUF@HSBQIJDT
BGUFS@VQEBUF ^ ^ 典型的なアニメーションループ
GVODUJPOEP5BTL \ EP5BTL" EP5BTL# EP5BTL$ EP5BTL%
^ אהװחכ儗ַַָֺׅ GVODUJPOEP5BTL \ EP5BTL" EP5BTL# XJOEPXTFU*NNFEJBUF \ EP5BTL$ EP5BTL% ^ ^ window.setImmediateを利用した、明示的な処理時間の移譲
GVODUJPOMPX1SJPSJUZ5BTL EFBEMJOF \ JG EFBEMJOFUJNF3FNBJOJOH \ EP4PNFUIJOH ^
^ XJOEPXSFRVFTU*EMF$BMMCBDL MPX1SJPSJUZ5BTL XJOEPXSFRVFTU*EMF$BMMCBDL MPX1SJPSJUZ5BTL \UJNFPVU^ 空き時間にする処理の登録
メインスレッドだけを効率よく使うには • 仕事を適切な粒度に分解して、分解された仕事と仕事の間に適切に非同期処理を入れてやる • window.requestAnimationFrame • window.setTimeout, window.setInterval, window.setImmediate •
隙間時間に仕事をうまく入れていく: window.requestIdleCallBack • 1つのスレッドを効率よく使う、というアプローチには限界があります • 凝集度が下がり、プログラムは読みにくくなります • 仕事をどうしても分割できない場合もあります
マルチスレッドプログラミング
マルチスレッドプログラムとは • 複数の処理の流れ(スレッド)を利用するプログラムのこと • JavaScriptではWeb Workersを利用することで、マルチスレッドプログラムを実現できます taskA taskB TaskC taskD
taskA taskB taskA taskD taskD taskD taskD taskD taskD
DPOTUXPSLFSOFX8PSLFS XPSLFSKT 8PSLFSך⡲䧭 8PSLFSַךًحإ٦آ「ֽ《عٝسٓ XPSLFSPONFTTBHFNFTTBHF\ DPOTUEBUBNFTTBHFEBUB EPTPNFUIJOH ^ ً؎ٝفؚٗٓيַ8PSLFSפךًحإ٦آך鷏⥋ XPSLFSTFOE.FTTBHF
\DPNNBOETVN OVNCFST< >^ Workerを利用するプログラムの例:mainスレッド側
JNQPSU4DSJQUT DPNNBOEKT أؙٔفزך؎ٝه٦ز PONFTTBHFFWFOU\ DPOTUEBUBNFTTBHFEBUB DPOTU\OBNF OVNCFST^EBUB DPOTUDPNNBOEHFU$PNNBOE#Z/BNF OBNF
DPOTUSFTVMUDPNNBOE OVNCFST QPTU.FTTBHF \DPNNBOEOBNF SFTVMUSFTVMU^ ^ Workerを利用するプログラムの例:ワーカースレッド側
DPOTUPCK\WBMVF^ XPSLFSQPTU.FTTBHF PCK XPSLFSPONFTTBHF EBUB\ DPOTPMFMPH PCKEBUB ^
PONFTTBHFGVODUJPO EBUB \ QPTU.FTTBHF EBUB ^ main worker メッセージを通じて渡されるオブジェクトはコピーされる
ArrayBuffer:固定長のバイト列 • 固定長のバイナリーデータを扱うためのデータ構造です • 各要素へ直接アクセスすることはできません IUUQDBOJVTFDPNTFBSDI"SSBZ#VGGFS
DPOTUCVGGFSOFX"SSBZ#VGGFS غ؎زך㔿㹀ꞿךꂁ然⥂ DPOTUWJFXOFX*OU"SSBZ CVGGFS غ؎زךꂁؽحزך侭侧ךꂁה׃ג،ؙإأׅךؽُ٦⡲䧭 GPS MFUJJWJFXMFOHUIJ \
WJFX<J>.BUIGMPPS .BUISBOEPN /VNCFS."9@4"'&@*/5&(&3 ^ 格納するデータの種類に合わせたビューを作成し、そのビューを通じてアクセスする
ؽُ٦ ؟؎ؤ 铡僇 ず瘝ך$ך㘗 *OU"SSBZ 痗〾אֹ侭侧ך酡侧 JOU@U 6JOU"SSBZ
痗〾ז׃侭侧 VJOU@U 6JOU$MBNQU"SSBZ 痗〾ז׃侭侧ؙٓٝف VJOU@U *OU"SSBZ 痗〾אֹ侭侧ך酡侧 JOU@U 6JOU"SSBZ 痗〾ז׃侭侧 VJOU@U *OU"SSBZ 痗〾אֹ侭侧ך酡侧 JOU@U 6*OU"SSBZ 痗〾ז׃侭侧 VJOU@U 'MPBU"SSBZ 嵤⹛㼭侧挿 PBU 'MPBU"SSBZ ⦓礵䏝嵤⹛㼭侧挿 EPVCMF
GFUDI BFODPEFE UIFO SSBSSBZ#VGGFS UIFO CVG\ XPSLFSQPTU.FTTBHF CVG
^ XPSLFSPO.FTTBHFEP4PNF5IJOH PONFTTBHFGVODUJPO EBUB \ DPOTUWJFX OFX*OU"SSBZ EBUB EFDPEF WJFX QPTU.FTTBHF WJFXCVGGFS ^ データがなんどもコピーされて非効率 main worker
DPOTUCVGGFSOFX"SSBZ#VGGFS GVODUJPOUSBOTGFS \ DPOTPMFMPH CVGGFS խ"SSBZ#VGGFS\CZUF-FOHUI^ XPSLFSQPTU.FTTBHF CVGGFS
<CVGGFS> DPOTPMFMPH CVGGFS "SSBZ#VGGFS\CZUF-FOHUI^ DPOTPMFMPH CVGGFSCVGGFS USVF ^ ArrayBufferは、その所有権をスレッド間で移動できます
GFUDI BFODPEFE UIFO SSBSSBZ#VGGFS UIFO CVG\ XPSLFSQPTU.FTTBHF CVG
<CVG> ^ XPSLFSPO.FTTBHFEP4PNF5IJOH PONFTTBHFGVODUJPO EBUB \ DPOTUWJFX OFX*OU"SSBZ EBUB EFDPEF WJFX QPTU.FTTBHF WJFXCVGGFS <WJFXCVGGFS> ^ 所有権の移動を利用したコード main worker
メインスレッドをブロックしなくても、重たい処理を行えるように • Web Workers を利用することで、メインスレッド以外にスレッドを作成できます • 作成したスレッドで重たい処理をすれば、メインスレッドを占有することはありません • 大きなArrayBufferは所有権を移動させることで、効率よく転送できます fetch
task decode doSomething task task task task task QPTU.FTTBHF QPTU.FTTBHF
3つ以上のスレッドで、ArrayBufferを共有するには? • データを利用した処理を複数の主体で行う場合もあります • 同じデーターに対して、異なる処理をする場合 • 同じデーターの異なる部分に対して、同じ処理をする場合 • 所有権は1つのスレッドしか持てないので、データをコピーするしかない? أٖحس
"SSBZ#VGGFS أٖحس "SSBZ#VGGFS ずׄ"SSBZ#VGGFS䭯גךַ
SharedArrayBuffer • スレッド間で共有可能なArrayBuffer • ArrayBuffer同様、ビュー経由で要素にアクセスします • "ECMAScript Shared Memory and
Atomics" で提案中です http://tc39.github.io/ecmascript_sharedmem/shmem.html أٖحس 4IBSFE"SSBZ#VGGFS أٖحس 4IBSFE"SSBZ#VGGFS 4IBSFE"SSBZ#VGGFS
DPOTUCVGGFSOFX4IBSFE"SSBZ#VGGFS GVODUJPOUSBOTGFS \ DPOTPMFMPH CVGGFS խ4IBSFE"SSBZ#VGGFS\CZUF-FOHUI^ XPSLFSQPTU.FTTBHF CVGGFS
<CVGGFS> DPOTPMFMPH CVGGFS 4IBSFE"SSBZ#VGGFS\CZUF-FOHUI^ DPOTPMFMPH CVGGFSCVGGFS USVF ^ 共有されているので、postMessageで受け渡した後も領域を参照できます
DPOTUIFBQ OFX6*OU"SSBZ CVGGFS IFBQ<>IFBQ<> DPOTUIFBQ OFX6*OU"SSBZ CVGGFS
IFBQ<> 2つの計算が終わった時、view[0] にはなにが入っているでしょうか? threadA threadB
heap[0] = heap[0] == 0 ? 2 : 0; はいくつかの処理に分割されます
a = [0]; a = a + 2; view[0] = a; view[0] = 1; a = view[0]; a = a + 2; view[0] = a; view[0] = 1; a = view[0]; a = a + 2; view[0] = a; view[0] = 1;
共有メモリには、Atomicsオブジェクトの提供する不可分操作を利用してアクセス します DPOTUIFBQOFX6*OU"SSBZ CVGGFS "UPNJDTDPNQBSF&YIBOHF IFBQ
DPOTUIFBQOFX6*OU"SSBZ CVGGFS IFBQ<>IFBQ<> Atomics利用 Atomicsなし
ꟼ侧 铡僇 "UPNJDTBEE 䭷㹀⡘縧ך⦼הך⸇皾遤ְծך穠卓ך⡘縧ח剅ֹ䨱ׅ "UPNJDTBOE 䭷㹀⡘縧ך⦼הך锷椚琎鎘皾ׅ "UPNJDTDPNQBSF&YDIBOHF 䭷㹀⡘縧ך⦼ה嫰鯰遤ְծ瘝׃ְ㜥さծך⡘縧ך⦼縧ֹ䳔ִ "UPNJDTFYDIBOHF 䭷㹀⡘縧ך⦼ծⴽך⦼הⰅ剏ִ
"UPNJDTMPBE 䭷㹀⦼ך⦼《䖤ׅ "UPNJDTPS 䭷㹀⡘縧ך⦼הך锷椚ㄤ鎘皾ׅ "UPNJDTTUPSF 䭷㹀⡘縧ח⦼鏣㹀ׅ "UPNJDTTVC 䭷㹀⡘縧ך⦼הך幾皾遤ְծך穠卓ך⡘縧ח剅ֹ䨱ׅ "UPNJDTYPS 䭷㹀⡘縧ך⦼הך䱖➭涸锷椚ㄤ鎘皾ׅ
食事する哲学者の問題 • 複数プロセスの同期制御に関する古典的な問題 • 問題: • 哲学者が円卓を囲んでいる • 哲学者はときおり考えるのやめて、食事をする •
食事には2本のフォークが必要で、 一度には1本のフォークしかとれない • 哲学者同士は会話をしない • 哲学者は食事することがきるだろうか? IUUQTKBXJLJQFEJBPSHXJLJ굸✲ׅㆸ㷕罏ך㉏겗
Atomics.wait / Atomics.wake • 特定の条件が true になるまで待つ手段 • 待っている間、処理はその式でブロックされる •
起動されると、その式以降から実行が継続されます • 条件の指定方法、 • 共有された指定位置の値が、指定された値と等しい間、待ちます • 使用できるのは、共有されたInt32Arrayのみ • Atomics.waitをメインスレッドで呼ぶことはできません
XPSLFSQPTU.FTTBHF IFBQCVGGFFS <IFBQCVGGFS> EP4PNFUIJOH "UPNJDTXBLF IFBQ
"UPNJDTTUPSF IFBQ "UPNJDTXBLF IFBQ PONFTTBHFGVODUJPO CVGGFS \ DPOTUIFBQ OFX6*OU"SSBZ CVGGFS DPOTPMFMPH "UPNJDTMPBE IFBQ "UPNJDTXBJU IFBQ DPOTPMFMPH "UPNJDTMPBE IFBQ main worker 起こすメインスレッドと、待つワーカースレッド
DPOTU7"-*% DPOTU*/7"-*% "UPNJDTTUPSF IFBQ */7"-*% XPSLFSQPTU.FTTBHF IFBQCVGGFS
<IFBQCVGGFS> QSPEVDF IFBQ "UPNJDTTUPSF IFBQ 7"-%*% "UPNJDTXBLF IFBQ DPOTU*/7"-*% PONFTTBHFGVODUJPO CVGGFS \ DPOTUIFBQ OFX6*OU"SSBZ CVGGFS "UPNJDTXBJU IFBQ */7"-*% DPOTVNF IFBQ ^ main worker 生産者と消費者
DPOTU4*(/"&-&% DPOTU&7&/5@" GVODUJPOGJSF RVFVF FWFOU5ZQF \ "UPNJDTTUPSF RVFVF FWFOU5ZQF
4*(/"-&% "UPNJDTXBLF RVFVF FWFOU5ZQF ^ GJSF RVFVF &7&/5@" DPOTU6/4*(/"-&% DPOTU&7&/5@" "UPNJDTXBJU RVFVF &7&/5@" 6/4*(/"-&% IBOEM&WFOU" main worker Event object
IUUQTCMPHTVOJUZEDPNKQVQEBUFEXFCHMCFODINBSLSFTVMUT
.BJO5ISFBE 8PSLFS5ISFBE CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS DPQZ
5SBOTGFS 3FGFS 3FGFS DPOTUCVGGFSOFX"SSBZ#VGGFS XPSLFSQPTU.FTTBHF CVGGFS DPOTUCVGGFSOFX"SSBZ#VGGFS XPSLFSQPTU.FTTBHF CVGGFS <CVGGFS> DPOTUCVGGFSOFX4IBSFE"SSBZ#VGGFS XPSLFSQPTU.FTTBHF CVGGFS <CVGGFS>