华为二面稳了！面试官：请详细说明一下前端性能指标（FCP/LCP/CLS/TTI/TBT），如何采集、解读与优化？

定义

1. FCP 首次内容绘制 First Contentful Paint

页面首次渲染出任何文本、图片、SVG、非空白Canvas的时间点。

衡量首屏内容开始呈现速度，用户第一次看到页面有内容的时刻，白屏结束时间。

2. LCP 最大内容绘制 Largest Contentful Paint

视口内最大块文本或图片元素完成渲染的时间。

核心首屏加载体验核心指标，Google 核心网页指标核心，代表页面主要内容加载完成时间。

3. CLS 累积布局偏移 Cumulative Layout Shift

页面生命周期内，元素非用户主动操作下发生的意外布局偏移量。

衡量页面抖动、元素乱跑、点击错位的体验，数值越低越稳定。

4. TTI 可交互时间 Time to Interactive

页面从加载开始，到主线程长时间无阻塞、可稳定响应用户点击/输入的时间点。

区分「页面看起来加载完」和「真正能流畅交互」，解决点了没反应、卡顿延迟问题。

5. TBT 总阻塞时间 Total Blocking Time

FCP 到 TTI 之间，所有长任务（主线程阻塞超过50ms）的阻塞时间总和。

直接反映主线程繁忙程度、JS执行阻塞程度，是优化交互卡顿的关键指标。

指标分级标准（行业通用评分）

以 Google 标准，分为良好/需改进/差三档：

指标	良好	需改进	差
LCP	≤2.5s	2.5s~4s	>4s
FCP	≤1.8s	1.8s~3s	>3s
CLS	≤0.1	0.1~0.25	>0.25
TBT	≤200ms	200~600ms	>600ms
TTI	≤3.8s	3.8s~7.3s	>7.3s

目前 LCP、CLS、INP 是现在 Google 三大核心网页指标，TTI/TBT 更多用于内部性能分析、主线程优化。

性能指标采集方案

1. 浏览器原生 API（最标准、工程常用）

基于 Performance API + Web Vitals 官方库

使用 web-vitals 官方 npm 库，一行代码自动采集 FCP/LCP/CLS/TBT/TTI。

其底层依赖 PerformanceObserver 监听浏览器渲染、布局、长任务事件。

主要优势在于标准无偏差、兼容主流现代浏览器、可埋点上报后端。

js 复制代码

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

// 上报函数
function sendPerfData(metric) {
  // 埋点上报到监控平台
  console.log(metric.name, metric.value, metric.delta);
}

getFCP(sendPerfData);
getLCP(sendPerfData);
getCLS(sendPerfData);
getTBT(sendPerfData);
getTTI(sendPerfData);

2. 本地工具手动测试

使用 Chrome DevTools → Performance 面板，录制页面加载，手动看 FCP/LCP/长任务。

也可以使用 Chrome DevTools → Lighthouse，一键生成性能报告，直接给出指标分数和优化建议。

但是这种方案知识和本地开发自测。

3. 线上真实用户监控 RUM（企业级落地方案）

在项目中接入前端监控SDK（阿里ARMS/百度青鸟/Sentry等）。

使用全网真实用户设备、网络、机型采集性能指标，做百分位统计（P50/P90/P95）。

绝对真实，就是代价相对较大。

优化方案

FCP 首次内容绘制

FCP 慢 = 白屏时间长。

原因基本大多是 HTML 返回慢、CSS 阻塞渲染、首屏JS过大阻塞解析。

所以其主要优化思路也是这些：

服务端优化：开启 Gzip/Brotli、静态资源 CDN、HTTP2。
精简HTML，减少首屏HTML冗余，服务端直出关键内容。
关键CSS内联、非关键CSS异步加载、避免超大样式表。
JS 加 defer/async，不阻塞 HTML 解析和渲染。

LCP 最大内容绘制（重中之重）

LCP 是首屏核心体验，LCP 偏高大多问题是 首屏大图加载慢、关键资源晚发现、主线程被JS阻塞。

所以关键点在于图片优化（后续专门开一篇谢谢）、资源部分预加载等。

CLS 累积布局偏移

CLS 高 = 页面元素不停跳动、弹窗突然弹出、图片无宽高导致加载后撑开布局、异步接口返回后DOM插队。

所以几乎所有的页面元素都强制设置固定宽高比例占位，尽量避免事后插入元素。

避免动态修改DOM的宽高、位置、margin、padding等。

TBT 总阻塞时间

TBT 大 = 主线程被长任务卡死，JS 执行时间过长、大量同步循环、大数据解析、第三方脚本阻塞。

这个部分主要是拆解任务逻辑，减少首屏Js的体积，部分数据后置化处理。

TTI 可交互时间

TTI 晚 = 页面看着加载完，但按钮点不动、输入框卡顿，本质是 TBT 高、主线程一直被占用。

它的优化和 TBT 优化基本重合。

总结

FCP 看白屏、LCP 看主内容、CLS 看稳定性、TBT/TTI 看交互流畅度，LCP+CLS 是用户感知最强的核心指标。

重点是优化思路分层操作，网络层（CDN/压缩/缓存）、资源层（图片/字体/JS拆分）、渲染层（CSS阻塞、布局抖动）、主线程层（长任务、JS阻塞）、框架层（懒加载、按需渲染）。