chrome开发者工具之performance

一、界面介绍

1：操作区域：包含录制，刷新页面分析，清除结果等一系列操作
2：overview总览图：高度概括随时间线的变动，包括FPS，CPU，NET
3：详情区域：从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main等
4：总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理

二、操作区域简介

1、开始录制按钮(window下快捷键ctrl+E)
2、重新录制按钮
3、清空录制信息
4、打开本地录制文件
5、保存当前录制数据
6、多个录屏的切换
7、是否屏幕快照（勾选了，总览图中会有一系列的屏幕快照，位置在Net和HEAP之间；反之，不会显示屏幕快照）
8、是否显示内存（勾选了，总览图中的屏幕快照下面有一个Heap，就是我们通俗所说的内存）
9、垃圾回收
10、禁止脚本样本（勾选了，在详情区域的Main区域不会显示js事件的调用 ；反之会的。这里可以通过两个录制来看一下【禁止时候的火焰图明显低一些】）
11、调整网络状态（模拟一些网络不好的状况）
12、是否开启加速渲染（默认不用勾选，这个不具体展开）
13、cpu性能设置（可以调整4xslowdown来模拟手机运行）

三、总览图

1、FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
2、CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型，不同颜色代表不同资源
【蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间）
】
3、NET。有两条蓝色的长条，深蓝代表优先级比较高的请求，浅蓝代表优先级比较低的请求
4、屏幕快照。可以把鼠标放到总览图区域会有一个屏幕快照的弹框图
5、HEAP。这就是通常说的内存

总览图的快捷键：选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移

四、详情区域

①在详情区域，上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件
②这里只关注NetWork/Frames/Main三个
a、NetWork：
1》请求左上角的深蓝色方块表示它是一个优先级较高的请求。浅蓝色正方形意味着较低的优先级。如下图

2》这里的netWrok与NetWork工具的对应关系
这里的 www.google.com 请求由左边的横线，中间的浅色和深色的bar，右边的横线组成。
左边横线部分对应NetWork工具中Request Sent之前的所有的事情
浅色的bar对应NetWork工具中Request Sent 和Waiting
深色的bar对应NetWork工具中Content Download
右边的横线表示等待主进程所花费的时间，在NetWork工具中没有显示出来

b、Frames：
1》鼠标放到某一个小色块上，会有一个浮框显示如：77.9ms ~13fps frames 【13fps有77.9ms】

c、Main：
1》这里显示的倒过来的火焰图，上面的事件调用下面的事件。

五、总结区域

详情区域主要包括两个部分：上半部分（内存情况）和下半部分（选中的时间段的是事件相关信息统计）
1》内存情况：
JS Heap:js堆
Documents:文档数
Nodes:DOM 节点数
Listeners:监听数
GPU Memory:GPU内存
2》总结情况
summary:按照网页显示的整个过程，统计每个阶段花费的时间【loading/scripting/rendering/painting/other/idle】
Bottom-Up:按照事件花费的时间长短来排序的
Call Tree:按照调用顺序来排序的【从根调用事件到当前选中事件】
Event Log：按照事件发生的先后顺序排序，显示的事件的详细信息