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

HTML5 Conference 2017のLTで発表した資料です。オチがありますが、ご了承くださいm(_ _)m
http://events.html5j.org/conference/2017/9/

Transcript

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

   View Slide

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

   View Slide

3. εϥΠυ͸ެ։͠·͢
   

   View Slide

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

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

15. react-addons-perfΛ࢖͏
    ແବʹSFOEFSؔ਺Λݺͼग़͍ͯ͠
    ΔίϯϙʔωϯτΛදࣔ
    

    View Slide

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

    View Slide

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

    View Slide

18. ը໘Ͱද͢ͱɾɾɾ
    

    View Slide

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

    View Slide

20. ແବʹrenderؔ਺͕ݺ͹Εͳ
    ͍Α͏ʹ͠·ͨ͠ʂ
    

    View Slide

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

    View Slide

22. 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
    

    View Slide

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

    View Slide

24. PureComponent
    ࢖͍·ͨ͠ʂ
    

    View Slide

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

    View Slide

26. PureComponent͸shallow
    ͳൺֱ͔͠͠·ͤΜʂʂ
    

    View Slide

27. DeepͳൺֱΛߦ͍·ͨ͠ʂ
    

    View Slide

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

    View Slide

29. 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ͷத਎΋
    ൺֱ͠·͢
    

    View Slide

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

    View Slide

31. ݁Ռ
    

    View Slide

32. ରࡦલ
    

    View Slide

33. ରࡦޙ
    

    View Slide

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

    View Slide

35. ͳͥ։ൃதʹؾ͔ͮͳ͔ͬͨʁ
    

    View Slide

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

    View Slide

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

    View Slide

38. ϦϦʔεલʹ
    ௿εϖοΫϚγϯͰݕূ͢Δ
    Α͏ʹ͠·ͨ͠
    

    View Slide

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

    View Slide

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

    View Slide

41. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide

42. ͱऴΘΔ͸ͣͰ͕ͨ͠ɾɾ
    

    View Slide

43. ຊ೔঺հͨ͠
    react-addons-perf
    React v16Ͱ͸
    ࢖͑ͳ͘ͳΔͬͯΑ
    

    View Slide

44. koba04͞Μʹ͍͖ͭͬ͞
    ڭ͑ͯ΋Βͬͨɾɾ
    

    View Slide

45. react_perf࢖͓͏
    

    View Slide

46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide