使用 performance.now 衡量 Next.js 页面的性能

Question

我想测量页面为 SSR 花费的时间。在 next.js 中有一种方法可以使用函数 reportWebVitals 来衡量性能，但是在使用这种方法之前，我想先玩一下 performance.now。

那么，是否可以使用 performance.now 类似下面代码片段的方法来测量渲染时间，它会准确吗？

const Page = () => {
  const t1 = performance.now();

  const pageBody = <h1>Hello world</h1>
  
  const t2 = performance.now();

  console.log(`Page took ${t2 - t1}ms`);

  return pageBody;
}

注意：假设我们只做SSR

Answer 1

这是我的研究结果，页面时间与组件渲染无关，正如评论中所说，渲染是您需要衡量的东西

page: 0.112ms
component: 0.113ms
render 0 -------------: 10.383ms
page: 0.018ms
component: 0.054ms
render 1000 -------------: 1.284ms
page: 0.021ms
component: 3.903ms
render 1000000 -------------: 4.749ms
page: 0.019ms
component: 1.195s
render 1000000000 -------------: 1.201s
page: 0.011ms
// codes https://github.com/postor/measure-performance-of-react-ssr

为什么会这样？因为 jsx 是这样编译的

// before
const Page = ()=> <Comp /> 
// after
const Page = ()=>React.createElement(Comp)

所以React.createElement不直接渲染子组件，更像是有子组件的结构，评论里说，React is more a scheduler than a reactor，组件在需要的时候调用，所以时间线是这样的

call render
  found page
     call page and return structure
  found component
     call component and return structure
  render structure to html and return

使用 performance.now 衡量 Next.js 页面的性能

Measuring performance of Next.js page with performance.now

javascript

reactjs

next.js