Javascript 中的回流和重绘

优化 CSS 以减少不必要的回流和重绘的最佳实践是什么，特别是在大型应用程序中？

1. Reflow（布局重新计算）：

当浏览器重新计算页面上元素的位置、大小和布局时，会发生重排（也称为布局或重新布局）。每当页面布局发生变化时，例如添加、删除、调整大小或其可见性发生变化时，都会发生此过程。这是一个比较复杂和耗时的操作

例子 ：

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

什么时候发生回流？

• 添加、删除或修改 DOM 元素（例如，appendChild、removeChild）。
• 通过调整宽度、高度、边距、填充等 CSS 样式来更改布局
• 调整窗口大小或更改元素大小。
• 更改字体大小或字体属性。
• 使用 offsetWidth、offsetHeight、scrollTop、getBoundingClientRect() 等方法，因为它们会强制浏览器重新计算布局。

回流焊的工作原理：

当您更改影响页面布局的内容时，浏览器必须：

1. 重新计算受更改影响的所有元素的位置和尺寸。
2. 重建布局树，它是元素如何布局的内部表示。

如果许多元素受到一次更改的影响，则回流的成本可能会很高，并且会降低网站的性能。

2.重新绘制（视觉更新）

当元素的视觉属性发生变化但布局不变时，会发生 repaint （或 redraw）。它比回流更便宜，因为它只需要更新元素的外观，而无需重新计算其位置或布局。重新绘制布局后（在需要两者的情况下）或更改不影响布局的属性（例如颜色或可见性）时发生。

例子 ：

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

什么时候进行重绘？

• 更改背景颜色、边框颜色或可见性属性。
• 更改元素的框阴影、轮廓或颜色。
• 更新不透明度（opacity）、变换（transform）或 z-index。

重绘不涉及重新计算布局，因此比回流更快，但仍然需要重绘页面的部分内容，这需要一些时间。

渲染管线

1. DOM 构建：浏览器解析 HTML 来构建 DOM（文档对象模型）树。
2. CSSOM 构建：解析 CSS 以构建 CSSOM（CSS 对象模型）树。
3. 渲染树构建：将 DOM 和 CSSOM 组合起来创建渲染树，其中包含每个可见元素的视觉信息。
4. 布局（回流）：浏览器计算渲染树中每个可见元素的位置和大小。
5. 绘制：浏览器根据颜色、边框、阴影等视觉属性填充像素
6. 复合：浏览器组合不同的绘制层（对于动画、3D 变换等复杂元素）并将其显示在屏幕上。

性能影响

• 回流：在性能方面代价高昂，特别是当它影响页面的大部分或重复触发时（例如，在循环中或调整大小时）。它会影响页面的布局，需要重新计算元素的位置和大小。
• 重新绘制：比回流便宜，但仍然会影响性能，特别是在许多元素需要频繁重新绘制的情况下。

如何优化回流和重绘

1. 最小化 DOM 操作 ：使用 批量 DOM 更新（如前所述）或 DocumentFragment 等技术一次性进行多项更改，而不是一一。

2. 避免布局抖动：如果您读取布局属性（例如，offsetHeight）并立即在同一周期内写入（更改布局），则会强制回流，称为布局抖动。为了避免这种情况，请在不同的步骤中分开读取和写入 DOM 属性。
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

3. 使用 CSS 类 ：不要修改单个样式，而是使用 CSS 类进行更改。浏览器更有效地处理类切换。
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

4. 降低 CSS 的复杂性：避免深层嵌套的元素和过于复杂的 CSS 规则，从而触发回流。

5. 当您只想隐藏元素而不影响布局时，请使用visibility:hidden而不是display:none。 display: none 会触发重排，而visibility: hide 只会触发重绘。

结论

• 回流涉及重新计算页面布局，并且在性能方面成本更高。
• 重新绘制更新视觉外观而不影响布局，并且成本更低。
• 最大限度地减少这两者有助于保持网站的响应速度和速度，从而改善用户体验。

以上是Javascript 中的回流和重绘的详细内容。更多信息请关注PHP中文网其他相关文章！