只是好奇可以做些什么来测量 React 应用程序的 TTI（网络重要）。由于我们只对特定组件 TTI 感兴趣，因此 lighthouse 将无法在这里提供帮助。
问问题
56 次
1 回答
1
Lighthouse 对交互时间 (TTI) 的定义并不是在尝试测量组件交互性时使用的理想指标，原因如下：
- TTI 是一种实验室指标，其中首次输入延迟(FID) 是用于真实世界数据的更好代理，但在页面级别
- TTI 通过查找网络的前5 秒“安静”窗口（<=2 进行中的网络请求）和 CPU 活动（主线程上没有长时间的任务）来估计页面何时空闲。在组件级别观察事物时，这种近似不是最好的方法。
当尝试在 React 中测量组件级别的性能时，我会建议以下任一方法：
- 使用官方的React 开发者工具来获得以不同方式（组件分析、交互、调度）分割的整个应用程序性能的高级概览
- 使用Profiler API测量应用程序中的任何组件树需要多长时间才能呈现。您还可以结合使用User Timing API直接在回调中添加标记和度量
onRender，然后将自动显示在 Chrome DevTool 的 Performance 面板和 Lighthouse 的User Timings 部分中。这使您能够直接在 Lighthouse 中测量组件交互性：)
于 2022-01-13T20:58:51.387 回答