SPAをパフォーマンス・チューニングした話

by Masashi Hirano

Slide 1

Slide 1 text

SPAΛύϑΥʔϚϯε νϡʔχϯάͨ͠࿩ HTML5 Conference (2017/09/24) ฏ໺ণ࢜ / @shisama

Slide 2

Slide 2 text

{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }

Slide 3

Slide 3 text

εϥΠυ͸ެ։͠·͢

Slide 4

Slide 4 text

Agenda • ύϑΥʔϚϯεͷܭଌπʔϧ • ࣮ફͨ͠ύϑΥʔϚϯεɾνϡʔχϯά શ෦Reactͷ࿩Ͱ͢ʂʂ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ΦϯϥΠϯӳձ࿩Ϩοεϯը໘ • ϏσΦɾԻ੠௨৴ → WebRTC(SkyWay) • νϟοτ → Firebase Realtime Database • UI → React, ReduxΛ࢖ͬͨSPA

Slide 7

Slide 7 text

ʮಈ࡞͕ॏ͍ʯ ʮϑϦʔζ͢Δʯ ͱ͍͏໰͍߹Θ͕ͤʂʂ

Slide 8

Slide 8 text

Reactͷڍಈ MFGU SJHIU 5FYU 7JEFP $IBU 7JEFP SPPU ͜͜Ͱঢ়ଶΛߋ৽͢Δ Πϕϯτ͕ൃੜɻ ਌ίϯϙʔωϯτʹ௨஌

Slide 9

Slide 9 text

Reactͷڍಈ MFGU SJHIU 5FYU 7JEFP $IBU 7JEFP SPPU શମʹ௨஌ɻ ௨஌Λड͚औͬͨࢠίϯϙʔωϯτͷ ࠶ϨϯμϦϯά͕૸Δ

Slide 10

Slide 10 text

SFOEFS ࣮ߦ 7JSUVBM%0. ࠩ෼ܭࢉ ࠩ෼Λ ϨϯμϦϯά QSPQT΍TUBUFͷ ஋͕มߋ

Slide 11

Slide 11 text

SFOEFS ࣮ߦ 7JSUVBM%0. ࠩ෼ܭࢉ ࠩ෼Λ ϨϯμϦϯά QSPQT΍TUBUFͷ ஋͕มߋ ͜ͷॲཧίετ͕όΧʹͳΒͳ͍

Slide 12

Slide 12 text

ReactͷύϑΥʔϚϯεܭଌπʔϧ • React DevTools • Chrome Extension • react_perf • ΫΤϦύϥϝʔλ • Կ΋Πϯετʔϧ͠ͳͯ͘΋͍͍ • react-addons-perf • Πϕϯτ͝ͱͷܭଌ͕ߦ͑Δ શ෦Facebookެࣜʂ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

react-addons-perfΛ࢖͏ import Perf from 'react-addons-perf'; window.Perf = Perf; XJOEPXʹ୅ೖ͢Δͱ ϒϥ΢βͷίϯιʔϧͰ࢖͏͜ͱ͕ Ͱ͖·͢ʂ

Slide 15

Slide 15 text

react-addons-perfΛ࢖͏ ແବʹSFOEFSؔ਺Λݺͼग़͍ͯ͠ ΔίϯϙʔωϯτΛදࣔ

Slide 16

Slide 16 text

ࢼ͠ʹ͜ͷԻ੠Λϛϡʔτ͢Δ ϘλϯΛΫϦοΫ

Slide 17

Slide 17 text

SFOEFSؔ਺Λ࣮ߦͨ͠ίϯϙʔωϯτͷҰཡ w ࣮ߦ࣌ؒ w Πϯελϯε਺ w SFOEFS࣮ߦճ਺

Slide 18

Slide 18 text

ը໘Ͱද͢ͱɾɾɾ

Slide 19

Slide 19 text

Πϕϯτʹؔ܎ͳ͍ ίϯϙʔωϯτ·Ͱ ࠶ϨϯμϦϯά ͠Α͏ͱͯ͠Δʂʂ

Slide 20

Slide 20 text

ແବʹrenderؔ਺͕ݺ͹Εͳ ͍Α͏ʹ͠·ͨ͠ʂ

Slide 21

Slide 21 text

Component Lifecycle Mount Update Unmount DPOTUSVDUPS SFOEFS DPNQPOFOU8JMM.PVOU DPNQPOFOU%JE.PVOU DPNQPOFOU8JMM3FDFJWF1SPQ TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF SFOEFS DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM6ONPVOU true false

Slide 22

Slide 22 text

shouldComponentUpdate class Icon extends React.Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.height !== nextProps.height) { return true; } if (this.state.width !== nextState.width) { return true; } return false; } } ߋ৽લޙͷQSPQTͱTUBUFͷ஋Λൺֱ ஋ʹมߋ͕͋Ε͹USVF มߋ͕ແ͚Ε͹GBMTF

Slide 23

Slide 23 text

஋Λ̍ͭ̍ͭൺֱ͢Δίʔυ Λશίϯϙʔωϯτʹॻ͘ͷ ͸େมͳͷͰɾɾ

Slide 24

Slide 24 text

PureComponent ࢖͍·ͨ͠ʂ

Slide 25

Slide 25 text

ࡢ೥ͷHTML5 ConferenceͰ koba04͞Μ͕ൃදͯͨ͠ʂ

Slide 26

Slide 26 text

PureComponent͸shallow ͳൺֱ͔͠͠·ͤΜʂʂ

Slide 27

Slide 27 text

DeepͳൺֱΛߦ͍·ͨ͠ʂ

Slide 28

Slide 28 text

DeepEqual • npmʹ͍͔ͭ͘ϥΠϒϥϦ͕͋ΔʢҎԼ͸Ұ෦ʣ • deep-equal • deep-eql • fast-deep-equal • ଞΑΓ࣮ߦ଎౓͕ૣ͍ʂ

Slide 29

Slide 29 text

deepEqualΛ࢖ͬͨ shouldComponentUpdate import deepEqual from ‘fast-deep-equal’; class Icon extends React.Component { shouldComponentUpdate(nextProps, nextState) { return !deepEqual(this.props.obj, nextProps.obj) || !deepEqual(this.state.obj, nextState.obj); } } QSPQT΍TUBUF಺ͷ0CKFDUͷத਎΋ ൺֱ͠·͢

Slide 30

Slide 30 text

΋͏Ұ౓͜ΕΛΫϦοΫͯ͠Έͨ

Slide 31

Slide 31 text

݁Ռ

Slide 32

Slide 32 text

ରࡦલ

Slide 33

Slide 33 text

ରࡦޙ

Slide 34

Slide 34 text

ଞʹ΋վળ͠·ͨ͠ • ࢖༻ස౓͕௿͍ػೳΛ࡟আ • stateʹ֨ೲ͢Δඞཁͷແ͍஋ΛΠϯελϯε ม਺΁ • Redux؅ཧͷൣғΛখ͘͢͞Δ

Slide 35

Slide 35 text

ͳͥ։ൃதʹؾ͔ͮͳ͔ͬͨʁ

Slide 36

Slide 36 text

ສ௒͑ͷ$50Ϟσϧ .BDCPPL1SP ௒ઈշదʂ $PSFJ ϝϞϦ(#

Slide 37

Slide 37 text

εϖοΫߴͯ͘ؾ͔ͮΜ͔ͬͨ

Slide 38

Slide 38 text

ϦϦʔεલʹ ௿εϖοΫϚγϯͰݕূ͢Δ Α͏ʹ͠·ͨ͠

Slide 39

Slide 39 text

·ͱΊ • ύϑΥʔϚϯεͷܭଌΛଵΒͳ͍Α͏ʹ͠·͠ΐ ͏ • ແବͳॲཧ͕ͳ͍Α͏ʹ৺͕͚·͠ΐ͏ • ௿εϖοΫϚγϯ(·ͨ͸throttling)Ͱͷݕূ͠· ͠ΐ͏ʂʂ ଞͷϑϨʔϜϫʔΫͰ΋্هΛߦ͍·͠ΐ͏ʂ

Slide 40

Slide 40 text

ࢀߟ • facebook.github.io/react • Reactͷ࠷৽ಈ޲ͱϕετϓϥΫςΟε by koba04 • React Performance Tune-Up · InVision Engineering Blog