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

User Timing API with React Redux

Kento TSUJI
October 15, 2018
210

User Timing API with React Redux

- What is User Timing
- User Timing in React
- User Timing in Redux

Kento TSUJI

October 15, 2018
Tweet

Transcript

  1. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.mesure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠ %FW5PPMTͰ ύϑΥʔϚϯεΛܭଌ͢Δ
  2. React ʹ͓͚Δ User Timing • React16 ͔Β react-addons-perf ͕࢖͑ͳ͍ •

    ୅ΘΓʹ User Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸໌ࣔతʹ mark ͠ͳͯ͘΋ OK
  3. redux-action-timing-middleware import { applyMiddleware, compose, createStore } from "redux"; import

    actionTiming from 'redux-action-timing-middleware' export default (reducer, initialState) => { const middlewares = [ // Please set first args, If you use only development // Please put top in middleware list if marking middleware action actionTiming(process.env.NODE_ENV === 'development'), middlewareA, middlewareB, ] const store = createStore(reducer,initialState,compose(applyMiddleware(...middlewares))) }
  4. redux-action-timing-middleware import { applyMiddleware, compose, createStore } from "redux"; import

    actionTiming from 'redux-action-timing-middleware' export default (reducer, initialState) => { const middlewares = [ // Please set first args, If you use only development // Please put top in middleware list if marking middleware action actionTiming(process.env.NODE_ENV === 'development'), middlewareA, middlewareB, ] const store = createStore(reducer,initialState,compose(applyMiddleware(...middlewares))) } NJEEMFXBSF଍͚ͩ͢
  5. ·ͱΊ • User Timing API ͸͘͢͝γϯϓϧ • React16 ͔Β User

    Timing API ϕʔε • Redux ͷ middleware Ͱ 
 Actionͷ࣌ؒΛݟΔ͜ͱͰͱͯ΋ศར