Question

目标：我想通过在CI服务器上运行节点脚本来评估带有生产规模数据的React应用的性能。这个想法是随着代码库的发展来衡量我们项目的性能。

我已经在Google上搜索了，很惊讶没有找到与我要达到的目标类似的东西。

我正在尝试通过SSR并使用产品数据执行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，20，30，30，30，30，30，30，30，30]

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

我对某些节点正在执行的操作有误解，或者我走错了路。我想知道是否有人有想法？也热衷于其他建议。

Answer 1

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

您甚至可以执行诸如选择Internet速度/ CPU性能之类的操作，以便了解3G连接上页面的加载速度（也就是在互联网速度可能较低时，在欠发达国家中页面加载的速度）。 / p>

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

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

1 个答案: