React之Perf

时间:2021-10-10 04:38:50
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的别名,最终会被弃用。