前端性能测试

1、网页加载的过程

2、常见指标

(1)⽩屏时间（FirstPaint，FP）：从屏幕空⽩到第⼀个画⾯出来的时间
(2)⾸次内容渲染时间（FirstContentful Paint，FCP）：渲染出⾸个⽂本或图⽚的时间
(3)最⼤内容绘制时间（Largest Contentful Paint，LCP） ：渲染出最⼤⽂本或图⽚的时间 
(4)可交互时间（Time To Interactive，TTI）：⽹⻚需要多⻓时间才能提供完整交互功能

3、业界指标

影响性能的因素：
图片大小、文件是否压缩、页面请求数、是否使用CDN等，这就需要根据影响因素制定出自己产品的新指标

4、指标解读和参考

5、测试工具

Lighthouse是⾕歌开源的⼀款 Web 前端性能⾃动化测试分析⼯具，主要⽤于改进⽹络应⽤的质量，我们只需要 为其提供⼀个被测⽹址，它就能⾃动进⾏⼀些测试，最终会⽣成⼀个报告，包含五块内容：性能、无障碍、最佳做法、SEO、PWA。

Lighthouse目前已经集成在新版本 Chrome DevTools 中，也可以将其作为一个 Chrome 扩展程序运行，或从命令行运行，下面以Chrome开发者工具为例，使用方法如下所示：
(1)⽤ Chrome/Edge 打开被测⽹址，按 F12 ，开启开发者⼯具，就能看到 Lighthouse 了 ,这里以Edge为例

(2)然后点击 分析页面负载【Analyze page load】，报告如下：

报告中除了上图中体现的评分和指标外，还包括了一些提高网页加载速度的优化建议和应用性能的诊断结果，这就需要前端同学针对优化建议和诊断结果进行评估优化改进。