FCP/FMP/TTI 这些指标到底怎么用 Performance API 获取？

萌新.昕彤提问于 2026-03-18 03:50:20 阅读 7

前端

我在做前端性能监控，想用 Performance API 拿到 FCP、FMP 和 TTI 的具体时间，但文档看得有点懵。

试过 performance.getEntriesByType('paint') 能拿到 FCP，但 FMP 和 TTI 好像没直接的 entry 类型？网上有人说要用第三方库，但我想先搞清楚原生能不能实现。

比如这段代码能拿到 FCP：

const fcpEntry = performance.getEntriesByType('paint').find(entry => entry.name === 'first-contentful-paint');
console.log(fcpEntry ? fcpEntry.startTime : 'FCP not supported');

但 FMP 和 TTI 该怎么拿？浏览器原生支持吗？还是必须用 web-vitals 这类库？

我来解答赞 11 收藏

反馈

1 条解答

一可馨 Lv1

FCP 可以直接用 paint 获取，FMP 和 TTI 浏览器原生都不提供，必须自己算或者用 web-vitals 这类库。

省事的话直接用 Google 的 web-vitals：

import {getFCP, getFMP, getTTI} from 'web-vitals';



getFCP(console.log);

getFMP(console.log);  

getTTI(console.log);

或者用 load callback 方式：

import {onCLS, onFCP, onFID, onLCP, onTTFB} from 'web-vitals';



addEventListener('DOMContentLoaded', () => {

  onFCP(console.log);

  onTTFB(console.log);

});

FMP 官方已经deprecated了，现在更推荐用 LCP (Largest Contentful Paint) 代替，web-vitals 同样支持。

2026-03-18 14:06