Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Masashi Hirano
September 24, 2017

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

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

Masashi Hirano

September 24, 2017
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. ReactͷύϑΥʔϚϯεܭଌπʔϧ • React DevTools • Chrome Extension • react_perf •

    ΫΤϦύϥϝʔλ • Կ΋Πϯετʔϧ͠ͳͯ͘΋͍͍ • react-addons-perf • Πϕϯτ͝ͱͷܭଌ͕ߦ͑Δ શ෦Facebookެࣜʂ
  2. Component Lifecycle Mount Update Unmount DPOTUSVDUPS SFOEFS DPNQPOFOU8JMM.PVOU DPNQPOFOU%JE.PVOU DPNQPOFOU8JMM3FDFJWF1SPQ

    TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF SFOEFS DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM6ONPVOU true false
  3. 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
  4. 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ͷத਎΋ ൺֱ͠·͢