前端离不开chrome~

performance monitor

借助chrome提供的performance monitor工具，我们可以实时直观的监控页面性能。

点击左侧菜单可以选择显示、隐藏对应图表。

右边图表与左边菜单一一对应，简洁、实时明了是它最大的优点；

同样它最大的缺点也是太过简单，除了能够实时看见性能走势，无法做任何操作了。即使你看见某个时间点cpu满载了你也没法定位问题。

JavaScript profile

用来监控页面cpu性能

cpu性能记录图表可以选择三种查看方式，分别为

很常见的火焰图，鼠标移到对应色块上会显示详细信息，点击对应条块会根据URL属性直接跳到对应文件。

很好理解的bottom up，由下到上，这里则是直接列出所有事件。

tree与heavy对应，top down由上而下，所以列表仅有如下数据。

不同的则是展开function是依次往内的。

监控页面内存相关与JavaScript profile面板基本一样，不同的是左侧选项，三个选项分别是

heap snapshot 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
allocation instrumentation on timeline 在时间轴上记录内存信息，随着时间变化记录内存信息
allocation sampling 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

右上方三个选项分别为查看方式、、对象归类筛选、对象选择

Summary可以选择查看内存快照的方式

Summary - 可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏，如上图。
Containment - 此视图提供了一种对象结构视图来分析内存使用，由顶级对象作为入口。
Statistic - 内存使用饼状的统计图。

与上面的快照一样，不同的是多了时间线可以供选择

与前面的JavaScript profile一样，只不过cpu数据变成了内存

分析网页运行时的各种性能，相对于前面的几个工具可以说是个汇总，更全面

record按钮，点击即开始记录页面操作

弹框显示当前进度，stop按钮停止记录，然后会生成profile加载到视图框。
刷新按钮，点击刷新页面并开始记录，页面加载完成后自动生成profile
clear 清空当前统计的profile
分别为load/save 载入/保存 profile
下拉框为历史记录，下拉可以选择最近加载过的几个profile，没有记录的时候不可选
screenshots radio框控制是否显示截图功能
memory 控制是否显示内存使用量
垃圾回收
Disable JavaScript samples 禁用和启用JavaScript示例。禁用后，记录的主要部分要短得多，因为它忽略了所有JavaScript调用堆栈。
network可以选择网络模式
Enable advanced paint instrumentation (slow) 启用高级绘画工具，详细记录渲染事件的细节
可以自定义cpu性能

首先需要科普的是颜色，各颜色含义：

最上面一块从上往下，依次是FPS、cpu占用率、network请求耗时、页面截图、内存占用大小

中间的每条则为详细内容，其中的main是重点，也是我们日常中所说的火焰图，不过这个火焰图与一半的火焰图不同，是倒着的，上面的事件调用下面的

下方的线图则与performance monitor相似

底下的summary则为总览耗时，各操作所花费的时间占比

在第二行我们可以看见Warning Recurring handler took 68.25 ms的提示，意思就是循环操作性能损耗太严重，箭头指向的黄色款右上角也有红色三角形标识
Initiator Reveal标识了操作来源，点击跳转到下面详细的调用栈
图中X轴每一个横条都代表一个事件，长条的宽度代表所花费的时间，越长花费越久；y轴表示调用堆栈，事件相互叠加时，较高的时间导致较低的事件。
如果火焰图下方的调用太多可以使用前面提到的Disable JavaScript samples禁用js示例，这样就只能看见高级事件了。
调用树
在call tree当中我们可以清晰地看见调用堆栈以及其所花费的时间。
查看交互
在interactions中可以看见用户交互
frames
可以准确的看见特定帧花了多少时间
底部面板