优化前端应用的总阻塞时间（Total Blocking Time, TBT）

描述
总阻塞时间（TBT）是衡量页面加载期间响应能力的关键指标，定义为从首次内容绘制（FCP）到可交互时间（TTI）之间所有长任务（执行时间超过50毫秒的任务）阻塞时间的总和。例如，一个80毫秒的任务会贡献30毫秒的阻塞时间（80-50=30）。TBT需控制在200毫秒以内以确保流畅体验。优化TBT的核心在于减少长任务的发生频率和持续时间。

优化步骤

1. 识别长任务

   • 使用Chrome DevTools的Performance面板录制页面加载过程，关注主线程上的任务条。红色标记的任务可能为长任务（超过50毫秒）。
   • 通过Lighthouse审计的"Total Blocking Time"部分获取具体的长任务列表及其阻塞时间。

2. 拆分长任务为小任务

   • 将同步JavaScript逻辑拆分为多个异步任务。例如，将大数据处理改为分块执行：

     // 原长任务（假设耗时100ms）
     function processData() {
       for (let i = 0; i < 1e6; i++) { /* 密集计算 */ }
     }
     
     // 拆分后使用setTimeout分块
     function chunkedProcess(data, chunkSize = 1000) {
       let index = 0;
       function nextChunk() {
         const chunk = data.slice(index, index + chunkSize);
         chunk.forEach(item => { /* 处理单个项 */ });
         index += chunkSize;
         if (index < data.length) {
           setTimeout(nextChunk, 0); // 将剩余任务推迟到下一个事件循环
         }
       }
       nextChunk();
     }
     

   • 使用Web Workers将复杂计算移出主线程，避免阻塞。

3. 优化JavaScript执行效率

   • 减少不必要的DOM操作（如循环内频繁修改样式），合并多次操作为一轮更新。
   • 使用更高效的算法或数据结构（如用Map替代对象进行键值查询）。
   • 避免强制同步布局（如先读后写布局属性），通过requestAnimationFrame批量处理DOM变更。

4. 延迟非关键脚本加载

   • 使用async或defer属性加载非首屏必需的脚本（如数据分析SDK）：

     <script src="analytics.js" async></script>
     

   • 通过动态导入（import()）按需加载模块，减少初始包体积。

5. 减少第三方脚本的影响

   • 审核第三方脚本的性能开销，移除或替换低效资源。
   • 使用rel="preconnect"或dns-prefetch提前建立连接，或延迟加载非核心脚本。

6. 持续监控与测试

   • 通过Lighthouse CI在每次代码变更后检测TBT变化。
   • 使用Web Vitals库实时监控生产环境的TBT指标：

     import {getTTFB, getFCP, getLCP, getTBT} from 'web-vitals';
     getTBT(console.log);
     

通过以上步骤系统性减少主线程阻塞，可显著降低TBT，提升用户感知的响应速度。