Webアプリケーションで 60fpsを(極力)目指す

KMC 春合宿2017で発表したトークです。

Transcript

1. WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)໨ࢦ͢ Pasta-K pasta0915@gmail.com at KMC Spring Camp 2017
2. @pastakɹ
3. @pastakɹ • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React • Ruby on Rails • Browser Extension
5. @pastakɹ • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢ • ژେϚΠίϯΫϥϒ • ݩ޿ใ • JavaScriptͰੈքฏ࿨2014 • KMCτοϓϖʔδ୲౰ • ҿञ
6. ຊ೔ͷ͓඼ॻ͖ • ΢Σϒϒϥ΢βʹ͍ͭͯ • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒ • ϒϥ΢β্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ • Ξχϝʔγϣϯ࣌ͷϒϥ΢βͷৼΔ෣͍ • Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ • 60fpsΛग़ͨ͢ΊʹؾΛ෇͚͓͖͍ͯͨ୅දతͳςΫχοΫ
7. ࠓ೔࿩͞ͳ͍͜ͱ • RenderingΤϯδϯ΍JavaScriptΤϯδϯͷৄࡉ ͳৼΔ෣͍ʹ͍ͭͯ • JS΍CSSͷ޻෉Ҏ֎ͷ΢ΣϒΞϓϦέʔγϣϯߴ ଎ԽΞϓϩʔνʹ͍ͭͯ(ίϯςϯπ഑৴ͷ޻෉ͳ Ͳ) • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠·͢
8. λʔήοτͱΰʔϧʹ͍ͭͯ • λʔήοτ • ϒϥ΢βͰಈ͘JSΛॻ͍͍ͯΔਓʢಛʹΞχϝʔ γϣϯΛצͰ΍͍͍ͬͯͬͯΔਓʣ • ࠓޙͦͷΑ͏ͳ͜ͱΛ͢ΔՄೳੑͷ͋Δਓ • ΰʔϧ • ॴҦʰψϧψϧಈ͘ʱը໘ͷͨΊʹඞཁͳ͜ͱͷ ֓ཁΛ௫Ή = ԿނʰΨλͭ͘ʱͷ͔Λ஌Δ
9. ߹ΘͤͯಡΈ͍ͨ • ͜ͷεϥΠυ͸αϘͬͨͷͰɺҎԼͷεϥΠυΛݩʹϒϥ΢βͷ ྺ࢙ʹؔ͢Δઆ໌Λ࡟ͬͯɺϨϯμϦϯά࣮ྫͱղઆʹ͍ͭͯ૿ ΍ͨ͠ࢿྉʹͳΓ·͢ ஌͓͖͍ͬͯͨϒϥ΢βʹ͍ͭͯͷجૅೖ໳ // Speaker Deck https://speakerdeck.com/pastak/zhi-tuteokitaiburauzanituitefalseji-chu-ru-men
10. ຊ೔ͷ͓඼ॻ͖ • ΢Σϒϒϥ΢βʹ͍ͭͯ • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒ • ϒϥ΢β্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ • Ξχϝʔγϣϯ࣌ͷϒϥ΢βͷৼΔ෣͍ • Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ • 60fpsΛग़ͨ͢ΊʹؾΛ෇͚͓͖͍ͯͨ୅දతͳςΫχοΫ
11. ΢Σϒϒϥ΢β
    ͷجຊߏ੒
12. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
13. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΞυϨεόʔɾπʔϧόʔ
    ֤छϘλϯ ਐΉ໭Δ
    ϒοΫϚʔΫɹͳͲ
14. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 6*ͱ֤छΤϯδϯͱͷ
    ϝοηʔδͷ΍ΓऔΓΛ஥հ
15. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )5.-9.-Λύʔε͠ɺ ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
16. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )551΍'51ͳͲΛ஻Δ
17. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
18. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠ
    ϓϦϯλ
    ͦͷଞग़ྗ
19. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
20. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ ※ҎԼͰ͸HTMLͱͷΈදه͠·͢
21. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ -BZPVU 1BSTF 1BJOU
22. ϨϯμϦϯάϑϩʔͷҰྫ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
23. JavaScriptΠϯλʔϓϦλͷ໾ׂ • JavaScriptͷղੳɾ࣮ߦ
24. JavaScriptΠϯλʔϓϦλͷ໾ׂ • JavaScriptͷղੳɾ࣮ߦ &WBMVBUF
25. ۩ମతͳ
    ΢Σϒϒϥ΢β
    ʹ͍ͭͯ
26. Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
28. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
29. 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ΠϯλʔϓϦλ
30. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Based (Forked) Chromium
31. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 ڞ௨ ҟͳΔ
32. Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ
33. Question • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ
34. ϨϯμϦϯάϑϩʔ
    ʹ஫໨ͯ͠ΈΔ
35. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ -BZPVU 1BSTF 1BJOU
36. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ • ↑ΛϨΠϠʔ͝ͱʹੜ੒ͷޙɺ߹੒ -BZPVU 1BSTF 1BJOU $PNQPTJUF
    -BZFST
37. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
    4UZMFT -BZPVU
    
    BLB
    SFqPX
    1BJOU $PNQPTJUF
    -BZFST
38. Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
39. DEMO http://codepen.io/paulirish/full/nkwKs/ http://codepen.io/paulirish/full/LsxyF/
40. ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ
41. +4͔Β
    MFGUͳͲΛ
    มߋͨ͠৔߹
42. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
43. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
44. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
45. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
46. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
47. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
48. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
49. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
50. $44ͷ
    USBOTGPSNͰ
    มߋͨ͠৔߹
51. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
52. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
53. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
54. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
55. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
56. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
57. Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
58. Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ ্ͷϑϩʔ͕ൃੜͨ͠৔߹͸
    جຊతʹͦΕҎ߱ͷϑϩʔ͕
    ॱ൪ʹൃੜ͢Δ
59. ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ • ग़དྷΔݶΓ͍ܰϨϯμϦϯάϑϩʔͰऩ·Δ Α͏ʹ޻෉͍ͯ͘͠ͱྑ͍
60. GQTΛग़ͨ͢ ΊʹؾΛ෇͚ͨ ͍୅දతͳςΫ χοΫΛ঺հ
61. ຊ೔঺հ͢ΔςΫχοΫҰཡ • Forced Synchronous Layout໰୊ • CSS Containment • scrollδϟϯΫ໰୊ • GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ • CSS `will-change` • ίϥϜ: repaintͷλΠϛϯά͸͍͔ͭ
62. ςΫχοΫΛ঺հ͢Δલʹ • ChromeͷDevToolͰ͜ΕΒΛܭଌͨ͠Γ؍ଌ ͨ͠Γग़དྷΔ • (͜͜ʹεΫγϣΛೖΕ͔͕ͨͬͨ୅ΘΓʹ࣮ ը໘Ͱઆ໌͠·͢)
63. 'PSDFE
    4ZODISPOPVT -BZPVU໰୊
64. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
    4UZMFT -BZPVU
    
    BLB
    SFqPX
    1BJOU $PNQPTJUF
    -BZFST
65. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
    4UZMFT -BZPVU
    
    BLB
    SFqPX
    1BJOU $PNQPTJUF
    -BZFST ͜ͷͱ͖'PSDFE
    4ZODISPOPVT
    -BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕
    ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ
    ྫ
    FMFNPGGTFU-FGU
    
    FMFNHFU$MJFOU3FDUT
    
    FMFNDMJFOU8JEUI
    ͜ΕΒͷ஋Λਖ਼͘͠஌Δʹ͸ݱࡏͷϨΠΞ΢τʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕ ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷ஋Λ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ
    ࣮ࡍͷϨϯμϦϯάͱ͸ผͰϨΠΞ΢τܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ
    ඇৗʹ஗͘ͳͬͯ͠·͏
66. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
67. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) w ϨΠΞ΢τΛੜ੒
    w ϨΠϠʔ͝ͱʹඳըΛੜ੒
    w ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    w ϨϯμϦϯά݁Ռ͔Β஋Λฦ٫
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
68. DEMO https://googlesamples.github.io/web-fundamentals/ tools/chrome-devtools/rendering-tools/forcedsync.html
69. $44
    $POUBJONFOU
70. css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ
71. css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
72. css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
73. css containment • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞ Εͳ͘ͳΔ • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍ • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍ ಛʹ͜ͷ2ͭͷ஋Λࢦఆ͢Δͱ ϨϯμϦϯάϑϩʔͷ੍ޚʹڧ͍ӨڹΛ ༩͑Δ͜ͱ͕Ͱ͖Δ
74. DEMO http://codepen.io/ahomu/pen/ZpKGrN
75. TDSPMMδϟϯΫ ໰୊
76. scrollδϟϯΫ໰୊ • ϞόΠϧ؀ڥͳͲͰεΫϩʔϧͷ٧·Γ(scroll-jank) Λղܾ͢ΔͨΊͷ࢓૊Έͱͯ͠ɺPassive Event Listeners͕ಋೖ͞Εͨ • εΫϩʔϧΛൃੜͤ͞ΔΠϯλϥΫγϣϯΛ࣮૷ ͢Δࡍͷtouchstart΍touchend಺Ͱ event.preventDefault()Λݺ͹Ε(Δ|ͳ͍)͜ͱΛอ ূ͢Δ
77. Passive Event Listeners • preventDefault()Λݺ͹ͳ͍͜ͱΛอূ͢Δ৔߹ɺ addEventListener()ͷୈ3Ҿ਺ʹ{passive: true}Λ ౉͢͜ͱͰ࣮ݱͰ͖Δ
78. ⚠ޓ׵ੑͷ໰୊ʹ͍ͭͯ • Passive ListenerʹରԠ͍ͯ͠ͳ͍ϒϥ΢βͷ৔߹ɺ addEventListerͷୈ3Ҿ਺ useCapture ͕trueͰ͋Δͱͯ͠ѻΘ Εͯ͠·͏ • Πϕϯτ͸όϒϦϯάϑΣʔζͰ͸ͳ͘ɺΩϟϓνϟϦϯά ϑΣʔζͰൃՐ͞ΕΔ͜ͱʹͳΔɻ • Event Listener Options ରԠҎ߱͸ɺ͜͜ʹΦϒδΣΫτΛ౉͢ ͜ͱʹͳΔͨΊɺ useCapture ϑϥά૬౰͸ɺ {capture: true} ͱͯ͠ϓϩύςΟʹΑΔఆٛΛߦ͏ɻ
79. DEMO http://labs.jxck.io/passive-event-listeners/index.html
80. (16ΞΫηϥ ϨʔγϣϯΛ ༗ޮతʹར༻ ͢Δ
81. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacity΍transformɺrorateͳͲΛར༻ ͨ͠৔߹ • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
82. css: will-change • ͜ͷઌى͖ΔϨϯμϦϯά಺༰Λ௨஌͠ɺɹ ϨϯμϦϯάϨΠϠʔΛϒϥ΢βʹ༧Ί४උ ͓ͯ͘͠Α͏ཁ੥͕Ͱ͖Δ • ͜ͷϨϯμϦϯάϨΠϠʔͷੜ੒ʹ͸GPU ͕ޮ͘
83. ⚠ར༻࣌ͷ஫ҙ఺ • ͜ͷϓϩύςΟΛCSSͰ༧Ίࢦఆͯ͠͠·͏ͱϨϯμϦϯά ϨΠϠʔͷΩϟογϡ͕େྔʹੜ੒͞Εͯ͠·͍ύϑΥʔϚ ϯεʹѱӨڹΛ༩͑ͯ͠·͏ • JSΛར༻ͯ͠ඞཁͳλΠϛϯάͰ෇༩͢Δͷ͕ྑ͍ͱ͞Εͯ ͍Δ • ͕ɺJSͰ෇༩͢ΔλΠϛϯά͕௚લ͗͢ΔͱϨϯμϦϯάϨ ΠϠʔΛཪͰੜ੒͢Δ༛༧͕଍ΓͣޮՌ͕ൃشͰ͖ͳ͍৔߹ ͕͋Δ
84. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacity΍transformɺrorateͳͲΛར༻ ͨ͠৔߹ • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
85. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacity΍transformɺrorateͳͲΛར༻ ͨ͠৔߹ • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍ • ΋͏1ͭڧ྽ʹޮ͔ͤΔํ๏͕͋Δʂʂʂ
86. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε • CSSͷopacity΍transformɺrorateͳͲΛར༻ ͨ͠৔߹ • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍ • ΋͏1ͭڧ྽ʹޮ͔ͤΔํ๏͕͋Δʂʂʂ • <canvas>ͷඳը͸GPU͕ޮ͘ʂʂʂʂʂʂ
87. ۃ୺ʹ<canvas>Λར༻ͨ͠ྫ • FlipboardͷεϚϗ൛ • શͯͷϏϡʔ͕<canvas>্ʹඳ͔Ε͍ͯΔ • https://github.com/Flipboard/react- canvas
88. DEMO
89. ίϥϜ
    
    SFQBJOUSFqPX ͷλΠϛϯά͸
    ͍͔ͭ
90. repaint/reflow timing • DOMʹૠೖͨ͠Node͸͍ͭϨϯμϦϯά͞ΕΔͷ͔ • ref: ReactͷcomponentDidMount͕ൃՐ͢Δͱ͖ɺ Mount͸͞Ε͍ͯΔ͕ɺຊ౰ʹϨϯμϦϯά͞Εͯ ͍Δͷ͔ʁ • repaint͞ΕΔΑΓ΋ૣ͍৔߹ɺclientHeightͳͲ͕ظ ଴ͨ͠஋ΛऔಘͰ͖ͳ͍
91. ݁࿦
92. ݁࿦ • ݫີʹਖ਼͍͠repaint௚ޙͷλΠϛϯά (onpaintతͳ)Λ஌Δ͜ͱ͸ग़དྷͳ͍ • window.requestAnimationFrameͱ͔ʁ
93. ·ͱΊ
94. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
95. ϨϯμϦϯάϑΣΠζʹ͍ͭͯ • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
    4UZMFT -BZPVU
    
    BLB
    SFqPX
    1BJOU $PNQPTJUF
    -BZFST
96. ຊ೔঺հͨ͠ςΫχοΫҰཡ • Forced Synchronous Layout໰୊ • CSS Containment • scrollδϟϯΫ໰୊ • GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ • CSS `will-change` • ίϥϜ: repaintͷλΠϛϯά͸͍͔ͭ
97. ͞Βʹৄ͘͠஌Γ͍ͨ৔߹ • 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