前端性能分析工具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