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

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

Transcript

1. SPAΛύϑΥʔϚϯε νϡʔχϯάͨ͠࿩ HTML5 Conference (2017/09/24) ฏ໺ণ࢜ / @shisama
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. εϥΠυ͸ެ։͠·͢
4. Agenda • ύϑΥʔϚϯεͷܭଌπʔϧ • ࣮ફͨ͠ύϑΥʔϚϯεɾνϡʔχϯά શ෦Reactͷ࿩Ͱ͢ʂʂ
6. ΦϯϥΠϯӳձ࿩Ϩοεϯը໘ • ϏσΦɾԻ੠௨৴ → WebRTC(SkyWay) • νϟοτ → Firebase Realtime Database • UI → React, ReduxΛ࢖ͬͨSPA
7. ʮಈ࡞͕ॏ͍ʯ ʮϑϦʔζ͢Δʯ ͱ͍͏໰͍߹Θ͕ͤʂʂ
8. Reactͷڍಈ MFGU SJHIU 5FYU 7JEFP $IBU 7JEFP SPPU ͜͜Ͱঢ়ଶΛߋ৽͢Δ
   Πϕϯτ͕ൃੜɻ
   ਌ίϯϙʔωϯτʹ௨஌
9. Reactͷڍಈ MFGU SJHIU 5FYU 7JEFP $IBU 7JEFP SPPU શମʹ௨஌ɻ
   ௨஌Λड͚औͬͨࢠίϯϙʔωϯτͷ ࠶ϨϯμϦϯά͕૸Δ
10. SFOEFS ࣮ߦ 7JSUVBM
    %0.
    ࠩ෼ܭࢉ ࠩ෼Λ
    ϨϯμϦϯά QSPQT΍TUBUFͷ ஋͕มߋ
11. SFOEFS ࣮ߦ 7JSUVBM
    %0.
    ࠩ෼ܭࢉ ࠩ෼Λ
    ϨϯμϦϯά QSPQT΍TUBUFͷ ஋͕มߋ ͜ͷॲཧίετ͕όΧʹͳΒͳ͍
12. ReactͷύϑΥʔϚϯεܭଌπʔϧ • React DevTools • Chrome Extension • react_perf • ΫΤϦύϥϝʔλ • Կ΋Πϯετʔϧ͠ͳͯ͘΋͍͍ • react-addons-perf • Πϕϯτ͝ͱͷܭଌ͕ߦ͑Δ શ෦Facebookެࣜʂ
14. react-addons-perfΛ࢖͏ import Perf from 'react-addons-perf'; window.Perf = Perf; XJOEPXʹ୅ೖ͢Δͱ
    ϒϥ΢βͷίϯιʔϧͰ࢖͏͜ͱ͕ Ͱ͖·͢ʂ
15. react-addons-perfΛ࢖͏ ແବʹSFOEFSؔ਺Λݺͼग़͍ͯ͠ ΔίϯϙʔωϯτΛදࣔ
16. ࢼ͠ʹ͜ͷԻ੠Λϛϡʔτ͢Δ
    ϘλϯΛΫϦοΫ
17. SFOEFSؔ਺Λ࣮ߦͨ͠ίϯϙʔωϯτͷҰཡ
    w ࣮ߦ࣌ؒ
    w Πϯελϯε਺
    w SFOEFS࣮ߦճ਺
    
18. ը໘Ͱද͢ͱɾɾɾ
19. Πϕϯτʹؔ܎ͳ͍ ίϯϙʔωϯτ·Ͱ ࠶ϨϯμϦϯά ͠Α͏ͱͯ͠Δʂʂ
20. ແବʹrenderؔ਺͕ݺ͹Εͳ ͍Α͏ʹ͠·ͨ͠ʂ
21. Component Lifecycle Mount Update Unmount DPOTUSVDUPS SFOEFS DPNQPOFOU8JMM.PVOU DPNQPOFOU%JE.PVOU DPNQPOFOU8JMM3FDFJWF1SPQ TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF SFOEFS DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM6ONPVOU true false
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
23. ஋Λ̍ͭ̍ͭൺֱ͢Δίʔυ Λશίϯϙʔωϯτʹॻ͘ͷ ͸େมͳͷͰɾɾ
24. PureComponent ࢖͍·ͨ͠ʂ
25. ࡢ೥ͷHTML5 ConferenceͰ koba04͞Μ͕ൃදͯͨ͠ʂ
26. PureComponent͸shallow ͳൺֱ͔͠͠·ͤΜʂʂ
27. DeepͳൺֱΛߦ͍·ͨ͠ʂ
28. DeepEqual • npmʹ͍͔ͭ͘ϥΠϒϥϦ͕͋ΔʢҎԼ͸Ұ෦ʣ • deep-equal • deep-eql • fast-deep-equal • ଞΑΓ࣮ߦ଎౓͕ૣ͍ʂ
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ͷத਎΋
    ൺֱ͠·͢
30. ΋͏Ұ౓͜ΕΛΫϦοΫͯ͠Έͨ
31. ݁Ռ
32. ରࡦલ
33. ରࡦޙ
34. ଞʹ΋վળ͠·ͨ͠ • ࢖༻ස౓͕௿͍ػೳΛ࡟আ • stateʹ֨ೲ͢Δඞཁͷແ͍஋ΛΠϯελϯε ม਺΁ • Redux؅ཧͷൣғΛখ͘͢͞Δ
35. ͳͥ։ൃதʹؾ͔ͮͳ͔ͬͨʁ
36. ສ௒͑ͷ$50Ϟσϧ .BDCPPL
    1SP
     ௒ઈշదʂ $PSF
    J
    ϝϞϦ(#
37. εϖοΫߴͯ͘ؾ͔ͮΜ͔ͬͨ
38. ϦϦʔεલʹ ௿εϖοΫϚγϯͰݕূ͢Δ Α͏ʹ͠·ͨ͠
39. ·ͱΊ • ύϑΥʔϚϯεͷܭଌΛଵΒͳ͍Α͏ʹ͠·͠ΐ ͏ • ແବͳॲཧ͕ͳ͍Α͏ʹ৺͕͚·͠ΐ͏ • ௿εϖοΫϚγϯ(·ͨ͸throttling)Ͱͷݕূ͠· ͠ΐ͏ʂʂ ଞͷϑϨʔϜϫʔΫͰ΋্هΛߦ͍·͠ΐ͏ʂ
40. ࢀߟ • facebook.github.io/react • Reactͷ࠷৽ಈ޲ͱϕετϓϥΫςΟε by koba04 • React Performance Tune-Up · InVision Engineering Blog
41. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
42. ͱऴΘΔ͸ͣͰ͕ͨ͠ɾɾ
43. ຊ೔঺հͨ͠ react-addons-perf React v16Ͱ͸ ࢖͑ͳ͘ͳΔͬͯΑ
44. koba04͞Μʹ͍͖ͭͬ͞ ڭ͑ͯ΋Βͬͨɾɾ
45. react_perf࢖͓͏
46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ