前端首屏性能指标（FP/FCP/LCP/TTI）测量全攻略

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

在前端开发中，首屏加载性能直接决定了用户的第一体验，而FP、FCP、LCP、TTI作为衡量首屏性能的核心指标，是面试和项目优化中绕不开的话题。很多开发者只知道指标的定义，却不清楚如何实际测量，本文将从开发调试、代码埋点、线上监控三个维度，详细讲解这些指标的获取方式，附实操代码和面试答题技巧。

一、先对齐：四大核心指标定义

在学习测量方法前，先明确每个指标的核心含义，避免面试时概念混淆：

二、开发环境：本地调试测量（快速验证优化效果）

开发阶段主要通过Chrome开发者工具和Lighthouse，直观查看指标数值，验证优化前后的差异。

1. Chrome DevTools（最常用，可视化强）

这是前端调试的必备工具，通过Performance面板可精准捕捉所有指标：

2. Lighthouse（一键生成性能报告）

Lighthouse是Google推出的自动化性能审计工具，不仅能给出指标数值，还会附带优化建议，面试时可作为实操案例提及：

三、代码埋点：线上真实场景测量（RUM监控）

开发环境的指标仅作参考，线上真实用户的环境才是性能优化的核心目标。通过原生Performance API或Google官方库，可实现指标埋点上报。

1. 原生Performance API（精准可控，适合自研监控）

浏览器提供了PerformanceObserver和performance.getEntriesByName() API，可直接获取指标时间戳，无需依赖第三方库。

（1）FP/FCP 测量

// 方式1：获取已完成的性能条目（页面加载完成后调用）
const fpEntry = performance.getEntriesByName('first-paint')[0];
const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0];
if (fpEntry) console.log('FP耗时:', fpEntry.startTime.toFixed(2) + 'ms');
if (fcpEntry) console.log('FCP耗时:', fcpEntry.startTime.toFixed(2) + 'ms');

// 方式2：监听性能事件（推荐，避免遗漏）
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
entries.forEach(entry => {
switch (entry.name) {
case 'first-paint':
console.log('FP监听:', entry.startTime.toFixed(2) + 'ms');
break;
case 'first-contentful-paint':
console.log('FCP监听:', entry.startTime.toFixed(2) + 'ms');
break;
}
});
}).observe({ type: 'paint', buffered: true });

（2）LCP 测量（官方推荐，需处理动态更新）

LCP可能因页面元素加载动态变化，需监听最后一次触发的事件：

let lcpTime = 0;
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
// 取最后一次记录，即为最终最大元素渲染时间
const lastEntry = entries[entries.length – 1];
lcpTime = lastEntry.startTime;
console.log('LCP监听:', lcpTime.toFixed(2) + 'ms');
}).observe({ type: 'largest-contentful-paint', buffered: true });

// 页面加载完成后上报指标
window.addEventListener('load', () => {
// 此处可通过接口上报lcpTime
console.log('最终LCP上报:', lcpTime.toFixed(2) + 'ms');
});

（3）TTI 测量（复杂度较高，谨慎手动实现）

TTI的计算规则为：FCP完成后，5秒内无长任务（>50ms）且所有资源加载完成。手动实现易出错，推荐使用第三方库。

2. web-vitals 库（Google官方，零门槛首选）

web-vitals是Google推出的轻量级库，专门用于采集Core Web Vitals指标，API简洁、兼容性好，是生产环境的最优选择。

安装与使用

npm install web-vitals

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

// 采集FCP指标
getFCP((metric) => {
console.log('FCP:', metric.value);
// 上报至监控系统
reportToMonitor(metric);
});

// 采集LCP指标
getLCP((metric) => {
console.log('LCP:', metric.value);
reportToMonitor(metric);
});

// 采集TTI指标
getTTI((metric) => {
console.log('TTI:', metric.value);
reportToMonitor(metric);
});

// 上报工具函数
function reportToMonitor(metric) {
// 用navigator.sendBeacon上报，不阻塞页面加载
navigator.sendBeacon('/api/frontend-performance', JSON.stringify({
name: metric.name,
value: metric.value.toFixed(2),
time: Date.now()
}));
}

注意：FP并非Core Web Vitals标准指标，web-vitals 3.x已移除该API，如需采集仍需用原生Performance API。

四、线上监控：规模化数据分析（企业级方案）

单个用户的指标参考价值有限，需通过规模化监控分析整体性能，常见方案如下：

1. 第三方平台（快速接入，无需自研）

适合中小团队，直接使用成熟的前端监控工具：

• 国内：百度统计、阿里云ARMS、腾讯云前端监控、Sentry（支持性能监控）；
• 海外：Google Analytics、New Relic、Datadog；
  这些平台可自动采集FP/FCP/LCP/TTI等指标，生成多维度报表（按设备、网络、地域分析），无需开发埋点代码。

2. 自建监控系统（中大型项目定制化）

适合对数据安全、定制化需求高的企业，核心流程：

五、面试答题技巧（结合实操落地）

面试时，除了讲解测量方法，可结合实际项目案例，让回答更具说服力。参考以下答题模板：

我在项目中主要通过「开发调试+线上埋点」两种方式测量首屏性能指标：

六、避坑指南（面试加分项）

总结

首屏性能指标的测量是前端优化的基础，从开发调试的可视化工具，到线上埋点的精准采集，再到规模化监控的数据分析，形成了完整的测量体系。掌握这些方法，不仅能应对面试，更能在实际项目中精准定位性能瓶颈，提升用户体验。