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

B81a8fa35a79d31881ca3d348f3e894a?s=47 pastak
March 21, 2017

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

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

B81a8fa35a79d31881ca3d348f3e894a?s=128

pastak

March 21, 2017
Tweet

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 BLBSFqPX 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 BLBSFqPX 1BJOU $PNQPTJUF-BZFST
  65. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ •

    ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕ ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ ྫFMFNPGGTFU-FGUFMFNHFU$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 BLBSFqPX 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