React性能分析利器来了,妈妈再也不用担心我的React应用慢了

栏目: IOS · Android · 发布时间: 6年前

内容简介:React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用在Chrome的开发工具插件

React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用

官方博客

如何使用

在Chrome的开发 工具 插件 react devtool 中多了一个 Profiler 的tab,点击可以切换到 Profiler 界面

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

在你使用React16.5之后的版本中,开发时默认开启Profiler功能,要想在正是环境也使用这个功能,可以 看这里

默认打开 Profiler 什么都没有,要点击录制按钮进行记录(跟chrome的performance挺像)。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

在你开始录制之后你可以进行一些你想分析的操作,然后再点击 stop 来停止录制,就可以得到录制的内容

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

录制内容分析

首先要了解一点,React在16版本之后处理任务分为两个阶段:

  1. render 阶段判断哪些变更需要被处理成DOM,也就是比较上一次渲染的结果和新的更新
  2. commit 阶段React最终达成所有变更(也就是从js对象到DOM的更新),并且会调用 componentDidMountcomponentDidUpdate 这些生命周期方法

开发工具中通过 commit 阶段对性能数据进行编组,会显示在右侧工具栏上

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

看上去像一个柱状图,每一个柱子代表一次 commit ,他的颜色和高度对应执行时长,越高颜色越黄代表时间越长,反之越短。

删选commits

可以通过 commits 分组左边的设置图标点击出现的对话框设置删选选项,可以设置:

  1. 执行时间少于多少的不展示
  2. 是否显示原声DOM渲染的时间
React性能分析利器来了,妈妈再也不用担心我的React应用慢了

火焰图

火焰图部分会以一个类似树形的结构显示一次 commit 过程中整个每个组件的渲染信息,跟 commit 分组信息类似,颜色和长短对应这个组件的渲染耗时,当然组件的渲染时间需要依赖他的子组件的渲染时间。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

上图中可见 Router 组件渲染时间最长,也基本等于 NavRoute 的渲染时间之和,因为子组件的渲染最终肯定会被计算在父组件的渲染时间内。

你可以点击任何一个组件来查看他的详细信息

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

点击一个组件还可以查看他的 propsstate

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

有些时候你选中一个组件,在 commits 分组中进行切换,在 stateprops 面板会有内容变化的提示

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

排名视图

选中火焰图边上的排名视图,会展示该次 commit 中组件渲染时间由高到低的排名,方便删选最长时间的渲染。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

组件视图

如果你需要查看在你进行录制的过程中,某个组件被渲染了多少次,每次所用的时间,那么这个视图就是为你准备的。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

一看像一个柱状图,每一条代表一次渲染,长度和颜色代表时间的长短。

你可以通过双击一个组件,或者选中一个组件,点击右上角的图标来打开该视图。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

互动?(Interactions不知道怎么翻译好)

在之前React已经发布了一组实验API来追踪更新的 原因 ,使用这个API的信息也会在devtool中展示

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

途中四个绿点就是调用API的节点对应的 commit ,同时你也可以在火焰图的 commit 信息中看到在这个 commit 存在的 活动追踪

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

你可以在 互动commits 之间进行切换通过点击对应的信息

React性能分析利器来了,妈妈再也不用担心我的React应用慢了

顺带提一下,这个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 帮助发现性能问题并优化的案例,大家都可以看一下。

这个更新正好处于我正在阅读源码的时候,所以我会在自己的源码分析里面添加进去,源码分析的成果应该马上就好了,如果大家有兴趣可以关注我。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ruby元编程

Ruby元编程

[意] Paolo Perrotta / 廖志刚、陈睿杰 / 华中科技大学出版社 / 2012-1-10 / 56.00元

《Ruby元编程》以案例形式循序渐进讲解Ruby对象模型原理和高级应用技巧,堪称动态语言的设计模式。书中讲述的各种Ruby编程模式,完全可以应用于其他动态语言(甚至静态语言)。本书不仅适合Ruby程序员阅读,也适合对动态编程 语言和面向对象编程感兴趣的读者阅读。所有对程序设计理论感兴趣的人都能从中获益。Ruby之父松本行弘作序推荐。一起来看看 《Ruby元编程》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具