二、实验室分析
成熟的性能优化工具不仅能给出网络、渲染等信息，还能给出各种经过实践的优化建议，让我们的优化工作事半功倍。
1）Chrome DevTools
Chrome 的 DevTools 是一款内置的开发者工具，可用于调试页面、查看网络请求、打印日志等常规功能。
还提供了 Performance 面板，专门用于性能分析，可查看性能参数的时间点、各阶段的耗时、内存变化等。
限于篇幅原因，本文只会重点讲解 Network 和 Performance 两块面板。
在 Network 中会呈现页面中所有的网络请求（可指定类型），并且会给出状态码、协议、请求瀑布图等信息。
蓝线是 DOMContentLoaded（DCL） 事件触发的时间点，红线是 Load 事件触发的时间点。
No throttling 用于模拟网速，模拟 4G、3G 或 Offline 离线等网络，在实际开发中很常用。
Performance 需要点击录制按钮后，才会开始分析，如下图所示，内容还是比较多的。
在 Frames 中可以查看各个阶段的页面截图，Timings 中可以查看到 FP、LCP 等性能参数的时间点。
Main 指的是当前页面，火焰图中描绘了 JavaScript 的性能。
例如 Parse HTML、Evaluate Script（加载 JavaScript）、Compile Script（执行 JavaScript）等。
在 Summary 的环形图中，可以看到火焰图中各种颜色对应的操作，例如：
- 蓝色 Loading 表示加载中，对 HTML、CSS 等资源进行解析工作。
- 黄色 Scripting 表示执行脚本，例如执行函数、触发事件等。
- 紫色 Rendering 表示渲染，包括 HTML 和 CSS 的变化，例如重绘或重排。
- 绿色 Painting 表示绘制，将合成的图层绘制到屏幕中。
Performance 中的 Network 更注重时序和优先级，可在此查看资源加载是否符合预期。
内存视图是一个用不同颜色标注的折线图（如下所示），包括 JavaScript 堆、DOM 节点数量、事件监听器数量等信息。
此处只是蜻蜓点水般介绍了下 Performance 的功能，详细内容还可以去参考官方英语文档。
2）WebPageTest
WebPageTest 是一款线上性能分析工具，通过布置一些特定的场景进行测试，例如不同的网速、浏览器、位置等。
测试完成后，会给出一份性能报告，包括优化等级、性能参数、请求瀑布图、网页幻灯片快照、视频等。
WebPageTest 的原理是将配置参数发送到后台，然后通过浏览器相关的代理程序，启动 Chrome、Firefox 或 IE。
执行完毕后将数据回传给后台，后台再将数据保存起来，最后通过各种形式（统计图、表格等），将分析过的数据呈现给用户。
如果是新手，官方还提供了一份快速入门指南作为参考。多年前曾对 WebPageTest 做过分析，有些内容仍然具有参考价值。
在选择完浏览器和地区后（如下图所示），点击 Start Test 就开始测试了。
性能报告的第一部分是优化建议和各种指标，包括 LCP、FCP、CLS 等，如下所示。
Speed Index 表示速度指数，衡量页面内容填充的速度（越低越好），适合页面优化前后的对比。
在 Requests Details 中，呈现了请求信息，视图包括资源瀑布图、连接时序图、请求耗时表、各条请求的头信息。
在 WebPageTest 的幻灯片视图（Filmstrip View）中，在滑动滚动条时，下面会有根红线对应这个时刻的资源载入情况。
3）Lighthouse
Lighthouse 会对测试的网站进行打分，包括性能、可访问性、最佳实践、SEO 和 PWA 五个部分，并且会提供这五个部分的优化建议。
测量的指标有 6 个，FCP、SI、LCP、CLS、TTI 和 TBT，如下所示。
Lighthouse 的使用方法有多种，第一种是在 Chrome 的 DevTools 中选择 Lighthouse 面板，不过要使用的话，得安装代理。
另一种使用方法是将 Lighthouse 下载到本地，安装后使用命令来执行测试，如下所示。
lighthouse https://www.pwstrick.com --output html --output-path ./report/report.html
Lighthouse 给出一些切实可行的优化建议，如下图所示，在每条建议中，还会给出 Learn More 的链接，了解更多优化细节。
虽然是英文的，但用翻译软件或自己阅读都比较容易理解其含义。
例如修改图像格式、压缩图像、预加载影响 LCP 的图像、延迟加载屏幕外的图像、减少未使用的脚本、剔除阻塞渲染的资源等。
总结
数据分析和实验室分析是性能优化的两块重要组成部分。
数据分析在采集到性能信息后，会先进行日志存储，然后按指定的百分位数进行数据整理，最后还会定期进行删除。
在管理界面提供了几种视图来更好的分析性能瓶颈，包括资源瀑布图、堆叠柱状图和阶段时序图。
在实验室分析中，主要介绍了 3 款性能测试工具，包括 DevTools Performance、WebPageTest 和 Lighthouse。
3 款软件都非常优秀，可以帮助开发人员更快、更准的进行优化工作。
