如何在一段时间内测量React App的首次渲染性能？

Question

目标:我想通过在CI服务器上运行一个节点脚本，使用生产规模数据来测量我们的react应用程序的性能。我们的想法是随着代码库的发展来衡量我们项目的性能。

我用谷歌搜索了一下，惊讶地发现没有找到任何与我想要实现的目标类似的东西。

我尝试通过SSR对我们的prod数据执行renderToString()，并使用dateTime捕获时间差，这给出了一个合理的时间(大约2秒)。我想执行它X次，并获得最快的时间来减少异常。它可能不能准确地测量用户的第一次渲染性能，但它更多的是捕获一段时间内的相对性能。

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)
}

我期望时间戳是类似于2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000

然而，时间戳实际返回的是2000、20、30、30、30、30、30、30、30

当它在第一次迭代后执行renderToString时，它似乎建议返回缓存的结果。

关于node正在做什么，我在幕后有一些误解，或者我走错了路。我想知道有没有人有主意？也热衷于寻求替代建议。

Answer 1

嗯..。这可能不能让您捕获用户随时间推移的性能，但您可以使用Google Lighthouse来衡量您网站的性能。它可以直接从Chrome浏览器运行，甚至可以从命令行运行。

你甚至可以选择互联网速度/CPU性能，这样你就可以知道你的页面在3G连接上的加载速度(在欠发达国家，当互联网速度可能较慢时，也就是你的页面加载速度有多快)。

它将性能得分分解到各个部分，如脚本加载、包大小等，并为您提供如何提高性能的提示。