令程序员头疼的性能问题，这一款性能分析工具帮你实时监控 _性能分析

作者：basinwang，腾讯 PCG 前端开发工程师

大型项目容易遇到性能问题,一般来说，当我们遇到性能瓶颈的时候，才会开始去进行相应的分析。分析的方向除了业务本身的特点相关之外，常见的还可以借助一些工具来发现问题。本文主要介绍前端性能分析可以怎么走~

前端性能分析工具（Chrome DevTools）一般来说，前端的性能分析通常可以从时间和空间两个角度来进行：

时间：常见耗时，如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等
空间：资源占用，包括 CPU 占用、内存占用、本地缓存占用等

那么，下面来看看有哪些常见的工具可以借来用用。由于我们的网页基本上跑在浏览器中，所以基本上大多数的工具都来源于浏览器自身提供，首选工具自然是 Chrome DevTools 。本文我们也主要围绕 Chrome DevTools 来进行说明。
LighthouseLighthouse 的前身是 Chrome DevTools 面板中的 Audits 。在 Chrome 60 之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别，从 Chrome 60 版本开始，Audits 面板已经被 Lighthouse 的集成版取代。而在最新版本的 Chrome 中，则需要单独安装 Lighthouse 拓展程序来使用，也可以通过脚本来使用。
架构

文章插图

【令程序员头疼的性能问题，这一款性能分析工具帮你实时监控】Lighthouse 架构
下面是 Lighthouse 的组成部分：

驱动（Driver）：和 Chrome Debugging Protocol 进行交互的接口
收集器（Gatherers）：使用驱动程序收集页面的信息，收集器的输出结果被称为 Artifact
审查器（Audits）：将 Artifact 作为输入，审查器会对其运行测试，然后分配通过/失败/得分的结果
报告（Report）：将审查的结果分组到面向用户的报告中（如最佳实践），对该部分应用加权和总体然后得出评分

主要功能Lighthouse 会在一系列的测试下运行网页，比如不同尺寸的设备和不同的网络速度。它还会检查页面对辅助功能指南的一致性，例如颜色对比度和 ARIA 最佳实践。
在比较短的时间内，Lighthouse 可以给出这样一份报告（可将报告生成为 JSON 或 html）：

文章插图

Lighthouse 架构
这份报告从 5 个方面来分析页面：性能、辅助功能、最佳实践、搜索引擎优化和 PWA 。像性能方面，会给出一些常见的耗时统计。除此以外，还会给到一些详细的优化方向。
如果你希望短时间内对你的网站进行较全面的评估，可以使用 Lighthouse 来跑一下分数，确定大致的优化方向。
Performance 面板Performance 面板同样有个前身，叫 Timeline 。该面板用于记录和分析运行时性能，运行时性能是页面运行时（而不是加载）的性能。
使用步骤Performance 面板功能特别多，具体的分析也可以单独讲一篇了。这里我们简单说一下使用的步骤：

在隐身模式下打开 Chrome 。隐身模式可确保 Chrome 以干净状态运行，例如浏览器的扩展可能会在性能评估中产生影响。
在 DevTools 中，单击“Performance”选项卡，并进行一些基础配置（更多参考官方说明）。
按照提示单击记录，开始记录。进行完相应的操作之后，点击停止。
当页面运行时，DevTools 捕获性能指标。停止记录后，DevTools 处理数据，然后在 Performance 面板上显示结果。

主要功能关于 Performance 怎么使用的文章特别多，大家网上随便搜一下就能搜到。一般来说，主要使用以下功能：

文章插图

查看 FPS 图表：当在 FPS 上方看到红色条形时，表示帧速率下降得太低，以至于可能损害用户体验。通常，绿色条越高，FPS 越高
查看 CPU 图表：CPU 图表在 FPS 图表下方。CPU 图表的颜色对应于性能板的底部的 Summary 选项卡
查看火焰图：火焰图直观地表示出了内部的 CPU 分析，横轴是时间，纵轴是调用指针，调用栈最顶端的函数在最下方。启用 JS 分析器后，火焰图会显示调用的每个 JAVAScript 函数，可用于分析具体函数
查看 Buttom-up：此视图可以看到某些函数对性能影响最大，并能够检查这些函数的调用路径

具体要怎么定位某些性能瓶颈，可以参考官方文档系列文章，这里就不详细介绍啦。