paint timing api 是浏览器原生性能接口，用于精确获取首次绘制（fp）和首次内容绘制（fcp）时间戳；fp指首个非默认背景像素渲染时间，fcp指首个文本、图片等内容渲染完成时间，后者更真实反映用户可见首屏体验。
PaintTiming API 是 HTML5 提供的性能监控接口，能直接获取页面首次绘制（first-paint）和首次内容绘制（first-contentful-paint, FCP）的时间戳，是衡量白屏时间最贴近用户感知的指标之一。它不依赖模拟或日志推测，而是由浏览器内核真实上报，特别适合在不同网络条件下验证白屏优化效果。
确认浏览器支持并启用 PaintTiming 数据采集
PaintTiming 在 Chrome 60+、Edge 79+、Firefox 115+（需开启 dom.performance.enable_user_timing）中可用。使用前需检查 performance.getEntriesByType('paint') 是否返回有效数组：
- 若为空，可能是浏览器不支持、页面未触发绘制，或脚本过早执行（如放在
中但 DOM 尚未进入绘制流程） - 推荐将采集逻辑放在
window.addEventListener('load', ...)或document.addEventListener('DOMContentLoaded', ...)之后，确保绘制已发生 - 注意：该 API 不受同源策略限制，可在跨域 iframe 内使用（只要目标页面启用）
区分 first-paint 和 first-contentful-paint 的业务含义
白屏时间应以 first-contentful-paint 为准，而非 first-paint：
-
first-paint 可能仅包含背景色、空白 canvas 或 CSS 生成的内容（如
::before { content: "" }），用户实际“看不见内容” - first-contentful-paint 指首个文本、图片、非空白 canvas、SVG 或带内容的自定义元素渲染完成的时间，更真实反映“页面开始有东西可看”
- 可通过
performance.getEntriesByType('paint').find(e => e.name === 'first-contentful-paint')?.startTime精确提取
在不同网络条件下稳定采集并对比数据
单纯跑一次无法反映真实差异，需结合网络模拟与批量采样：
- 用 Chrome DevTools 的 Network Throttling（如 “Slow 3G”、“Fast 3G”）或 WebPageTest 设置固定带宽/延迟，避免 Wi-Fi 波动干扰
- 对同一页面重复加载 5–10 次，取 FCP 的中位数（非平均值），排除偶发 DNS 缓存、TCP 快启等噪声
- 配合
navigation.type === 'navigate'过滤非首次访问（如后退/前进缓存），确保测量的是冷启动白屏 - 若服务端支持，可在请求头中注入
X-Network-Condition标识，后端记录对应 FCP，便于全链路归因
结合其他指标交叉验证白屏体验
FCP 是必要但不充分指标。例如：FCP 很快但文字不可读（无字体加载）、图片占位但模糊、关键按钮不可点，用户仍觉“卡”：
- 搭配
Largest Contentful Paint (LCP)看首屏主要内容是否就绪 - 用
PerformanceObserver监听layout-shift，确认 FCP 后是否发生大幅重排导致视觉跳变 - 检查
resource timing中关键 CSS/JS 的fetchStart → responseEnd，判断白屏长是否源于资源阻塞而非渲染慢
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
