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
9.2k
Webアプリケーションで 60fpsを(極力)目指す
KMC 春合宿2017で発表したトークです。
pastak
March 21, 2017
Tweet
Share
More Decks by pastak
See All by pastak
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.3k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
730
コミュニティが持続可能であるために考えておきたいこと/How to kill your community
pastak
0
2.6k
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
pastak
31
11k
ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon
pastak
3
3.1k
150人のOB会の主催をやった話 #yapcfukuoka #yapcjapan
pastak
0
2.1k
知っておきたいブラウザについての基礎入門
pastak
25
8.8k
BrowserExtension四方山話 #yapc8oji
pastak
3
1.4k
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
pastak
2
2.5k
Other Decks in Technology
See All in Technology
プログラミング未経験の学生をエンジニアにしてきたノウハウを公開
shinofumijp
0
160
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
970
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
110
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
8k
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
yoyakoba
0
790
Graph API について
miyakemito
0
290
LINEポイントクラブにおける PerlからKotlinへの移行を振り返る / The migration from Perl to Kotlin at LINE Point Club
line_developers
PRO
0
140
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
line_developers
PRO
0
750
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
3.9k
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
720
New Features in C# 10/11
chack411
0
1k
LINE WORKS API 2.0について
mmclsntr
0
140
Featured
See All Featured
Web development in the modern age
philhawksworth
197
9.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
A designer walks into a library…
pauljervisheath
196
16k
How STYLIGHT went responsive
nonsquared
85
3.9k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
The Cult of Friendly URLs
andyhume
68
4.7k
Rails Girls Zürich Keynote
gr2m
86
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
How GitHub (no longer) Works
holman
296
140k
Ruby is Unlike a Banana
tanoku
91
9.2k
Embracing the Ebb and Flow
colly
73
3.3k
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