HTML5 性能指标分析：理解 First Contentful Paint (FCP) 的触发机制-H5教程-PHP中文网

fcp是用户首次看到有意义内容的时刻，即渲染树构建完成且首个非空文本、图片、svg、canvas或video帧完成绘制；它区别于fp，后者仅需绘制首个像素。

html5 性能指标分析：理解 first contentful paint (fcp) 的触发机制

FCP 不是页面加载完成的标志，而是用户第一次看到“有内容”的瞬间。它不看逻辑是否就绪，只认屏幕是否真出现了文本、图片、SVG 或非空白 canvas —— 这个时间点直接决定用户会不会觉得“卡住了”。

FCP 触发的硬性条件

浏览器必须同时满足两个前提才会记录 FCP：

渲染树已构建完成（DOM + CSSOM 合并完毕）
首个“有意义内容”元素已完成绘制（paint）到屏幕上

所谓“有意义内容”，明确指以下任一类型且已成功渲染：

非空文本节点（哪怕只有一个可见字符或非空格符号）
标签且 src 已加载完成（含 404 图片也算）
CSS background-image 已加载且 background-size 不为 0

注意：纯背景色、边框、空白 div、未加载的图片、display: none 的元素，都不算。

为什么 FCP 经常比 FP 晚，但有时又相等？

FP 是“画了第一个像素”，哪怕只是 body 的灰色背景；FCP 是“画了第一块内容”。两者时间差取决于内容是否紧随样式之后立即就绪：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

如果 HTML 里直接写了
欢迎
，CSS 又内联且轻量 → FP 和 FCP 几乎同步
如果关键 CSS 外链阻塞渲染，或文字依赖异步 JS 注入 → FCP 明显滞后于 FP
若页面初始只有带背景色的容器，文字靠 AJAX 加载 → FP 很早，FCP 要等到请求返回后才触发

如何准确捕获 FCP 数据

不能靠后期调用 performance.getEntriesByType('paint')——缓冲区可能已被清空。可靠方式是用 PerformanceObserver，在

最顶部尽早注册：

<script>
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.name === 'first-contentful-paint') {
        console.log('FCP:', entry.startTime, 'ms');
      }
    }
  }).observe({ entryTypes: ['paint'] });
</script>

这个脚本必须放在

开头，越早越好。延迟哪怕几百毫秒，就可能错过 FCP 条目。