TBT（Total Blocking Time）是一项用于评估页面加载性能的指标，特别关注渲染过程中 JavaScript 阻塞页面主线程的时间。降低 TBT 可以改善用户体验，使页面更快地可交互。以下是一些优化 Total Blocking Time 的方法：
- 代码分割（Code Splitting）：
- 将 JavaScript 代码分割成较小的块，仅在需要时加载。这有助于减少首次加载时必须下载和执行的 JavaScript 代码量。
- 延迟加载非关键脚本：
- 对于不是首次渲染必需的脚本，使用
async或defer属性，或通过动态加载（例如使用import()）来推迟它们的加载。
- 对于不是首次渲染必需的脚本，使用
- 使用 Web Workers：
- 将一些 JavaScript 任务移动到 Web Workers 中，以便在后台运行，不影响主线程。这可以帮助降低 TBT。
- 优化第三方脚本：
- 第三方脚本可能会对 TBT 产生影响，因此谨慎选择并优化使用的第三方库和插件。确保它们是按需加载的，并且不会在渲染过程中阻塞主线程。
- 使用异步加载：
- 使用异步加载技术来加载非关键资源，确保页面的首次渲染不会被过多的 JavaScript 阻塞。
- 优化关键渲染路径：
- 确保关键渲染路径上的资源能够迅速加载，包括 HTML、CSS 和首屏图片。优化关键渲染路径有助于提高页面的渲染速度。
- 缓存：
- 利用浏览器缓存机制，确保一些资源能够被缓存，避免每次都重新下载。
- 使用现代构建工具：
- 使用现代的构建工具（如Webpack、Parcel等），它们能够自动进行代码分割、压缩、合并等优化，有助于减小 TBT。
- 监测和分析：
- 使用性能分析工具，如Chrome DevTools或Lighthouse，来监测和分析页面的性能指标，包括 TBT。这样可以帮助你识别和解决导致 TBT 高的问题。
- 服务端渲染（SSR）：
- 考虑使用服务端渲染（SSR）来提前生成页面的部分 HTML，减少客户端渲染的工作量。
总体而言，通过合理的代码分割、异步加载、优化关键渲染路径等手段，可以有效降低 Total Blocking Time，提高页面的渲染性能。在实施优化前，建议先进行性能分析，以了解页面的瓶颈和具体优化方向。
如果您喜欢这篇文章，请订阅我的网站，您将会收到最新的资源分享信息。您还可以在YouTube和小红书上找到我。
