lundi 15 avril 2019

How to measure first render performance over time of a React App?

Objective: I want to measure the performance of our react app with production size data by running a node script on our CI server. The idea is to measure the performance of our project over time as the codebase evolves.

I've googled, and was surprised to not find anything similar to what I'm trying to achieve.

I'm trying via SSR and executing renderToString() with our prod data and capturing the time difference using dateTime which gives a reasonable time (around 2 seconds). I want to execute it X number of times and get the fastest time to reduce anomalies. It may not accurately measure the user's first render performance, but it's more about capturing the relative performance over time.

const runPerformanceTest = async () => {
    prodData = await import('../data')

    const history = createMemoryHistory()
    history.replace('/')

    const initialState = () => ({
      data: prodData
    })

    const mockStore = () => createStore(
      rootReducer,
      initialState(),
    )

    const timestamps = []

    for (let i = 0; i < 10; i++) {
      const startTime = Date.now()
      const store = mockStore()
      renderToString((
        <StaticRouter context=>
          <Provider store={store}>
            <ConnectedRouter history={history}>
              <App />
            </ConnectedRouter>
          </Provider>
        </StaticRouter>
      ))
      const endTime = Date.now() - startTime
      timestamps.push(endTime)
    }

    console.log(timestamps)
}

I'm expecting timestamps to be appear something like [2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000]

However what timestamps actually returns is [2000, 20, 30, 30, 30, 30, 30, 30, 30, 30]

Which appears to suggest its returning cached results when it executes renderToString after the first iteration.

There's something I'm misunderstanding under the hood on what node is doing or I'm going down the wrong path. I was wondering if anyone had ideas? Keen for alternative suggestions as well.

Aucun commentaire:

Enregistrer un commentaire