最大限度地减少主线程工作

浏览器的渲染程序进程会将您的代码转换为用户可以与之互动的网页。默认情况下，渲染程序进程的主线程通常会处理大多数代码：它会解析 HTML 并构建 DOM，解析 CSS 并应用指定的样式，然后解析、评估和执行 JavaScript

主线程也会处理用户事件。 因此，每当主线程忙于执行其他操作时，您的网页可能不会响应用户互动，从而导致糟糕的体验

如何最大限度地减少主线程工作

脚本评估

• 优化第三方 JavaScript
• 使输入处理程序去除抖动
• 使用 Web Worker
  样式和布局
• 缩小样式计算的范围并降低其复杂性
• 避免大型、复杂的布局和布局抖动
  渲染
• 坚持仅使用合成器的属性并管理层数
• 降低绘制的复杂性并减少绘制区域
  解析 HTML 和 CSS
• 提取关键 CSS
• 缩减 CSS 大小
• 推迟非关键 CSS
  脚本解析和编译
• 通过代码拆分减少 JavaScript 载荷
• 移除未使用的代码
  垃圾回收
• 使用 measureMemory 监控网页的总内存用量

使输入处理程序去除抖动

• 避免使用长时间运行的输入处理程序；它们可能会阻止滚动。
• 请勿在输入处理程序中进行样式更改。
• 对处理程序进行去抖动处理；存储事件值，并在下一个 requestAnimationFrame 回调中处理样式更改

缩小样式计算的范围并降低其复杂性

通过添加和移除元素、更改属性、类或播放动画来更改 DOM 会导致浏览器重新计算元素样式，在许多情况下，还会重新计算网页的部分或全部布局。此过程称为样式计算
浏览器会通过创建一组匹配的选择器来确定哪些类、伪类选择器和 ID 适用于任何给定元素，从而开始计算样式。然后，它会处理匹配选择器中的样式规则，并确定元素具有哪些最终样式

1. 降低选择器的复杂性
2. 减少要设置样式的元素数量
3. 避免使用昂贵的属性