performance 工具学习

性能分析操作流程

1. 在谷歌浏览器调式模式下，切换到 performance 选项卡。点击刷新图标（或者Ctrl+Shift+E快捷键）。

1.1.Record：记录按钮，点击后变为红色，可以在页面上进行各种操作，操作都会被浏览器进行记录。
1.2. Start profiling and reload page：开始收集信息并且重新载入页面，可以理解为刷新。
1.3. Clear：清除记录
1.4. load profile/save profile：载入/报错记录
1.5. 勾选后，会增加截屏展示
1.6.

2. 出现如下网页分析进度条。
   

3. 自动停止后，会出现性能分析图。

注意点1）：需要勾选屏幕快照选项，才会出现如下屏幕快照截图（一般是默认勾选）。

C区域部分学习：

网络(Network)：

展示资源加载顺序及耗费时间。可以根据网络结合学习

时间（Timings）：

展示主要的几个时间点，点击后Summary中展示具体的值。

Main：

由于 Main 的图表长得像一团团倒立的火焰，所以，我们将其称为火焰图。它展现了主线程在 Record 过程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短，超过50ms的长任务会被特殊标记

如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。

体验：

红色的方块代表发生布局偏移