$30 off During Our Annual Pro Sale. View Details »

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

pastak
March 21, 2017

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

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

pastak

March 21, 2017
Tweet

More Decks by pastak

Other Decks in Technology

Transcript

  1. WebΞϓϦέʔγϣϯͰ
    60fpsΛ(ۃྗ)໨ࢦ͢
    Pasta-K
    [email protected]
    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