在页面性能分析中，Performance 可以记录站点在运行过程中的性能数据。不同于 Audits，Perofrmance 不会给出性能得分，也不会给出优化建议，它只是单纯地采集性能数据，并将采集到的数据按照时间线的方式来展现。有了这些性能数据，我们就可以回放整个页面的执行过程，这样就方便我们来定位和诊断每个时间段内页面的运行情况，从而有效帮助我们找出页面的性能瓶颈。

一、工具栏

首先是常见的一些操作按钮

1）黑色按钮是用来记录交互阶段的性能数据

2）带箭头的圆圈形按钮用来记录整个页面加载的性能数据

3）清除所有已经生成的分析结果

4）上传页面性能录制的数据

5）下载页面性能录制的数据

6）多次录制时，可切换展示已录制的性能记录

7）是否捕捉页面加载过程的截图

8）是否记录内存变化

9）手动触发垃圾回收机

10）将 CPU 的运算能力降低到了 1/4或者1/6

11）将网络的加载速度设置为“快的 3G(Fast 3G) ”等网络状态

注意点：

当你录制加载阶段的性能数据时，Performance 会重新刷新页面，并等到页面完全渲染出来后，Performance 就会自动停止录制。如果你是录制交互阶段的性能时，那么需要手动停止录制过程。

二、结果报告页

image (1).png

时间线

首先，有没有同学对上面的两个时间线有疑问过，看不懂。其实，总的时间线是上面那一条，下面的时间刻度是根据我们选的区间，展示该区间内的时间点。这样子，我们就可以分析该区间内，页面都发生了什么。我们如果录制了 10000 毫秒的数据，那么它的时间线长度也就是 10000 毫秒。

image (2).png

其中，下面的的详情面板也是依据上面选的时间区间来进行分析的

image (3).png

概览面板

FPS，CPU, NET, HEAP

概览面板主要显示整个记录的整体信息，包括FPS，CPU, NET, HEAP等。有了概览面板，我们就能一览几个关键的历史数据指标，进而能快速定位到可能存在问题的时间节点。那么如何定位可能存在问题的时间节点呢？

FPS：每秒帧数，绿色代表好，红色代表差。如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的渲染时间过久，就有可能导致页面卡顿。

CPU：CPU处理各个任务花费的时间，不同颜色代表脚本、渲染等花费的时间。如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个 JavaScript 占用太多的主线程时间，从而影响其他任务的执行。

image (4).png

NET：NET标识各个请求花费的时间

HEAP：V8 内存使用量 (堆内存)。如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。

DCL、L、FP、FCP、LCP

大家平常所听到的性能指标，大部分都是看网上的一些截图和名词，但真正在自己的网站上要咋看呢？会不会好奇？其实，在performance的概览面板中我们就可以看得到。它展示了加载过程中的几个关键时间节点，如 FP、LCP、DOMContentLoaded、Onload 等事件产生的时间点。这些关键时间点体现在了几条不同颜色的竖线上。

DCL：DOMContentLoaded Event（蓝色）。当所有DOM解析完以后会触发这个事件。

L：Onload Event（红色）。onload 事件会在页面或图像加载完成后立即发生。

FP：First Paint（浅绿色）。首次渲染的时间点。FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。

FCP：First Contentful Paint（墨绿色）。首次有实际内容渲染的时间点，浏览器首次绘制来自DOM的内容的时间，内容必须包括文本、图片等，这是用户第一次看到的内容。

LCP：Largest Contentful Paint（黑色）。最大的内容在可视区域内变得可见的时间点。

image (5).png

性能面板

通常，我们通过概览面板来定位到可能存在问题的时间节点，接下来需要更进一步的数据，来分析导致该问题的原因。这就需要性能面板了，在性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程。有了这些详细的性能数据，就可以帮助我们定位到页面的性能问题。

比如概览面板中的 FPS 图表中出现了红色块，那么我们点击该红色块，性能面板就定位到该红色块的时间节点内了

image (6).png

线程指标

1）Main指标

主线程，记录了渲染进程的主线程的任务执行记录，在 Perofrmace 录制期间，在渲染主线程上执行的所有记录都可以通过 Main 指标来查看。

x轴指时间最上面的第一条就是事件触发的地方，直到结束，这条线是最长的

y轴指调用栈上面的event调用了下面的子event，越到下面数量越少（瀑布）

image (7).png

图上方有很多一段一段灰色横条，每个灰色横条就对应了一个任务，灰色长条的长度对应了任务的执行时长。通常，渲染主线程上的任务都是比较复杂的，如果只单纯记录任务执行的时长，那么依然很难定位问题，因此，还需要将任务执行过程中的一些关键的细节记录下来，这些细节就是任务的过程，灰线下面的横条就是一个个过程，同样这些横条的长度就代表这些过程执行的时长。

直观地理解，你可以把任务看成是一个 Task 函数，在执行 Task 函数的过程中，它会调用一系列的子函数，这些子函数就是我们所提到的过程。为了更好地理解，我们来分析下面这个任务的图形：

image (8).png

可以把该图形看成是下面 Task 函数的执行过程：

function A(){
    A1()
    A2()
}
function Task(){
    A()
    B()
}
Task()

Task 任务会首先调用 A 过程；

随后 A 过程又依次调用了 A1 和 A2 过程，然后 A 过程执行完毕；

随后 Task 任务又执行了 B 过程；

B 过程执行结束，Task 任务执行完成；

从图中可以看出，A 过程执行时间最长，所以在 A1 过程时，拉长了整个任务的执行时长。

2）Chrome_ChildIOThread

IO 线程主要用来接收用户输入事件、网络事件、设备相关等事件，如果事件需要渲染主线程来处理，那么 IO 线程还会将这些事件转发给渲染主线程。在性能面板上，Chrome_ChildIOThread 指标对应的就是 IO 线程的任务记录。

性能指标

1）Network 指标

网络记录展示了页面中的每个网络请求所消耗的时长，并以瀑布流的形式展现。这块内容和网络面板的瀑布流类似，之所以放在性能面板中是为了方便我们和其他指标对照着分析。

image (9).png

2）Timings 指标

用来记录一些关键的时间节点在何时产生的数据信息，诸如 FP、FCP、LCP 等。

image (10).png

3）Frames 指标

Frames 指标，也就是浏览器生成每帧的记录，我们知道页面所展现出来的画面都是由渲染进程一帧一帧渲染出来的，帧记录就是用来记录渲染进程生成所有帧信息，包括了渲染出每帧的时长、每帧的图层构造等信息，你可以点击对应的帧，然后在详细信息面板里面查看具体信息。

image (11).png

白色：没有变化

绿色：按预期及时渲染

黄色：浏览器尽最大努力及时呈现至少一些视觉更新，比如滚动了但主线程没空

红色：掉帧，无法在合理的时间内渲染帧，比如：scroll，resize事件触发过于频繁,浏览器来不及处理导致在下一个事件被触发之前无法完成

详情面板

通过性能面板的分析，我们知道了性能面板记录了多种指标的数据信息，并且以图形的形式展现在性能面板上。通过图形我们只能得到一个大致的信息，如果想要查看这些记录的详细信息，就需要引入详情面板了。

我们可以在性能面板中选中性能指标中的任何历史数据，然后选中记录的细节信息就会展现在详情面板中了。

image (12).png

Summary 统计图

展示各个事件阶段耗费的时间

Loading 加载

Scripting 脚本

Rendering 渲染

Painting 绘制

ldle 闲置

Bottom-Up 排序

可以看到各个事件消耗时间排序

self-time 指除去子事件这个事件本身消耗的时间

total-time 这个事件从开始到结束消耗的时间（包含子事件）

Call Tree 调用栈

Main选择一个事件，可以看到整个事件的调用栈

Event Log 事件日志

多了个start time的选项，指事件在多少毫秒开始触发的。右边有事件描述信息

性能优化-Performance性能问题分析