TBT、CLS的优化方案

使用chatGPT，设计一套可落地的前端性能优化方案（下）- TBT、CLS的优化方案

正文：

优化TBT（Total Blocking Time）

了解TBT

TBT，即总阻塞时间，指的是页面主线程被阻塞的总时间。如果TBT过长，则会导致页面加载变慢，用户体验下降。

影响TBT的因素

影响TBT的因素主要有：

• JavaScript 执行：JavaScript 是 Web 开发中必不可少的语言，但过多的 JavaScript 执行可能会阻塞主线程，导致 TBT 上升。
• CSS 解析：CSS 解析也是一个阻塞主线程的过程，尤其是当 CSS 文件很大时，解析过程可能需要很长时间。
• 资源加载：资源加载，如图片、视频和字体等，也会阻塞主线程。如果资源加载时间过长，则可能会导致 TBT 上升。

优化TBT的方法

优化 TBT 的方法主要有：

• 减少 JavaScript 执行时间 ：可以使用诸如 webpack、Browserify 等工具来压缩和混淆 JavaScript 代码，还可以使用异步加载和延迟加载来减少 JavaScript 对主线程的阻塞。
• 优化 CSS 解析 ：可以使用诸如 CSS 预处理器、CSS 压缩器等工具来优化 CSS 代码，还可以使用 CSS 分离和提取来减少 CSS 对主线程的阻塞。
• 优化资源加载 ：可以使用诸如 CDN、HTTP/2 等技术来优化资源加载，还可以使用懒加载和预加载来减少资源加载对主线程的阻塞。

优化CLS（Cumulative Layout Shift）

了解CLS

CLS，即累计布局偏移，指的是页面上所有元素在视觉上发生的意外移动的总和。CLS 过大会导致页面布局不稳定，从而降低用户体验。

影响CLS的因素

影响CLS的因素主要有：

• 元素尺寸发生变化：如果元素的尺寸发生变化，则可能会导致 CLS。例如，图片加载完成时可能会导致图片元素的尺寸发生变化，从而导致 CLS。
• 元素位置发生变化：如果元素的位置发生变化，则可能会导致 CLS。例如，当页面上的元素被重新排列时，可能会导致 CLS。
• 元素添加或删除：如果页面上的元素被添加或删除，则可能会导致 CLS。例如，当用户展开或折叠一个菜单时，可能会导致 CLS。

优化CLS的方法

优化CLS的方法主要有：

• 使用正确的元素尺寸 ：在页面加载之前，应该为所有元素指定正确的尺寸。这样可以防止元素尺寸发生变化导致 CLS。
• 避免元素位置发生变化 ：在页面加载之后，应该避免元素位置发生变化。如果需要对元素进行重新排列，则应该使用 CSS 过渡或动画来实现，这样可以防止 CLS。
• 避免元素添加或删除 ：在页面加载之后，应该避免元素添加或删除。如果需要对元素进行添加或删除，则应该使用 CSS 过渡或动画来实现，这样可以防止 CLS。

总结

TBT 和 CLS 都是影响前端性能的重要指标。通过优化 TBT 和 CLS，可以极大地提高前端性能，以获得更好用户体验。