# 性能监测与统计分析

了解浏览器网络与performance分析页面性能
可视化监测：更加聪明的 LightHouse
- 了解Audits面板: 你可以选择度量指标，选择运行网络、运行设备等。
- 运行分析
Performance API
- 关键时间节点

性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。

平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。

# 了解浏览器网络与performance分析页面性能

Performance 是 Chrome 提供给我们的开发者工具，用于记录和分析我们的应用在运行时的所有活动。它呈现的数据具有实时性、多维度的特点，可以帮助我们很好地定位性能问题。

# 开始记录

右键打开开发者工具，选中我们的 Performance 面板：

当我们选中图中所标示的实心圆按钮，Performance 会开始帮我们记录我们后续的交互操作；当我们选中圆箭头按钮，Performance 会将页面重新加载，计算加载过程中的性能表现。 tips：使用 Performance 工具时，为了规避其它 Chrome 插件对页面的性能影响，我们最好在无痕模式下打开页面：

# 简要分析

这里我打开掘金首页，选中 Performance 面板中的圆箭头，来看一下页面加载过程中的性能表现：从上到下，依次为概述面板、详情面板。下我们先来观察一下概述面板，了解页面的基本表现：

我们看右上角的三个栏目：FPS、CPU 和 NET。

FPS：这是一个和动画性能密切相关的指标，它表示每一秒的帧数。图中绿色柱状越高表示帧率越高，体验就越流畅。若出现红色块，则代表长时间帧，很可能会出现卡顿。图中以绿色为主，偶尔出现红块，说明网页性能并不糟糕，但仍有可优化的空间。

CPU：表示CPU的使用情况，不同的颜色片段代表着消耗CPU资源的不同事件类型。这部分的图像和下文详情面板中的Summary内容有对应关系，我们可以结合这两者挖掘性能瓶颈。

NET：粗略的展示了各请求的耗时与前后顺序。这个指标一般来说帮助不大。

# 挖掘性能瓶颈

详情面板中的内容有很多。但一般来说，我们会主要去看 Main 栏目下的火焰图和 Summary 提供给我们的饼图——这两者和概述面板中的 CPU 一栏结合，可以帮我们迅速定位性能瓶颈（如下图）。

先看 CPU 图表和 Summary 饼图。CPU 图表中，我们可以根据颜色填充的饱满程度，确定 CPU 的忙闲，进而了解该页面的总的任务量。而 Summary 饼图则以一种直观的方式告诉了我们，哪个类型的任务最耗时（从本例来看是脚本执行过程）。这样我们在优化的时候，就可以抓到“主要矛盾”，进而有的放矢地开展后续的工作了。

再看 Main 提供给我们的火焰图。这个火焰图非常关键，它展示了整个运行时主进程所做的每一件事情（包括加载、脚本运行、渲染、布局、绘制等x 轴表示随时间的记录。每个长条就代表一个活动。更宽的条形意味着事件需要更长时间。y 轴表示调用堆栈，我们可以看到事件是相互堆叠的，上层的事件触发了下层的事件。

CPU 图标和 Summary 图都是按照“类型”给我们提供性能信息，而 Main 火焰图则将粒度细化到了每一个函数的调用。到底是从哪个过程开始出问题、是哪个函数拖了后腿、又是哪个事件触发了这个函数，这些具体的、细致的问题都将在 Main 火焰图中得到解答。

# 可视化监测：更加聪明的 LightHouse

LightHouse一个开源页面性能监测分析工具。新版的谷歌浏览器上已经集成了audits的面板用于可视化分析页面性能。

打开浏览器开发者工具，选择Audits面板，如下图

# 了解Audits面板: 你可以选择度量指标，选择运行网络、运行设备等。

# 运行分析

运行完后工具会给出各个度量的指标数据图，并给出优化改善建议。如下图

# Performance API

W3C 规范为我们提供了 Performance 相关的接口。它允许我们获取到用户访问一个页面的每个阶段的精确时间，从而对性能进行分析。我们可以将其理解为 Performance 面板的进一步细化与可编程化。

当下的前端世界里，数据可视化的概念已经被炒得非常热了，Performance 面板就是数据可视化的典范。那么为什么要把已经可视化的数据再掏出来处理一遍呢？这是因为，需要这些数据的人不止我们前端——很多情况下，后端也需要我们提供性能信息的上报。此外，Performance 提供的可视化结果并不一定能够满足我们实际的业务需求，只有拿到了真实的数据，我们才可以对它进行二次处理，去做一个更加深层次的可视化。...

# 关键时间节点

这些时间戳与页面整个加载流程中的关键时间节点有着一一对应的关系：

通过这些数据计算就可以得出页面关键指标数据，还可以用图标形象显示出来。

此外，通过访问 performance 的 memory 属性，我们还可以获取到内存占用相关的数据；通过对 performance 的其它属性方法的灵活运用，我们还可以把它耦合进业务里，实现更加多样化的性能监测需求——灵活，是可编程化方案最大的优点。

 {
 	 // 白屏时间
	 invisibvarime: timing.domLoading - timing.navigationStart,
	 // 首包时间
	 ttfb: timing.responseStart - timing.navigationStart,
	 // 首屏时间
	 renderPage: timing.domCompvare - timing.navigationStart,
	 // 整页加载时间
	 loadPageCompvare: timing.loadEventEnd - timing.navigationStart,
	 // 基础页时间=请求h5页面文档下载时间
	 pageRequest: timing.responseEnd - timing.fetchStart,
	 // 解析 DOM 树结构的时间
	 domReady: timing.domContentLoadedEventEnd - timing.responseEnd
 }