内容简介:React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用在Chrome的开发工具插件
React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用
如何使用
在Chrome的开发 工具 插件 react devtool
中多了一个 Profiler
的tab,点击可以切换到 Profiler
界面
在你使用React16.5之后的版本中,开发时默认开启Profiler功能,要想在正是环境也使用这个功能,可以 看这里
默认打开 Profiler
什么都没有,要点击录制按钮进行记录(跟chrome的performance挺像)。
在你开始录制之后你可以进行一些你想分析的操作,然后再点击 stop
来停止录制,就可以得到录制的内容
录制内容分析
首先要了解一点,React在16版本之后处理任务分为两个阶段:
- render 阶段判断哪些变更需要被处理成DOM,也就是比较上一次渲染的结果和新的更新
- commit 阶段React最终达成所有变更(也就是从js对象到DOM的更新),并且会调用
componentDidMount
和componentDidUpdate
这些生命周期方法
开发工具中通过 commit
阶段对性能数据进行编组,会显示在右侧工具栏上
看上去像一个柱状图,每一个柱子代表一次 commit
,他的颜色和高度对应执行时长,越高颜色越黄代表时间越长,反之越短。
删选commits
可以通过 commits
分组左边的设置图标点击出现的对话框设置删选选项,可以设置:
- 执行时间少于多少的不展示
- 是否显示原声DOM渲染的时间
火焰图
火焰图部分会以一个类似树形的结构显示一次 commit
过程中整个每个组件的渲染信息,跟 commit
分组信息类似,颜色和长短对应这个组件的渲染耗时,当然组件的渲染时间需要依赖他的子组件的渲染时间。
上图中可见 Router
组件渲染时间最长,也基本等于 Nav
和 Route
的渲染时间之和,因为子组件的渲染最终肯定会被计算在父组件的渲染时间内。
你可以点击任何一个组件来查看他的详细信息
点击一个组件还可以查看他的 props
和 state
有些时候你选中一个组件,在 commits
分组中进行切换,在 state
和 props
面板会有内容变化的提示
排名视图
选中火焰图边上的排名视图,会展示该次 commit
中组件渲染时间由高到低的排名,方便删选最长时间的渲染。
组件视图
如果你需要查看在你进行录制的过程中,某个组件被渲染了多少次,每次所用的时间,那么这个视图就是为你准备的。
一看像一个柱状图,每一条代表一次渲染,长度和颜色代表时间的长短。
你可以通过双击一个组件,或者选中一个组件,点击右上角的图标来打开该视图。
互动?(Interactions不知道怎么翻译好)
在之前React已经发布了一组实验API来追踪更新的 原因 ,使用这个API的信息也会在devtool中展示
途中四个绿点就是调用API的节点对应的 commit
,同时你也可以在火焰图的 commit
信息中看到在这个 commit
存在的 活动追踪
你可以在 互动 和 commits
之间进行切换通过点击对应的信息
顺带提一下,这个API通过 scheduler
这个包使用
import { unstable_trace as trace } from "schedule/tracing" class MyComponent extends Component { handleLoginButtonClick = event => { trace("Login button click", performance.now(), () => { this.setState({ isLoggingIn: true }); }); }; // render ... } 复制代码
更详细的使用可以 看这里
最后
这个功能非常棒,它能够让开发者非常直观的看到他的每次操作带来的组件渲染消耗,能够很方便帮助开发者发现一些不必要的渲染。
其实在React开发中一些小细节可能会给整个应用的性能开销带来很大的影响,只是现在的浏览器太强大以及大部分应用都处于性能过剩的情况下,所以性能问题不是特别明显。
在原文的最后有一个视频展示了如何利用 Profiler
帮助发现性能问题并优化的案例,大家都可以看一下。
这个更新正好处于我正在阅读源码的时候,所以我会在自己的源码分析里面添加进去,源码分析的成果应该马上就好了,如果大家有兴趣可以关注我。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 性能分析利器总结二《Arthas》
- AS3.0 Profiler 性能分析利器
- Linux内核性能分析利器之trace-cmd和kernelshark
- 用 dotTrace 进行性能分析时,各种不同性能分析选项的含义和用途
- Golang 性能测试 (2) 性能分析
- 页面渲染:性能分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。