Vue项目总阻塞时间(TBT)过高如何优化？目标降至100-200ms

• 同步批量渲染阻塞：已做的异步组件仅优化了资源加载阶段的耗时，没有解决100-300个组件同时初始化、触发生命周期、执行渲染逻辑的主线程占用问题。Vue默认会把同批次的渲染任务塞到同一个宏任务中执行，组件数量叠加后总耗时很容易突破2s，直接拉高TBT。
• 小组件实例开销过高：过度拆分的按钮、评分、图片等小组件每个都有独立的响应式追踪、实例初始化开销，单组件开销仅几毫秒，但上百个叠加后累计开销会非常可观。
• 不必要的运行时负载：如果组件内存在冗余的响应式声明、重复计算逻辑、无意义的watch监听，上百个组件执行时会放大这部分开销。
• 渲染层重排重绘叠加：未设置宽高占位的懒加载图片触发的重排，和组件渲染任务叠加，会进一步拉长主线程阻塞时间。

• 时间分片拆分渲染任务
  不要一次性初始化所有组件，用requestIdleCallback将渲染任务拆分到多个空闲时段执行，每批只渲染少量组件，执行完就让出主线程。参考实现：

  // 分批渲染逻辑，21张卡片可以分3批，每批7张
  const batchRender = (renderList, batchSize = 7, renderCallback) => {
    let currentIndex = 0
    const runBatch = () => {
      const batchEnd = Math.min(currentIndex + batchSize, renderList.length)
      for(; currentIndex < batchEnd; currentIndex++) {
        renderCallback(renderList[currentIndex], currentIndex)
      }
      if(currentIndex < renderList.length) requestIdleCallback(runBatch)
    }
    requestIdleCallback(runBatch)
  }
  

  Vue3可以结合<Suspense>和异步组件的加载时机控制，进一步简化分批逻辑。
• 扁平化组件层级
  把复用度低的按钮、评分星星等小组件直接内联到父组件中，减少独立组件实例的数量，降低初始化和响应式追踪的总开销。全局通用组件优先用局部按需注册，代替全局注册减少组件查找开销。
• 削减不必要的响应式负载
  静态常量不要放到data/reactive/ref等响应式容器中，直接声明为普通变量即可，跳过响应式劫持的开销。列表渲染的静态项用v-once（Vue2/Vue3）或v-memo（Vue3）标记，跳过重复diff和渲染。
• 优先渲染首屏可见内容
  首屏视口外的组件不要在初始渲染阶段初始化，用懒加载或者虚拟滚动的方式，等用户滚动到对应区域再渲染。所有懒加载图片提前设置固定宽高占位，避免图片加载后触发大面积重排。
• 构建阶段优化
  生产环境开启Vue生产模式构建，关闭devtools、非必要的sourcemap，压缩代码时开启死代码删除，移除未使用的组件逻辑。Vue3项目开启模板预编译，减少运行时的模板解析开销。

内容的提问来源于stack exchange，提问作者AidOnline01