Webアプリケーションで 60fpsを(極力)目指す

by pastak

Slide 1

Slide 1 text

WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)໨ࢦ͢ Pasta-K [email protected] at KMC Spring Camp 2017

Slide 2

Slide 2 text

@pastakɹ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

۩ମతͳ ΢Σϒϒϥ΢β ʹ͍ͭͯ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ϨϯμϦϯάϑϩʔ ʹ஫໨ͯ͠ΈΔ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

$44ͷ USBOTGPSNͰ มߋͨ͠৔߹

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

GQTΛग़ͨ͢ ΊʹؾΛ෇͚ͨ ͍୅දతͳςΫ χοΫΛ঺հ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

ςΫχοΫΛ঺հ͢Δલʹ • ChromeͷDevToolͰ͜ΕΒΛܭଌͨ͠Γ؍ଌ ͨ͠Γग़དྷΔ • (͜͜ʹεΫγϣΛೖΕ͔͕ͨͬͨ୅ΘΓʹ࣮ ը໘Ͱઆ໌͠·͢)

Slide 63

Slide 63 text

'PSDFE 4ZODISPOPVT -BZPVU໰୊

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

$44 $POUBJONFOU

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

TDSPMMδϟϯΫ ໰୊

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

DEMO

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

݁࿦

Slide 92

Slide 92 text

݁࿦ • ݫີʹਖ਼͍͠repaint௚ޙͷλΠϛϯά (onpaintతͳ)Λ஌Δ͜ͱ͸ग़དྷͳ͍ • window.requestAnimationFrameͱ͔ʁ

Slide 93

Slide 93 text

·ͱΊ

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

͞Βʹৄ͘͠஌Γ͍ͨ৔߹ • 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