一、回流与重绘的基本概念
1.1 回流
回流是浏览器重新计算页面元素的布局的过程。当页面的结构、尺寸或某些CSS样式改变时，浏览器需要重新计算这些变化对其他元素的影响，从而更新整个页面的渲染。换句话说，回流会影响整个文档流，通常会导致性能的下降。
触发回流的常见操作包括：
- 添加、删除或修改DOM元素
- 修改元素的尺寸（height、width）
- 变换元素的字体、边距、填充等影响布局的样式
1.2 重绘
重绘是一种相对轻量的操作，是在没有影响布局的情况下，更新元素的外观（如颜色、背景等）。重绘通常在回流之后发生，但虽然影响较小，仍然会消耗渲染性能。
触发重绘的常见操作包括：
- 改变元素的背景色
- 修改阴影或透明度等视觉样式
详细可以看我们的这篇文章：《浏览器的回流和重绘》
二、回流与重绘对Lighthouse指标的影响
Lighthouse工具能够提供多种性能指标，包括但不限于LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）、TTI（Time to Interactive）和TBT（Total Blocking Time）。回流和重绘会在多个方面影响这些指标：
2.1 Largest Contentful Paint (LCP)
LCP测量的是加载过程中的最大内容元素的渲染时间。频繁的回流会使得浏览器需要更新其渲染队列，从而导致LCP的时间延长。这意味着用户可能等待较长时间才能看到页面的主要内容。
2.2 First Input Delay (FID)
FID是用户首次与页面交互到浏览器响应之间的时间。若回流发生在用户操作期间，可能会导致浏览器无法快速响应用户的输入，从而延长FID。这直接影响了用户操作的流畅性和体验。
2.3 Cumulative Layout Shift (CLS)
CLS衡量的是用户加载页面时视觉稳定性的指标。如果页面元素因内容加载而改变位置（通常由于缺少明确的宽高设置），则会产生布局偏移，显著增加CLS分数。过高的CLS值会给用户造成不良体验，尤其是在用户试图点击按钮或链接时。
2.4 Time to Interactive (TTI)
TTI是指页面变得可交互所需的时间。在页面加载期间，若频繁发生回流和重绘，JavaScript的执行会被阻塞，导致TTI显著增加，从而影响用户体验和页面的响应能力。
2.5 Total Blocking Time (TBT)
TBT度量的是在页面加载期间，长任务阻塞的总时间。回流所涉及的操作如果执行耗时较长，便会导致浏览器长时间处于忙碌状态，从而增加TBT值，降低页面的整体性能。
三、如何减少回流和重绘的发生
为了提升Lighthouse评估的性能指标，开发者可以采取以下几种策略来减少回流和重绘的影响：
- 批量处理DOM操作：将多次DOM修改合并为一次操作，可以减少回流和重绘的次数。
- 使用CSS动画：通过CSS技术实现视觉效果，而不是通过JavaScript来改变元素的样式，以避免触发回流。
- 设置元素固定尺寸：为图片和广告元素设置明确的宽度和高度，以防止在加载时导致布局发生变化。
- 延迟加载非关键资源：使用懒加载技术推迟加载那些不影响初始渲染的重要资源，从而减少加载期间的回流和重绘。
- 避免频繁访问布局属性：例如，尽量减少对offsetHeight等属性的访问，因为这会强制浏览器进行回流。
四、总结
回流和重绘是浏览器渲染过程中的重要环节，它们对网页性能指标有着直接的影响。通过理解这两个概念，并在开发过程中采取有效的优化手段，可以显著提高Lighthouse的性能评分，提升用户体验。遵循这些最佳实践，不仅可以提升页面的加载速度，还能让用户获得更加流畅和稳定的操作体验。
