React之Perf
import Perf from 'react-addons-perf' // ES6语法
var Perf = require('react-addons-perf') // ES5语法针对nodejs
var Perf = React.addons.Perf; // ES5语法,针对浏览器,增加react-with-addons.js在script标签中
1.概要
React本身就非常快速了,然而,如果你想进一步提升你的应用的性能的话,可以通过shouldComponentUpdate()来优化你的DOM diff算法,这是我们之前就已经接触或者是非常了解的优化方式。
除此之外,你还可以概述你的应用程序的总体性能,而Perf就是这样一个工具,它会告诉你哪里需要设置shouldComponentUpdate去减少优化你视图的更新变更次数等等。
如果你已经确定你的React应用存在性能上面的问题,可以使用这个工具来进行检测,它会给出一些帮助性的警告,让你能够了解到一些东西。
然而,Perf工具只能用来处理React应用,同时它只会显示性能最差的部分。
2.使用Perf
Perf对象是用于React的开发阶段的,你不应该将这个包放在最终的应用程序包中。
获得测试结果的方法
start()
stop()
getLastMeasurements()
下面的方式是通过 Perf.getLastMeasurements()处理后进行打印的。
printInclusive()
printExclusive()
printWasted()
printOperations()
printDOM()
3.函数详解
start(),stop()
调用方式
Perf.start()
// ...
Perf.stop()
start/stop这两个方法,放在你要测试性能的代码的两端,如果操作消耗一些时间,但是这些时间是微不足道的,会被直接忽略(所以在小型的项目中,这个工具可能并不会有结果)。
在stop函数调用,停止测试后,你需要用Perf.getLastMeasurements()去得到测试的结果。
Perf.getLastMeasurements()
这个函数会得到一个关于之前测试数据结果的结构体,你可以保存它或者通过打印函数将结果打印出来,从而去分析测试的结果。
注意
请不要依赖于返回的数据格式,也就是说尽可能用打印函数打印返回的结构体,因为这个格式可能在以后的版本中发生较大的变更,如果返回的格式已经被加入到公共的API中,那么官方文档会进行更新。
Perf.printInclusive(measurements)
这个函数会打印测试的总时间以及一些相关信息,如果没有什么参数的话,函数会打印出所有的测试记录,它同时会在控制台直接以table的格式良好的进行显示(在console中用console.table()函数可以进行table格式的显示)
Perf.printExclusive(measurements)
Exclusive单词的意思是独立,跟printInclusive有点类似,但是不会包括装载组件的时间:处理props,componentWillMount和componentDidMount这些东西的时间都不会算进去。
printWasted()
Perf.printWasted(measurements)
这是Perf性能分析工具最有用的部分,”Wasted“浪费的时间:时间浪费在组件上但是又没有用于去更新组件
Perf.printOperations(measurements)
打印底层的一些操作
Perf.printDOM(measurements)
它是printOperations的别名,最终会被弃用。
React之Perf的更多相关文章
- react+redux渲染性能优化原理
大家都知道,react的一个痛点就是非父子关系的组件之间的通信,其官方文档对此也并不避讳: For communication between two components that don't ha ...
- react 实用的性能优化方式
react 组件渲染分为初始化渲染和更新渲染,当我们更新某个组件的时候,只是想关键路径上组件的render,但react的默认做法是调用所以组件的reder,再生成虚拟dom进行对比,如不变则不进行更 ...
- react生命周期,中间件、性能优化、数据传递、mixin的使用
https://github.com/lulujianglab/blog/issues/34 一.生命周期 1,初始化的执行顺序,初始生命周期执行过程详解 class initSate extends ...
- react问题解决的一些方法
原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...
- React性能优化总结(转)
原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...
- React-用ImmutableJS提高性能
一.需求 1.子组件有更新时,只重新渲染有变化的子组件,而不是全部 二.ImmutableJS原理 三.代码 1.CheckboxWithLabel.jsx var React = require(' ...
- 前端模块化开发学习之gulp&browserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
- reactJs 基础
react不是一个完整的mvc,mvvm框架. react跟web components 不冲突 背景原理:基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...
随机推荐
- 转《service worker在移动端H5项目的应用》
1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...
- Ionic常用命令
安装ionic npm install -g ionic 更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower update ionic, 否则则会从CDN上下载 ...
- windos安装maven
1.下载好maven压缩包,并解压到相应位置,本次安装在D: 2.配置环境变量 MAVEN_HOME=D:\apache-maven-3.0.5 path=%MAVEN_HOME% 3.生成maven ...
- zabbix自定义监控项
原因:zabbix监控系统自带的监控规则有限,如果需要更加灵活的定义监控项,可以通过修改配置文件实现 vim xxx/zabbix_agentd.conf UnsafeUserParameters=1 ...
- python数据结构与算法第七天【链表】
1.链表的定义 如图: 注意: (1)线性表包括顺序表和链表 (2)顺序表是将元素顺序地存放在一块连续的存储区里 (3)链表是将元素存放在通过链构造的存储快中 2. 单向链表的实现 #!/usr/bi ...
- 老男孩python学习自修第七天【包与模块】
1.如何导入 from package import module module.function() 常用魔术方法 __init__.py 如果某个文件夹下面有该文件,则该文件夹是一个包,否则只是一 ...
- SVG路径
前面的话 本文将详细介绍SVG路径 path字符串 路径(path)是一个非常强大的绘图工具,可以用path元素绘制矩形(直角矩形或者圆角矩形).圆形.椭圆.折线形.多边形,以及一些其他的形状,例如贝 ...
- 【python练习题】程序4
# 题目:输入某年某月某日,判断这一天是这一年的第几天? import time year = input('输入年份: \n') month = input('输入月份: \n') day = in ...
- 使用Windows任务计划程序运行Windows PowerShell脚本
创建计划任务以运行PowerShell脚本 我需要创建一个计划任务来运行Windows PowerShell脚本的第一件事是我将执行的命令行.找到这个的简单方法是使用Run 命令.有时,我需要知道什么 ...
- 包装类接受string 会自动将数字类型string转换成对应得包装类型