React Profiler Chrome Tool

Stella981
• 阅读 765

简单记录下chrome的react工具,Profiler如何使用

1.首先不多说,你需要安装一个react的chrome的插件.
React Profiler Chrome Tool

在许久之前,只有一个Element....
2.React Profiler Chrome Tool

跟Chrome自带的performace很像是吧,点击录制按钮就可以开始监听,然后开始操作你想监听的react组件.

3.点击录制结束后,可以看到具体的信息
  React Profiler Chrome Tool

关于commit,官网给出的

  • The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like componentDidMount and componentDidUpdate during this phase.
    个人理解为,任何的state变动和 componentDidMount, componentDidUpdate这2个生命周期函数都算为commit每一个commit都是独立计算分析。

  • _柱状图的长短显示了每个commit的用时

    _

4.React Profiler Chrome Tool

火焰图视图表示特定提交的应用程序的状态。图中的每个条表示一个React组件(Row, Card....)。

条的大小和颜色表示渲染组件及其子组件所需的时间。(条形图的宽度表示组件上次呈现时所花费的时间,颜色表示作为当前提交的一部分所花费的时间。)
这种蓝绿色的条表示其作为组件在父类组件执行了多久
5
React Profiler Chrome Tool

单击任何一个横条可以显示这个组件内的props和states
6React Profiler Chrome Tool

可以更换你喜欢的查看方式,图上显示了渲染时间最长的在最上面.(顶部的组件可能包含其下面显示的子组件)

最后一个
React Profiler Chrome Tool

可以监控请求数据的大小和时间,需要额外在代码中安装一个组件
https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16
有兴趣的可以试试

7 如果点击柱状图显示
React Profiler Chrome Tool

你可以切换回elements选项换一个root节点查看

React Profiler Chrome Tool

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这