深入浅出React.js 性能分析( 三 ) _React.js

文章插图

React 用户可能会喜欢像总阻塞时间 (TBT) 这样的新指标，它量化一个页面具体什么时候才可以交互（可交互时间），下面我们可以看下在并发模式前后应用发生更新时，TBT 的情况:

文章插图

这些工具一般能帮助我们了解在浏览器级别的视图性能瓶颈，例如，哪些繁重冗长的任务会引起交互延迟 (例如按钮点击响应) :

文章插图

Lighthouse 还为一些特定的性能场景提供了修改建议。如在 Lighthouse 6.0 中可以看到一个提示，建议我们移除未使用的 JavaScript代码。Lighthouse 追踪到了这个问题并且提醒我们可以使用 React.lazy () 来引入这个 JavaScript 。

文章插图

借助用户端的硬件进行性能智能检查，往往对性能分析非常有帮助。
最后，除了上面提到的我通常还会从 RUM 和 CrUX 获取一些数据字段，然后用 webpagetest.org/easy 工具帮我生成更多的场景图片，以便更好的进行性能分析。

【深入浅出React.js 性能分析】