CSS的重绘（Repaint）和重流（Reflow）

Binon
415 阅读5分钟

在了解CSS的重绘（Repaint）和重流（Reflow）之前，需要先了解一些相关概念：

  • DOM（Document Object Model）：DOM是浏览器将HTML文档解析成树状结构的表示方式，它定义了访问和操作HTML元素的方法。

  • CSSOM（CSS Object Model）：CSSOM是浏览器将CSS样式表解析成树状结构的表示方式，它定义了访问和操作CSS样式的方法。

现在我们来介绍重绘和重流：

  1. 重绘（Repaint）：当元素的可见样式属性（例如颜色、背景等）发生改变，但不影响其布局时，浏览器会执行重绘操作。重绘只是重新绘制元素的外观，不涉及布局计算。

  2. 重流（Reflow）：当元素的布局属性（例如尺寸、位置等）发生改变，浏览器会执行重流操作。重流涉及重新计算元素的几何属性和布局，然后更新整个页面的布局。

重绘和重流通常是由下列场景触发的：

  • 修改元素的样式属性（重绘）：例如改变颜色、背景、边框等。

  • 修改元素的布局属性（重流）：例如改变尺寸、位置、显示/隐藏等。

  • 添加、删除、更新DOM节点（重流）：例如插入、删除、移动元素等。

  • 浏览器窗口大小改变（重流）：例如调整窗口大小时，页面布局需要重新计算。

重绘和重流的发生会带来性能开销，因此在编写CSS和操作DOM时，应尽量减少不必要的重绘和重流操作，以提高页面的性能和响应速度。

在大多数情况下，CSS中的translate属性不会触发重流，而只会触发重绘。translate属性用于对元素进行平移变换，不会改变元素的布局属性（尺寸、位置等）。因此，当只使用translate进行平移变换时，浏览器通常只会执行重绘操作，而不会重新计算元素的布局。

重绘操作意味着浏览器会重新绘制元素的外观，但不会重新计算元素的几何属性和布局。这使得translate属性比改变元素的布局属性（如top、left、width等）更高效，因为重绘比重流开销小。

然而，需要注意的是，当与其他会引起布局变化的属性（如width、height、position等）同时使用translate时，可能会触发重流。这是因为浏览器需要重新计算元素的布局，以适应平移变换后的位置。

总结起来，单独使用translate属性进行平移变换通常只会触发重绘，而不会触发重流。但与其他布局属性同时使用时，可能会导致重流发生。因此，在优化性能时，尽量避免频繁改变元素的布局属性和使用复杂的变换组合，以减少重绘和重流的发生。

在CSS中，translate属性通常不会触发重流，以下是一些示例：

  1. 平移动画：
.element {
  transform: translateX(100px);
  transition: transform 1s;
}

这个例子中，当元素进行平移动画时，只会触发重绘，而不会触发重流。

  1. 鼠标悬停效果：
.element {
  transform: translateY(-10px);
  transition: transform 0.3s;
}

.element:hover {
  transform: translateY(0);
}

当鼠标悬停在元素上时，元素会向上平移一些距离。这个效果只会触发重绘，不会触发重流。

  1. 平移变换的过渡效果：
.element {
  transform: translateX(0);
  transition: transform 0.5s;
}

.element.active {
  transform: translateX(100px);
}

当给元素添加.active类时，元素会平移到右侧。这个过渡效果只会触发重绘，不会触发重流。

需要注意的是，以上示例中只使用了translate属性进行平移变换，并没有改变元素的布局属性。因此，只会触发重绘，而不会触发重流。

在 CSS 中，translate 是一种用于进行平移变换的属性。它通过修改元素的位置，将其在页面上移动到指定的位置，但不会影响文档流。

这是因为 translate 属性是一种基于合成的变换，它在渲染过程中是在图层合成阶段应用的，而不是在布局阶段。当浏览器进行页面渲染时，它会将元素的布局计算和绘制分为多个阶段，其中包括布局（layout）、绘制（paint）和合成（composite）。

在布局阶段，浏览器会确定元素在文档流中的位置和大小，计算它们的盒模型属性，并确定元素之间的相对位置关系。这是影响文档流的阶段。

而在合成阶段，浏览器会将各个图层合成为最终的可视输出。在这个阶段，平移变换通过修改元素的图层属性，将元素在屏幕上的位置进行调整，但并不会改变元素在文档流中的位置。

这种基于合成的变换使得 translate 不会触发文档流的重新布局，从而提高了性能。它只会影响元素的视觉呈现，而不会影响其他元素的位置和布局。

需要注意的是，如果使用了 translate3d 或 translateZ 属性，它们会创建一个新的图层，并在合成阶段进行处理。这可能会触发一些图层合成的开销，但仍然不会影响文档流。

avatar
文章
阅读
粉丝