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

5cf7e9533a457726cd51232e06c1da9a?s=47 Masashi Hirano
September 24, 2017

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

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

September 24, 2017
Tweet

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ͷ࿩Ͱ͢ʂʂ

  5. None
  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ެࣜʂ
  13. None
  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Ϟσϧ .BDCPPL1SP ௒ઈշదʂ $PSFJ ϝϞϦ(#

  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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ