首页 > 试题广场 >

前端性能指标（FCPLCPCLSTTITBT），如何

[问答题]
前端性能指标（FCP/LCP/CLS/TTI/TBT），如何采集、解读与优化？
添加回答
秋水夏树头像 秋水夏树
FCP：首个元素出现在屏幕。减少服务器响应时间，减少 JS / CSS 阻塞 LCP：最大元素出现在屏幕。预加载，SSR。 TTI：从加载到可交互。代码拆分，懒加载。 如何获取：PerformanceObserverAPI、Lighthouse
发表于 2025-09-15 20:27:14 回复(0)
牛客979991220号头像 牛客979991220号
FCP首个内容绘制时间 减少TTFB（服务器响应时间） LCP最大内容绘制时间 预加载、SSR CLS 累计布局偏移 为视频和图片设置固定宽高 TTI 可交互时间 代码拆分、懒加载 TBT总阻塞时间 减少主线程任务
发表于 2025-11-04 08:50:15 回复(0)
DRZv头像 DRZv
1. 指标定义 - FCP：首次出现文本/图片的时间 ​ - LCP：视口最大内容加载完成时间（≤2.5s） ​ - CLS：元素意外偏移总和（≤0.1） ​ - TTI：页面稳定响应用户操作的时间 ​ - TBT：FCP-TTI间主线程阻塞总时长 2. 采集 - 原生：PerformanceObserver 监听对应事件 ​ - 工具：Lighthouse、Chrome DevTools 性能面板 ​ - 监控：Sentry、阿里云前端监控（RUM） 3. 解读与优化 - FCP：内联核心CSS、压缩首屏资源 ​ - LCP：图片优化（压缩/懒加载/WebP）、优先加载首屏内容 ​ - CLS：预设媒体宽高、动态内容预留空间 ​ - TTI/TBT：拆分长任务、懒加载非首屏JS、Web Worker处理复杂计算
发表于 2025-11-03 06:49:00 回复(0)
糖心201903201710795头像 糖心201903201710795
fcp：首次内容渲染。优化：减少服务响应时间、消除阻塞的js或者css lcp：最大内容渲染，比如可视区域图片和内容的加载。优化：压缩图片或者使用服务器渲染 cls：累计内容偏移。为图片或者视频设置准确的高度 tti：可交互时间。代码分解、懒加载 tbt：总阻塞时间。减少主流程任务
发表于 2026-03-31 13:18:17 回复(0)
漂流的命运小偷头像 漂流的命运小偷
1.FCP（first contentful paint)初次内容绘制 2.LCP(largest contentful paint)最大内容绘制(通常为图片，文本） 3.CLS：(cumulative layout shift)累计布局偏移（为用户视觉稳定性的重要指标） 4.TTI：(time to interactive)可交互时间 5.TBT:(total blocking time)总阻塞时间
发表于 2026-03-24 10:12:00 回复(0)
想要offer的干饭人很年轻头像 想要offer的干饭人很年轻
fcp:第一个内容绘制完成的时间。减少服务器响应时间，消除阻塞的js/css。 lcp:视口中最大内容绘制完成的时间。优化并预加载LCP元素，比如压缩图片；使用服务端渲染。 cls:累积布局偏移。为图片，视频设置固定宽高。 tti:从加载到可交互时间。代码拆分、延迟加载非关键js、拆封长任务。 tbt:fcp到tti间主线程总的阻塞时间。减少主线程工作量，使用web worker，优化或异步加载第三方脚本。 可以通过performanceobserverAPI,LightHouse进行采集。
发表于 2026-03-16 22:01:01 回复(0)
秋木苏76头像 秋木苏76
FCP：内容首次出现的时间。 LCP：最大内容出现的时间。 CLS：元素布局偏移 TTI：移动元素或者交互的响应时间 采集：浏览器的星能面板和网络面板，或者使用webpagetest这个网址，输入url可以自动分析，Lighthouse有插件，pagespeedAPI可以嵌入代码中进行检测。 在打包之后可以使用rollup-plugin-visualizer插件进行分包大小的监控
发表于 2026-03-13 15:54:43 回复(0)
_robin_头像 _robin_
FCP LCP FID CLS TTI TBT
发表于 2026-03-08 14:33:52 回复(0)
已转码的钝角很开心头像 已转码的钝角很开心
FCP：首个内容绘制时间->减少服务器响应时间，减少JS/css阻塞 LCP：最大内容元素渲染完成时间->预加载LCP，SSR CLS：是否发生意外布局偏移->预留空间 TTI：从加载到可交互的时间->代码拆分和懒加载 TBT：总阻塞时间->减少主线程任务
发表于 2026-02-22 13:49:14 回复(0)
Crish07头像 Crish07
FCP：页面首次渲染出内容的时间。减少CSS/JS阻塞 LCP：最大内容元素渲染完成时间。SSR、预加载 CLS：是否发生意外布局偏移。预留空间 TTI：从加载到可交互的时间。减少主线程工作量，拆包、懒加载 TBT：所有长任务阻塞主线程的总时间。代码分割、Web Worker 开发阶段：可以使用 Lighthouse 做审计，也可以在浏览器开发者的 Performance 面板中查看 真实用户监控：使用官方 web-vitals 包采集上报
发表于 2026-02-12 11:23:44 回复(0)
WangYibo头像 WangYibo
FCP：首个元素出现在屏幕。减少服务器响应时间，减少 JS / CSS 阻塞 LCP：最大元素出现在屏幕。预加载，SSR。 TTI：从加载到可交互。代码拆分，懒加载。 如何获取：PerformanceObserverAPI、Lighthouse
发表于 2026-02-02 14:44:59 回复(0)
牛客41767380号头像 牛客41767380号
FCP：第一个出现在屏幕的元素所花的时间， LCP：内存最大的元素出现在屏幕所花的时间，预加载 CLS：视觉稳定性，给图片设置固定宽高 TTI：页面加载到完全可交互的时间，代码拆分 Performance/LightHouse
发表于 2026-01-10 15:07:10 回复(0)
提交观点

问题信息

来自：前端开发-牛客面经八股
难度：
12条回答 789浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号