Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Webアプリケーションで 60fpsを(極力)目指す
pastak
March 21, 2017
Technology
19
8.8k
Webアプリケーションで 60fpsを(極力)目指す
KMC 春合宿2017で発表したトークです。
pastak
March 21, 2017
Tweet
Share
More Decks by pastak
See All by pastak
pastak
1
1.1k
pastak
0
550
pastak
0
2k
pastak
31
11k
pastak
3
2.8k
pastak
0
1.9k
pastak
25
7.8k
pastak
3
1.1k
pastak
2
2.3k
Other Decks in Technology
See All in Technology
kraj
0
730
clustervr
0
200
harshbothra
0
120
sasakendayo
2
410
ishiayaya
PRO
0
340
vkbaba
0
140
kraj
0
710
torisoup
0
290
kawaguti
0
120
kanaugust
PRO
0
230
ocise
0
140
shomaekawa
3
1.2k
Featured
See All Featured
revolveconf
200
9.6k
destraynor
146
19k
malarkey
119
16k
productmarketing
5
650
bkeepers
52
4.1k
maggiecrowley
8
400
tmm1
61
8.4k
moore
125
21k
keithpitt
401
20k
notwaldorf
13
1.5k
morganepeng
92
14k
tammielis
237
23k
Transcript
WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)ࢦ͢ Pasta-K pasta0915@gmail.com at KMC Spring Camp 2017
@pastakɹ
@pastakɹ • ژେֶͰֶੜΛ͍ͬͯ·͢ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript
/ React • Ruby on Rails • Browser Extension
None
@pastakɹ • ژେֶͰֶੜΛ͍ͬͯ·͢ • ژେϚΠίϯΫϥϒ • ݩใ • JavaScriptͰੈքฏ2014 •
KMCτοϓϖʔδ୲ • ҿञ
ຊͷ͓ॻ͖ • Σϒϒϥβʹ͍ͭͯ • ϒϥβͷΈհɾιϑτΣΞߏ • ϒϥβ্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ • Ξχϝʔγϣϯ࣌ͷϒϥβͷৼΔ͍ •
Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ • 60fpsΛग़ͨ͢ΊʹؾΛ͚͓͖͍ͯͨදతͳςΫχοΫ
ࠓ͞ͳ͍͜ͱ • RenderingΤϯδϯJavaScriptΤϯδϯͷৄࡉ ͳৼΔ͍ʹ͍ͭͯ • JSCSSͷҎ֎ͷΣϒΞϓϦέʔγϣϯߴ ԽΞϓϩʔνʹ͍ͭͯ(ίϯςϯπ৴ͷͳ Ͳ) • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠·͢
λʔήοτͱΰʔϧʹ͍ͭͯ • λʔήοτ • ϒϥβͰಈ͘JSΛॻ͍͍ͯΔਓʢಛʹΞχϝʔ γϣϯΛצͰ͍͍ͬͯͬͯΔਓʣ • ࠓޙͦͷΑ͏ͳ͜ͱΛ͢ΔՄೳੑͷ͋Δਓ • ΰʔϧ
• ॴҦʰψϧψϧಈ͘ʱը໘ͷͨΊʹඞཁͳ͜ͱͷ ֓ཁΛ௫Ή = ԿނʰΨλͭ͘ʱͷ͔ΛΔ
߹ΘͤͯಡΈ͍ͨ • ͜ͷεϥΠυαϘͬͨͷͰɺҎԼͷεϥΠυΛݩʹϒϥβͷ ྺ࢙ʹؔ͢Δઆ໌ΛͬͯɺϨϯμϦϯά࣮ྫͱղઆʹ͍ͭͯ૿ ͨ͠ࢿྉʹͳΓ·͢ ͓͖͍ͬͯͨϒϥβʹ͍ͭͯͷجૅೖ // Speaker Deck https://speakerdeck.com/pastak/zhi-tuteokitaiburauzanituitefalseji-chu-ru-men
ຊͷ͓ॻ͖ • Σϒϒϥβʹ͍ͭͯ • ϒϥβͷΈհɾιϑτΣΞߏ • ϒϥβ্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ • Ξχϝʔγϣϯ࣌ͷϒϥβͷৼΔ͍ •
Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ • 60fpsΛग़ͨ͢ΊʹؾΛ͚͓͖͍ͯͨදతͳςΫχοΫ
Σϒϒϥβ ͷجຊߏ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΞυϨεόʔɾπʔϧόʔ ֤छϘλϯ ਐΉΔ ϒοΫϚʔΫɹͳͲ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 6*ͱ֤छΤϯδϯͱͷ ϝοηʔδͷΓऔΓΛհ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )5.-9.-Λύʔε͠ɺ ը໘ʹදࣔ͢ΔͨΊͷ ϨΠΞτΛߏங͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )551'51ͳͲΛΔ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ 3FOEFSJOH&OHJOFʹ͢
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠ ϓϦϯλ ͦͷଞग़ྗ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ࠓ͔͜͜Β ͜ͷͭʹͯ͠ ۷ΓԼ͛ͯΈ·͢
ϨϯμϦϯάΤϯδϯͷׂ • ϨϯμϦϯάΤϯδϯHTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛѲ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛஔ
• ඳըͷੜ ※ҎԼͰHTMLͱͷΈදه͠·͢
ϨϯμϦϯάΤϯδϯͷׂ • ϨϯμϦϯάΤϯδϯHTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛѲ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛஔ
• ඳըͷੜ -BZPVU 1BSTF 1BJOU
ϨϯμϦϯάϑϩʔͷҰྫ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
JavaScriptΠϯλʔϓϦλͷׂ • JavaScriptͷղੳɾ࣮ߦ
JavaScriptΠϯλʔϓϦλͷׂ • JavaScriptͷղੳɾ࣮ߦ &WBMVBUF
۩ମతͳ Σϒϒϥβ ʹ͍ͭͯ
Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOperaԿ͕ҧ͏ʁ
None
Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge #MJOL 7
#MJOL 7 8FCLJU +BWB4DSJQU $PSF 5SJEFOU $IBLSB (FDLP 4QJEFS .POLFZ #MJOL 7 &EHF)5.- $IBLSB ϨϯμϦϯάΤϯδϯ +4ΠϯλʔϓϦλ
Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Based (Forked)
Chromium
Chrome Opera Vivaldi #MJOL 7 #MJOL 7 #MJOL 7 ڞ௨
ҟͳΔ
Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOperaԿ͕ҧ͏ʁ ෦ར༻͍ͯ͠Δ Τϯδϯ͕ҟͳΔ
Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOperaԿ͕ҧ͏ʁ ྆ํಉ͡$ISPNJVNΛ ϕʔεʹར༻͍ͯ͠Δ͕ɺ 6*ͳͲ͕ҟͳΔ
ϨϯμϦϯάϑϩʔ ʹͯ͠ΈΔ
ϨϯμϦϯάΤϯδϯͷׂ • ϨϯμϦϯάΤϯδϯHTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛѲ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛஔ
• ඳըͷੜ -BZPVU 1BSTF 1BJOU
ϨϯμϦϯάΤϯδϯͷׂ • ϨϯμϦϯάΤϯδϯHTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛѲ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛஔ
• ඳըͷੜ • ↑ΛϨΠϠʔ͝ͱʹੜͷޙɺ߹ -BZPVU 1BSTF 1BJOU $PNQPTJUF -BZFST
JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ •
ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST
Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
DEMO http://codepen.io/paulirish/full/nkwKs/ http://codepen.io/paulirish/full/LsxyF/
ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢߹ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ
+4͔Β MFGUͳͲΛ มߋͨ͠߹
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ 3FOEFSJOH&OHJOFʹ͢
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ ϨΠΞτΛߏங͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΓऔΓΛհ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ දࣔ͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ 3FOEFSJOH&OHJOFʹ͢
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ ϨΠΞτΛߏங͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΓऔΓΛհ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ දࣔ͢Δ
$44ͷ USBOTGPSNͰ มߋͨ͠߹
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ ϨΠΞτΛߏங͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΓऔΓΛհ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ දࣔ͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ ϨΠΞτΛߏங͢Δ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΓऔΓΛհ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ දࣔ͢Δ
Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ ্ͷϑϩʔ͕ൃੜͨ͠߹ جຊతʹͦΕҎ߱ͷϑϩʔ͕ ॱ൪ʹൃੜ͢Δ
ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢߹ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ •
ग़དྷΔݶΓ͍ܰϨϯμϦϯάϑϩʔͰऩ·Δ Α͏ʹ͍ͯ͘͠ͱྑ͍
GQTΛग़ͨ͢ ΊʹؾΛ͚ͨ ͍දతͳςΫ χοΫΛհ
ຊհ͢ΔςΫχοΫҰཡ • Forced Synchronous Layout • CSS Containment • scrollδϟϯΫ
• GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ • CSS `will-change` • ίϥϜ: repaintͷλΠϛϯά͍͔ͭ
ςΫχοΫΛհ͢Δલʹ • ChromeͷDevToolͰ͜ΕΒΛܭଌͨ͠Γ؍ଌ ͨ͠Γग़དྷΔ • (͜͜ʹεΫγϣΛೖΕ͔͕ͨͬͨΘΓʹ࣮ ը໘Ͱઆ໌͠·͢)
'PSDFE 4ZODISPOPVT -BZPVU
JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ •
ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST
JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ •
ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺΕΔϨΠΞτܭࢉॲཧ͕ Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞτܭࢉΛߦ͏ɻ ྫFMFNPGGTFU-FGUFMFNHFU$MJFOU3FDUT FMFNDMJFOU8JEUI ͜ΕΒͷΛਖ਼͘͠ΔʹݱࡏͷϨΠΞτʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕ ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷΛ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ ࣮ࡍͷϨϯμϦϯάͱผͰϨΠΞτܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ ඇৗʹ͘ͳͬͯ͠·͏
JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) •
ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ • ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ
JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) w
ϨΠΞτΛੜ w ϨΠϠʔ͝ͱʹඳըΛੜ w ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ w ϨϯμϦϯά݁Ռ͔ΒΛฦ٫ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ • ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ
DEMO https://googlesamples.github.io/web-fundamentals/ tools/chrome-devtools/rendering-tools/forcedsync.html
$44 $POUBJONFOU
css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ͍Λ੍ޚͰ͖Δ
css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ •
layout: ܑఋཁૉͷϨΠΞτʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ •
layout: ܑఋཁૉͷϨΠΞτʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ •
layout: ܑఋཁૉͷϨΠΞτʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍ ಛʹ͜ͷ2ͭͷΛࢦఆ͢Δͱ ϨϯμϦϯάϑϩʔͷ੍ޚʹڧ͍ӨڹΛ ༩͑Δ͜ͱ͕Ͱ͖Δ
DEMO http://codepen.io/ahomu/pen/ZpKGrN
TDSPMMδϟϯΫ
scrollδϟϯΫ • ϞόΠϧڥͳͲͰεΫϩʔϧͷ٧·Γ(scroll-jank) Λղܾ͢ΔͨΊͷΈͱͯ͠ɺPassive Event Listeners͕ಋೖ͞Εͨ • εΫϩʔϧΛൃੜͤ͞ΔΠϯλϥΫγϣϯΛ࣮ ͢ΔࡍͷtouchstarttouchendͰ event.preventDefault()ΛݺΕ(Δ|ͳ͍)͜ͱΛอ
ূ͢Δ
Passive Event Listeners • preventDefault()Λݺͳ͍͜ͱΛอূ͢Δ߹ɺ addEventListener()ͷୈ3Ҿʹ{passive: true}Λ ͢͜ͱͰ࣮ݱͰ͖Δ
⚠ޓੑͷʹ͍ͭͯ • Passive ListenerʹରԠ͍ͯ͠ͳ͍ϒϥβͷ߹ɺ addEventListerͷୈ3Ҿ useCapture ͕trueͰ͋Δͱͯ͠ѻΘ Εͯ͠·͏ • ΠϕϯτόϒϦϯάϑΣʔζͰͳ͘ɺΩϟϓνϟϦϯά
ϑΣʔζͰൃՐ͞ΕΔ͜ͱʹͳΔɻ • Event Listener Options ରԠҎ߱ɺ͜͜ʹΦϒδΣΫτΛ͢ ͜ͱʹͳΔͨΊɺ useCapture ϑϥά૬ɺ {capture: true} ͱͯ͠ϓϩύςΟʹΑΔఆٛΛߦ͏ɻ
DEMO http://labs.jxck.io/passive-event-listeners/index.html
(16ΞΫηϥ ϨʔγϣϯΛ ༗ޮతʹར༻ ͢Δ
GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacitytransformɺrorateͳͲΛར༻ ͨ͠߹ • Composite LayersͷϑΣΠζͱݴͬͯྑ͍
css: will-change • ͜ͷઌى͖ΔϨϯμϦϯά༰Λ௨͠ɺɹ ϨϯμϦϯάϨΠϠʔΛϒϥβʹ༧Ί४උ ͓ͯ͘͠Α͏ཁ͕Ͱ͖Δ • ͜ͷϨϯμϦϯάϨΠϠʔͷੜʹGPU ͕ޮ͘
⚠ར༻࣌ͷҙ • ͜ͷϓϩύςΟΛCSSͰ༧Ίࢦఆͯ͠͠·͏ͱϨϯμϦϯά ϨΠϠʔͷΩϟογϡ͕େྔʹੜ͞Εͯ͠·͍ύϑΥʔϚ ϯεʹѱӨڹΛ༩͑ͯ͠·͏ • JSΛར༻ͯ͠ඞཁͳλΠϛϯάͰ༩͢Δͷ͕ྑ͍ͱ͞Εͯ ͍Δ • ͕ɺJSͰ༩͢ΔλΠϛϯά͕લ͗͢ΔͱϨϯμϦϯάϨ
ΠϠʔΛཪͰੜ͢Δ༛༧͕ΓͣޮՌ͕ൃشͰ͖ͳ͍߹ ͕͋Δ
GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacitytransformɺrorateͳͲΛར༻ ͨ͠߹ • Composite LayersͷϑΣΠζͱݴͬͯྑ͍
GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacitytransformɺrorateͳͲΛར༻ ͨ͠߹ • Composite LayersͷϑΣΠζͱݴͬͯྑ͍ • ͏1ͭڧʹޮ͔ͤΔํ๏͕͋Δʂʂʂ
GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacitytransformɺrorateͳͲΛར༻ ͨ͠߹ • Composite LayersͷϑΣΠζͱݴͬͯྑ͍ • ͏1ͭڧʹޮ͔ͤΔํ๏͕͋Δʂʂʂ •
<canvas>ͷඳըGPU͕ޮ͘ʂʂʂʂʂʂ
ۃʹ<canvas>Λར༻ͨ͠ྫ • FlipboardͷεϚϗ൛ • શͯͷϏϡʔ͕<canvas>্ʹඳ͔Ε͍ͯΔ • https://github.com/Flipboard/react- canvas
DEMO
ίϥϜ SFQBJOUSFqPX ͷλΠϛϯά ͍͔ͭ
repaint/reflow timing • DOMʹૠೖͨ͠Node͍ͭϨϯμϦϯά͞ΕΔͷ͔ • ref: ReactͷcomponentDidMount͕ൃՐ͢Δͱ͖ɺ Mount͞Ε͍ͯΔ͕ɺຊʹϨϯμϦϯά͞Εͯ ͍Δͷ͔ʁ •
repaint͞ΕΔΑΓૣ͍߹ɺclientHeightͳͲ͕ظ ͨ͠ΛऔಘͰ͖ͳ͍
݁
݁ • ݫີʹਖ਼͍͠repaintޙͷλΠϛϯά (onpaintతͳ)ΛΔ͜ͱग़དྷͳ͍ • window.requestAnimationFrameͱ͔ʁ
·ͱΊ
Σϒϒϥβͷجຊߏ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
ϨϯμϦϯάϑΣΠζʹ͍ͭͯ • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞτΛੜ •
ϨΠϠʔ͝ͱʹඳըΛੜ • ϨΠϠʔΛ߹͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST
ຊհͨ͠ςΫχοΫҰཡ • Forced Synchronous Layout • CSS Containment • scrollδϟϯΫ
• GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ • CSS `will-change` • ίϥϜ: repaintͷλΠϛϯά͍͔ͭ
͞Βʹৄ͘͠Γ͍ͨ߹ • How browsers work - http://taligarsiel.com/Projects/ howbrowserswork1.htm • ϒϥβͷ෦ͰԿ͕ى͖͍ͯΔͷ͔ʹ͍ͭͯ
• Demystifying (JavaScript) Engines - https://github.com/ a0viedo/demystifying-js-engines • JavaScriptΤϯδϯͷ෦ߏʹ͍ͭͯཧղ͢ΔͨΊͷઆ ໌ɾؔ࿈จͳͲͷϦϯΫू • ͦͷଞࢀߟURLͳͲ: http://bit.ly/pastak-shownote-20170217