Profiler

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

官方博客

如何使用

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

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

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

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

录制内容分析

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

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

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

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

删选commits

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

  1. 执行时间少于多少的不展示
  2. 是否显示原声DOM渲染的时间

火焰图

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

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

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

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

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

排名视图

选中火焰图边上的排名视图,会展示该次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帮助发现性能问题并优化的案例,大家都可以看一下。

React性能分析利器来了,妈妈再也不用担心我的React应用慢了(转)的更多相关文章

  1. 妈妈再也不用担心别人问我是否真正用过redis了

    1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...

  2. 有了 tldr,妈妈再也不用担心我记不住命令了

    引言 有一次我在培训时说「程序员要善于使用 Terminal 以提高开发效率」,一位程序员反驳道:「这是 21 世纪,我们为什么要用落后的命令行,而不是先进的 GUI?」 是的,在一些人眼里,这个黑黑 ...

  3. 妈妈再也不用担心我使用git了

    妈妈再也不用担心我使用git了 Dec 29, 2014 git git由于其灵活,速度快,离线工作等特点而倍受青睐,下面一步步来总结下git的基本命令和常用操作. 安装msysgit 下载地址:ms ...

  4. 利用CH341A编程器刷新BIOS,恢复BIOS,妈妈再也不用担心BIOS刷坏了

    前几天,修电脑主析就捣鼓刷BIOS,结果刷完黑屏开不了机,立刻意识到完了,BIOS刷错了.就从网上查资料,各种方法试了个遍,什么用处都没有.终于功夫不负有心人,找到了编码器,知道了怎么用.下面看看具体 ...

  5. python爬虫07 | 有了 BeautifulSoup ,妈妈再也不用担心我的正则表达式了

    我们上次做了 你的第一个爬虫,爬取当当网 Top 500 本五星好评书籍 有些朋友觉得 利用正则表达式去提取信息 太特么麻烦了 有没有什么别的方式 更方便过滤我们想要的内容啊 emmmm 你还别说 还 ...

  6. 锋利的js之妈妈再也不用担心我找错钱了

    用js实现收银功能. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  7. JDK自带工具一览表。妈妈再也不用担心你到处去下载小软件了~~

    原来JDK早早就给我准备好了要用到的工具..反编译,JVM性能监视.诊断. JDK(Java Development Kit)是Java程序员最核心的开发工具,没有之一. JDK是一个功能强大的Jav ...

  8. Matlab命令合集 妈妈再也不用担心我不会用matlab了

    matlab命令 一.常用对象操作:除了一般windows窗口的常用功能键外.1.!dir 可以查看当前工作目录的文件. !dir& 可以在dos状态下查看.2.who 可以查看当前工作空间变 ...

  9. multipages-generator今日发布?!妈妈再也不用担心移动端h5网站搭建了!

    本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性.这里有他们中的几个h5的例子:(手淘,美柚).这些a ...

随机推荐

  1. Dll注入经典方法完整版

    总结一下基本的注入过程,分注入和卸载 注入Dll: 1,OpenProcess获得要注入进程的句柄 2,VirtualAllocEx在远程进程中开辟出一段内存,长度为strlen(dllname)+1 ...

  2. centos 6.4配置samba+ldap认证

    原文地址:http://www.centoscn.com/image-text/config/2015/0716/5866.html  1. 什么是samba Samba服务类似于windows上的共 ...

  3. IntelliJ IDEA全局内容搜索和替换

      在做项目时,有时会在整个项目里或指定文件夹下进行全局搜索和替换,这是一个很方便功能.使用方法如下: 一.全局搜索 1.使用快捷键Ctrl+Shift+F打开搜索窗口,或者通过点击Edit–> ...

  4. Java编程最差实践(常见编程错误典范)

    转载自  http://macrochen.iteye.com/blog/1393502 每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般 ...

  5. OpenSUSE 服务器系统部署

    1.准备 1.1 下载系统 下载地址:https://software.opensuse.org/distributions/leap 目前的最新版本为leap,推荐使用种子下载速度较快. 1.2 配 ...

  6. CDN介绍

    作者:视界云链接:https://www.zhihu.com/question/37353035/answer/175217812来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  7. 【Linux】使用w命令和uptime命令查看系统负载

    在Linux系统中查询系统CPU和内存的负载(使用率)时,我们通常习惯于使用top.atop或者ps,这篇文章将要给大家介绍如何使用w命令和uptime命令来查看系统的负载情况,对于uptime命令, ...

  8. 应用程序默认安装在C盘后启动时提示权限不足想起的。。。

    最近不少经销商用户反映,在使用win 7的系统的电脑上安装我们的软件后,开启系统时提示权限不足,无法启动软件. 而在xp系统下则没有这个问题,原因在于我们将系统的默认安装路径选择在了C盘了,而win ...

  9. 12.翻译系列:EF 6 中配置一对多的关系【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/configure-one-to-many-relationship-in-code-f ...

  10. Android studio ButterKnife插件

    1.功能:给所有的有id的控件添加注解 2.github地址 https://github.com/avast/android-butterknife-zelezny 3.插件下载地址 http:// ...