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

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
4. None

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͸Կ͕ҧ͏ʁ

27. None

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