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

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

Transcript

1. WebΞϓϦέʔγϣϯͰ
   60fpsΛ(ۃྗ)໨ࢦ͢
   Pasta-K
   pasta0915@gmail.com
   at KMC Spring Camp 2017
   

   View Slide

2. @pastakɹ
   

   View Slide

3. @pastakɹ
   • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢
   • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ
   • JavaScript / React
   • Ruby on Rails
   • Browser Extension
   

   View Slide

4. View Slide

5. @pastakɹ
   • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢
   • ژେϚΠίϯΫϥϒ
   • ݩ޿ใ
   • JavaScriptͰੈքฏ࿨2014
   • KMCτοϓϖʔδ୲౰
   • ҿञ
   

   View Slide

6. ຊ೔ͷ͓඼ॻ͖
   • ΢Σϒϒϥ΢βʹ͍ͭͯ
   • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒
   • ϒϥ΢β্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ
   • Ξχϝʔγϣϯ࣌ͷϒϥ΢βͷৼΔ෣͍
   • Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ
   • 60fpsΛग़ͨ͢ΊʹؾΛ෇͚͓͖͍ͯͨ୅දతͳςΫχοΫ
   

   View Slide

7. ࠓ೔࿩͞ͳ͍͜ͱ
   • RenderingΤϯδϯ΍JavaScriptΤϯδϯͷৄࡉ
   ͳৼΔ෣͍ʹ͍ͭͯ
   • JS΍CSSͷ޻෉Ҏ֎ͷ΢ΣϒΞϓϦέʔγϣϯߴ
   ଎ԽΞϓϩʔνʹ͍ͭͯ(ίϯςϯπ഑৴ͷ޻෉ͳ
   Ͳ)
   • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠·͢
   

   View Slide

8. λʔήοτͱΰʔϧʹ͍ͭͯ
   • λʔήοτ
   • ϒϥ΢βͰಈ͘JSΛॻ͍͍ͯΔਓʢಛʹΞχϝʔ
   γϣϯΛצͰ΍͍͍ͬͯͬͯΔਓʣ
   • ࠓޙͦͷΑ͏ͳ͜ͱΛ͢ΔՄೳੑͷ͋Δਓ
   • ΰʔϧ
   • ॴҦʰψϧψϧಈ͘ʱը໘ͷͨΊʹඞཁͳ͜ͱͷ
   ֓ཁΛ௫Ή = ԿނʰΨλͭ͘ʱͷ͔Λ஌Δ
   

   View Slide

9. ߹ΘͤͯಡΈ͍ͨ
   • ͜ͷεϥΠυ͸αϘͬͨͷͰɺҎԼͷεϥΠυΛݩʹϒϥ΢βͷ
   ྺ࢙ʹؔ͢Δઆ໌Λ࡟ͬͯɺϨϯμϦϯά࣮ྫͱղઆʹ͍ͭͯ૿
   ΍ͨ͠ࢿྉʹͳΓ·͢
   ஌͓͖͍ͬͯͨϒϥ΢βʹ͍ͭͯͷجૅೖ໳ // Speaker Deck
   https://speakerdeck.com/pastak/zhi-tuteokitaiburauzanituitefalseji-chu-ru-men
   

   View Slide

10. ຊ೔ͷ͓඼ॻ͖
    • ΢Σϒϒϥ΢βʹ͍ͭͯ
    • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒
    • ϒϥ΢β্ͰͷΞχϝʔγϣϯͱϨϯμϦϯάΤϯδϯ
    • Ξχϝʔγϣϯ࣌ͷϒϥ΢βͷৼΔ෣͍
    • Chrome DevToolΛ༻͍ͨݕূʹ͍ͭͯ
    • 60fpsΛग़ͨ͢ΊʹؾΛ෇͚͓͖͍ͯͨ୅දతͳςΫχοΫ
    

    View Slide

11. ΢Σϒϒϥ΢β
    ͷجຊߏ੒
    

    View Slide

12. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    

    View Slide

13. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΞυϨεόʔɾπʔϧόʔ
    ֤छϘλϯ ਐΉ໭Δ
    
    ϒοΫϚʔΫɹͳͲ
    

    View Slide

14. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    6*ͱ֤छΤϯδϯͱͷ
    ϝοηʔδͷ΍ΓऔΓΛ஥հ
    

    View Slide

15. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )5.-9.-Λύʔε͠ɺ
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

16. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )551΍'51ͳͲΛ஻Δ
    

    View Slide

17. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

18. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠ
    ϓϦϯλ
    ͦͷଞग़ྗ
    

    View Slide

19. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
    

    View Slide

20. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    ※ҎԼͰ͸HTMLͱͷΈදه͠·͢
    

    View Slide

21. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU
    

    View Slide

22. ϨϯμϦϯάϑϩʔͷҰྫ
    https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
    

    View Slide

23. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    

    View Slide

24. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    &WBMVBUF
    

    View Slide

25. ۩ମతͳ
    ΢Σϒϒϥ΢β
    ʹ͍ͭͯ
    

    View Slide

26. Question
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

27. View Slide

28. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

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ΠϯλʔϓϦλ
    

    View Slide

30. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Based (Forked)
    Chromium
    

    View Slide

31. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ڞ௨
    ҟͳΔ
    

    View Slide

32. Question
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ
    

    View Slide

33. Question
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ
    

    View Slide

34. ϨϯμϦϯάϑϩʔ
    ʹ஫໨ͯ͠ΈΔ
    

    View Slide

35. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU
    

    View Slide

36. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    • ↑ΛϨΠϠʔ͝ͱʹੜ੒ͷޙɺ߹੒
    -BZPVU
    1BSTF
    1BJOU
    $PNQPTJUF
    -BZFST
    

    View Slide

37. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX
    
    1BJOU
    $PNQPTJUF-BZFST
    

    View Slide

38. Chrome DevtoolͷTimeLine
    https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
    

    View Slide

39. DEMO
    http://codepen.io/paulirish/full/nkwKs/
    http://codepen.io/paulirish/full/LsxyF/
    

    View Slide

40. ͭ·Γ
    • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
    Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
    ૣ͘ऴྃ͢Δ
    

    View Slide

41. +4͔Β
    MFGUͳͲΛ
    มߋͨ͠৔߹
    

    View Slide

42. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

43. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

44. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

45. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

46. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

47. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

48. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

49. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

50. $44ͷ
    USBOTGPSNͰ
    มߋͨ͠৔߹
    

    View Slide

51. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

52. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

53. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

54. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

55. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

56. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

57. Chrome DevtoolͷTimeLine
    https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
    

    View Slide

58. Chrome DevtoolͷTimeLine
    https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
    ্ͷϑϩʔ͕ൃੜͨ͠৔߹͸
    جຊతʹͦΕҎ߱ͷϑϩʔ͕
    ॱ൪ʹൃੜ͢Δ
    

    View Slide

59. ͭ·Γ
    • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
    Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
    ૣ͘ऴྃ͢Δ
    • ग़དྷΔݶΓ͍ܰϨϯμϦϯάϑϩʔͰऩ·Δ
    Α͏ʹ޻෉͍ͯ͘͠ͱྑ͍
    

    View Slide

60. GQTΛग़ͨ͢
    ΊʹؾΛ෇͚ͨ
    ͍୅දతͳςΫ
    χοΫΛ঺հ
    

    View Slide

61. ຊ೔঺հ͢ΔςΫχοΫҰཡ
    • Forced Synchronous Layout໰୊
    • CSS Containment
    • scrollδϟϯΫ໰୊
    • GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ
    • CSS `will-change`
    • ίϥϜ: repaintͷλΠϛϯά͸͍͔ͭ
    

    View Slide

62. ςΫχοΫΛ঺հ͢Δલʹ
    • ChromeͷDevToolͰ͜ΕΒΛܭଌͨ͠Γ؍ଌ
    ͨ͠Γग़དྷΔ
    • (͜͜ʹεΫγϣΛೖΕ͔͕ͨͬͨ୅ΘΓʹ࣮
    ը໘Ͱઆ໌͠·͢)
    

    View Slide

63. 'PSDFE
    4ZODISPOPVT
    -BZPVU໰୊
    

    View Slide

64. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX
    
    1BJOU
    $PNQPTJUF-BZFST
    

    View Slide

65. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX
    
    1BJOU
    $PNQPTJUF-BZFST
    ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕
    ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ
    ྫFMFNPGGTFU-FGUFMFNHFU$MJFOU3FDUT
    FMFNDMJFOU8JEUI
    ͜ΕΒͷ஋Λਖ਼͘͠஌Δʹ͸ݱࡏͷϨΠΞ΢τʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕
    ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷ஋Λ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ
    ࣮ࡍͷϨϯμϦϯάͱ͸ผͰϨΠΞ΢τܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ
    ඇৗʹ஗͘ͳͬͯ͠·͏
    

    View Slide

66. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    

    View Slide

67. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
    w ϨΠΞ΢τΛੜ੒
    w ϨΠϠʔ͝ͱʹඳըΛੜ੒
    w ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    w ϨϯμϦϯά݁Ռ͔Β஋Λฦ٫
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    

    View Slide

68. DEMO
    https://googlesamples.github.io/web-fundamentals/
    tools/chrome-devtools/rendering-tools/forcedsync.html
    

    View Slide

69. $44
    $POUBJONFOU
    

    View Slide

70. css containment
    • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ
    ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ
    

    View Slide

71. css containment
    • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ
    ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ
    • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞
    Εͳ͘ͳΔ
    • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍
    • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
    

    View Slide

72. css containment
    • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ
    ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ
    • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞
    Εͳ͘ͳΔ
    • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍
    • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
    

    View Slide

73. css containment
    • cssͷcontainϓϩύςΟΛར༻͢Δ͜ͱͰϨϯμϦ
    ϯάʹؔΘΔ֤छৼΔ෣͍Λ੍ޚͰ͖Δ
    • size: ཁૉͷαΠζ͕ࢠཁૉ΍ίϯςϯπʹӨڹ͞
    Εͳ͘ͳΔ
    • layout: ਌ܑఋཁૉͷϨΠΞ΢τʹӨڹΛ༩͑ͳ͍
    • paint: ཁૉڥքͷ֎ଆʹϖΠϯτΛߦΘͳ͍
    ಛʹ͜ͷ2ͭͷ஋Λࢦఆ͢Δͱ
    ϨϯμϦϯάϑϩʔͷ੍ޚʹڧ͍ӨڹΛ
    ༩͑Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

74. DEMO
    http://codepen.io/ahomu/pen/ZpKGrN
    

    View Slide

75. TDSPMMδϟϯΫ
    ໰୊
    

    View Slide

76. scrollδϟϯΫ໰୊
    • ϞόΠϧ؀ڥͳͲͰεΫϩʔϧͷ٧·Γ(scroll-jank)
    Λղܾ͢ΔͨΊͷ࢓૊Έͱͯ͠ɺPassive Event
    Listeners͕ಋೖ͞Εͨ
    • εΫϩʔϧΛൃੜͤ͞ΔΠϯλϥΫγϣϯΛ࣮૷
    ͢Δࡍͷtouchstart΍touchend಺Ͱ
    event.preventDefault()Λݺ͹Ε(Δ|ͳ͍)͜ͱΛอ
    ূ͢Δ
    

    View Slide

77. Passive Event Listeners
    • preventDefault()Λݺ͹ͳ͍͜ͱΛอূ͢Δ৔߹ɺ
    addEventListener()ͷୈ3Ҿ਺ʹ{passive: true}Λ
    ౉͢͜ͱͰ࣮ݱͰ͖Δ
    

    View Slide

78. ⚠ޓ׵ੑͷ໰୊ʹ͍ͭͯ
    • Passive ListenerʹରԠ͍ͯ͠ͳ͍ϒϥ΢βͷ৔߹ɺ
    addEventListerͷୈ3Ҿ਺ useCapture ͕trueͰ͋Δͱͯ͠ѻΘ
    Εͯ͠·͏
    • Πϕϯτ͸όϒϦϯάϑΣʔζͰ͸ͳ͘ɺΩϟϓνϟϦϯά
    ϑΣʔζͰൃՐ͞ΕΔ͜ͱʹͳΔɻ
    • Event Listener Options ରԠҎ߱͸ɺ͜͜ʹΦϒδΣΫτΛ౉͢
    ͜ͱʹͳΔͨΊɺ useCapture ϑϥά૬౰͸ɺ {capture: true}
    ͱͯ͠ϓϩύςΟʹΑΔఆٛΛߦ͏ɻ
    

    View Slide

79. DEMO
    http://labs.jxck.io/passive-event-listeners/index.html
    

    View Slide

80. (16ΞΫηϥ
    ϨʔγϣϯΛ
    ༗ޮతʹར༻
    ͢Δ
    

    View Slide

81. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε
    • CSSͷopacity΍transformɺrorateͳͲΛར༻
    ͨ͠৔߹
    • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
    

    View Slide

82. css: will-change
    • ͜ͷઌى͖ΔϨϯμϦϯά಺༰Λ௨஌͠ɺɹ
    ϨϯμϦϯάϨΠϠʔΛϒϥ΢βʹ༧Ί४උ
    ͓ͯ͘͠Α͏ཁ੥͕Ͱ͖Δ
    • ͜ͷϨϯμϦϯάϨΠϠʔͷੜ੒ʹ͸GPU
    ͕ޮ͘
    

    View Slide

83. ⚠ར༻࣌ͷ஫ҙ఺
    • ͜ͷϓϩύςΟΛCSSͰ༧Ίࢦఆͯ͠͠·͏ͱϨϯμϦϯά
    ϨΠϠʔͷΩϟογϡ͕େྔʹੜ੒͞Εͯ͠·͍ύϑΥʔϚ
    ϯεʹѱӨڹΛ༩͑ͯ͠·͏
    • JSΛར༻ͯ͠ඞཁͳλΠϛϯάͰ෇༩͢Δͷ͕ྑ͍ͱ͞Εͯ
    ͍Δ
    • ͕ɺJSͰ෇༩͢ΔλΠϛϯά͕௚લ͗͢ΔͱϨϯμϦϯάϨ
    ΠϠʔΛཪͰੜ੒͢Δ༛༧͕଍ΓͣޮՌ͕ൃشͰ͖ͳ͍৔߹
    ͕͋Δ
    

    View Slide

84. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε
    • CSSͷopacity΍transformɺrorateͳͲΛར༻
    ͨ͠৔߹
    • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
    

    View Slide

85. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε
    • CSSͷopacity΍transformɺrorateͳͲΛར༻
    ͨ͠৔߹
    • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
    • ΋͏1ͭڧ྽ʹޮ͔ͤΔํ๏͕͋Δʂʂʂ
    

    View Slide

86. GPUΞΫηϥϨʔγϣϯ͕༗ޮʹͳΔέʔε
    • CSSͷopacity΍transformɺrorateͳͲΛར༻
    ͨ͠৔߹
    • Composite LayersͷϑΣΠζͱݴͬͯ΋ྑ͍
    • ΋͏1ͭڧ྽ʹޮ͔ͤΔํ๏͕͋Δʂʂʂ
    • ͷඳը͸GPU͕ޮ͘ʂʂʂʂʂʂ
    

    View Slide

87. ۃ୺ʹΛར༻ͨ͠ྫ
    • FlipboardͷεϚϗ൛
    • શͯͷϏϡʔ্͕ʹඳ͔Ε͍ͯΔ
    • https://github.com/Flipboard/react-
    canvas
    

    View Slide

88. DEMO
    

    View Slide

89. ίϥϜ
    SFQBJOUSFqPX
    ͷλΠϛϯά͸
    ͍͔ͭ
    

    View Slide

90. repaint/reflow timing
    • DOMʹૠೖͨ͠Node͸͍ͭϨϯμϦϯά͞ΕΔͷ͔
    • ref: ReactͷcomponentDidMount͕ൃՐ͢Δͱ͖ɺ
    Mount͸͞Ε͍ͯΔ͕ɺຊ౰ʹϨϯμϦϯά͞Εͯ
    ͍Δͷ͔ʁ
    • repaint͞ΕΔΑΓ΋ૣ͍৔߹ɺclientHeightͳͲ͕ظ
    ଴ͨ͠஋ΛऔಘͰ͖ͳ͍
    

    View Slide

91. ݁࿦
    

    View Slide

92. ݁࿦
    • ݫີʹਖ਼͍͠repaint௚ޙͷλΠϛϯά
    (onpaintతͳ)Λ஌Δ͜ͱ͸ग़དྷͳ͍
    • window.requestAnimationFrameͱ͔ʁ
    

    View Slide

93. ·ͱΊ
    

    View Slide

94. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    

    View Slide

95. ϨϯμϦϯάϑΣΠζʹ͍ͭͯ
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX
    
    1BJOU
    $PNQPTJUF-BZFST
    

    View Slide

96. ຊ೔঺հͨ͠ςΫχοΫҰཡ
    • Forced Synchronous Layout໰୊
    • CSS Containment
    • scrollδϟϯΫ໰୊
    • GPUΞΫηϥϨʔγϣϯΛ༗ޮతʹར༻͢Δ
    • CSS `will-change`
    • ίϥϜ: repaintͷλΠϛϯά͸͍͔ͭ
    

    View Slide

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
    

    View Slide