首页 > 试题广场 >

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

[问答题]
前端性能指标（FCP/LCP/CLS/TTI/TBT），如何采集、解读与优化？
查看答案及解析
添加回答
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)
秋水夏树头像 秋水夏树
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)
提交观点

问题信息

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

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

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