前端性能分析工具利器

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

时间：常见耗时，如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等
空间：资源占用，包括 CPU 占用、内存占用、本地缓存占用等
那么，下面来看看有哪些常见的工具可以借来用用。由于我们的网页基本上跑在浏览器中，所以基本上大多数的工具都来源于浏览器自身提供，首选工具自然是 Chrome DevTools。本文我们也主要围绕 Chrome DevTools 来进行说明。

Lighthouse
Lighthouse 的前身是 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）：