白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
发布时间：2023-10-11 15:30
怎么获取到这两个数据
通过web-vitals-extension插件
web-vitals-extension插件
效果
![\"白屏时间(FP),](\"https://img.it610.com/image/info8/48647073e2e241c79962315bea267828.jpg\")
通过chrome开发者工具Performance选项卡
![\"白屏时间(FP),](\"https://img.it610.com/image/info8/97280431e46c487e9d2720191fc7f203.jpg\")
通过chrome开发者工具Lighthouse选项卡
![\"白屏时间(FP),](\"https://img.it610.com/image/info8/168faec097cd47ee8a91b12a4aac4a37.jpg\")
通过JS计算
web-vitals
FP & FCP & LCP
FP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间
FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优化的首屏时间
LCP: (Largest Contentful Paint / 最大内容绘制) 用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。例子如下（绿色区块就表示最大内容，可以看到他是随着页面渲染而变化的）
![\"白屏时间(FP),](\"https://img.it610.com/image/info8/ffd7f46ba6e743b2ad9cf4e989065e45.jpg\")
![\"白屏时间(FP),](\"https://img.it610.com/image/info8/b5dedba006a64226b14f64a25c450bce.jpg\")
上图是官方推荐的时间区间，在 2.5 秒内表示体验优秀。
参考文章
首屏时间(FCP) VS 白屏时间(FP)
还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下
新一代性能指标 Web Vitals