如何用React DevTools Profiler追踪两次渲染间的耗时流程？

• 用React DevTools Profiler的Timing面板深挖
  打开你录制的Profiler详情，切换到Timing标签（默认是Flamegraph），这里会以时间轴形式展示所有渲染批次。你能直接看到两次Rendered事件之间的空白时间段，这段时间里的所有任务（比如API请求、同步JS计算、浏览器重绘）都会被列出来，这就是导致页面卡住的核心原因。

• 针对性排查间隔内的任务类型

  • 如果是API请求：检查Wishlist页面的数据请求是不是在导航触发后才发起，能不能提前预加载；看看请求的响应耗时、有没有冗余的序列化/处理逻辑拖慢速度。
  • 如果是同步JS阻塞：用Chrome DevTools的Performance面板录制完整的导航流程，和React Profiler的时间点对应，定位这段时间里执行的同步代码——比如状态更新的复杂计算、全局订阅的回调、第三方库的同步操作。
  • 如果是路由异步加载：检查Wishlist组件的懒加载配置，看看chunk加载有没有延迟，或者webpack代码分割是否合理。

• 补充验证手段
  在点击Wishlist图标的回调里加console.time('nav-start')，再在Wishlist组件的useEffect(() => console.timeEnd('nav-start'), [])里结束计时，直接打印从点击到页面渲染完成的总耗时，和Profiler的时间做交叉验证。另外如果用React Router，别忘了检查导航守卫（比如loader函数、beforeEnter钩子）里有没有耗时操作，这些逻辑会在页面渲染前执行，很容易造成间隔。

内容的提问来源于stack exchange，提问作者flix