React.js性能分析

2020 年 4 月 27 日

React.js性能分析

今天我将向大家演示如何使用React Profiler APITracing API以及User Timing API来分别追踪 React 的组件渲染、用户交互以及自定义性能指标。

本文最初发布于 Addy Osmani 博客,经原作者授权由 InfoQ 中文站翻译并分享。

下面我会用一个影片排期的应用做具体的演示(译者注:应用效果图如下)。

React Profiler API

首先来了解下 React Profiler ,它主要用来追踪应用组件的渲染过程以及渲染开销,同时标记出应用的性能瓶颈。Profiler 接受一个onRender回调函数,当被追踪的组件以及子代组件发生更新时,该函数就会被调用。下图是在影片排期应用中使用 Profiler 追踪各个组件渲染:

Profiler 中onRender回调函数的具体参数如下:

  • id:这是 Profiler 的唯一标示,区分是哪个 Profiler 追踪的组件树发生了更新
  • phase:如果更新是挂载阶段这个值就是“mount”,如果是二次渲染阶段就是“update”
  • actualDuration:更新花费的渲染时间
  • baseDuration:更新预计花费的渲染时间
  • startTime:更新开始时间点
  • commitTime:更新提交的时间点
  • interactions:更新中包含的交互信息

原文链接:【 https://www.infoq.cn/article/8T9M7dtzqWNsSFfXMgSb 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2020 年 4 月 27 日 12:12 1296

评论 1 条评论

发布
暂无评论
发现更多内容
React.js性能分析-InfoQ