Q8 · 性能指标

如何用代码获取 TBT？指标分数段？怎么提升？

TBT长任务主线程

⚡ 速记答案（30 秒）

  • 概念：TBT = 所有 Long Task（>50ms）被阻塞时间的总和（减去 50ms 基线）
  • 获取：PerformanceObserver 监听 longtask，累加 duration - 50
  • 分数段：好 ≈ < 200ms，一般 200–600ms，差 > 600ms
  • 与 TTI/FID 类似：切分长任务、减少脚本体积
  • 降低渲染频率，避免频繁强制同步布局
  • 尽量把重逻辑放到 Web Worker 和后端

📖 详细讲解

TBT 定义


Total Blocking Time：FCP 和 TTI 之间，主线程被长任务阻塞的总时间。


计算方式


对每个超过 50ms 的任务，计算其超出部分：


TBT = Σ(每个长任务的 duration - 50ms)

优化策略


1. 识别长任务

• 使用 Performance 面板

• 使用 PerformanceObserver 监听


2. 拆分和延迟

• 代码分割

• 延迟非关键脚本

• 使用 requestIdleCallback


3. 优化执行

• 减少 DOM 操作

• 避免强制同步布局

• 使用虚拟列表

💻 代码示例

计算 TBT
let tbt = 0;

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 只统计超过 50ms 的部分
    const blockingTime = entry.duration - 50;
    if (blockingTime > 0) {
      tbt += blockingTime;
      console.log('新增阻塞时间:', blockingTime, 'ms');
      console.log('累计 TBT:', tbt, 'ms');
    }
  }
});

observer.observe({ type: 'longtask', buffered: true });
💡
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。