"Paint Timing API：FCP 的采集与优化路径"

概述FCP（First Contentful Paint）表示首次有内容渲染到屏幕的时间。浏览器通过 `PerformancePaintTiming` 暴露 `first-contentful-paint` 事件，可用于监测与优化。示例const obs = new PerformanceObserver(list => { const entries = list.getEntriesByName('first-contentful-paint') const fcp = entries[0]?.startTime }) obs.observe({ type: 'paint', buffered: true }) 工程建议关键路径优化：内联关键 CSS、减少阻塞脚本、使用 `preload`/`modulepreload` 与 `fetchpriority` 提升关键资源。字体与图像：使用 `font-display` 与响应式图片（`picture/srcset`、`image-set`）；避免大体积首屏图。网络与服务器：Early Hints、HTTP/3、缓存与 CDN；合理启用压缩与优先级。参考与验证MDN PerformancePaintTiming 文档：https://developer.mozilla.org/docs/Web/API/PerformancePaintTimingweb.dev FCP 指南：https://web.dev/articles/fcpChrome 性能相关文档：https://developer.chrome.com/docs/lighthouse/performance/fcp/