Total Blocking Time是什么意思

Total Blocking Time (TBT) 是衡量网页交互性能的关键指标，表示主线程被“长任务”（Long Tasks）阻塞的总时间。它直接反映页面从开始加载到完全可交互（如点击、滚动）之间的“卡顿”程度，是用户感知页面流畅性的重要指标。

为什么 TBT 重要？
用户体验：TBT 越长，用户点击按钮或滚动页面时的延迟越明显，可能导致流失。
SEO影响：TBT是Google核心网页指标（Core Web Vitals）的实验室指标（Lab Metric），间接影响搜索排名。
FID关联：TBT与真实用户指标FID（First Input Delay） 强相关，优化TBT可降低用户的实际操作延迟。
典型场景

• 用户访问一个电商网站：
  
  
  • 2秒：页面内容渲染完成（LCP达标）。
  • 主线程被阻塞 300ms：因JavaScript处理商品数据、广告加载等长任务。
  • 用户在 2~5 秒内点击“加入购物车”，但页面无响应（TBT过高导致FID差）。
    
    

TBT 如何计算？

• 长任务定义：任何持续超过 50ms 的连续主线程任务（如JavaScript执行、样式计算）。
• 阻塞时间：长任务中超过 50ms 的部分（例如、一个 120ms的任务，其阻塞时间为120ms - 50ms = 70ms）。
• TBT 值：统计页面加载过程中，所有长任务的阻塞时间总和。
  示例：若存在3个长任务（70ms、80ms、60ms），则 TBT = 70 + 80 + 60 = 210ms。
  
  

优化 TBT 的常见方法

拆分长任务：

• 将大型JavaScript任务拆分为多个小于50ms的小任务（如：使用 setTimeout或requestIdleCallback分段执行）。
• 避免在单一事件循环中处理大量数据（如：循环渲染长列表时分批处理）。
  
  

优化JavaScript执行效率：

• 移除未使用的代码（Tree Shaking），压缩混淆脚本。
• 避免强制同步布局（如：频繁操作 DOM 时缓存布局信息）。
  
  

延迟非关键脚本：

• 对非首屏必需的脚本（如：分析工具、广告）使用async或defer延迟加载。
• 按需加载第三方库（如：仅在用户交互时加载视频播放器）。
  
  

使用 Web Workers：

• 将耗时的计算任务（如：数据解析、图像处理）移至Web Workers，避免阻塞主线程。
  
  

优化渲染性能：

• 简化CSS选择器，减少复杂布局（如：避免嵌套过深的Flex/Grid）。
• 使用will-change或transform属性优化动画性能。
  
  

TBT与其它指标的关系

• FCP/LCP：衡量内容加载速度，而TBT关注主线程阻塞对交互性的影响。
• FID：TBT 是实验室指标，FID是真实用户输入延迟的体验指标，两者共同反映交互流畅性。
• TTI (Time to Interactive)：TBT高通常意味着TTI延迟。
  
  

优秀标准

• Google建议：TBT ≤ 200ms（针对实验室环境测量）。
  
  

测量工具

• Lighthouse：直接提供TBT数据及优化建议。
• Chrome DevTools：通过Performance面板分析长任务。
• Web Vitals JavaScript API：实时监控TBT（需结合实验室工具验证）。
  
  

网站通过优化TBT可以显著降低页面卡顿、提升用户操作响应速度，从而改善核心用户体验和搜索排名。