剖析浏览器渲染深度：Transform 与 Absolute 动画的对比

前端

2023-09-25 21:50:09

从 Transform 动画的思考：浏览器渲染背后的秘密

在日常开发中，我们经常遇到移动动画，比如点击商品后，它从当前位置飞入购物车内的动画。实现此功能有多种方法，最常见的是绝对定位 (Absolute) 和变换 (Transform)。

乍一看，这两种方法都能实现效果，但深入研究后，我们会发现它们在浏览器渲染方面有本质区别。

绝对定位与 Transform 变换：渲染之分

绝对定位

绝对定位是指元素相对于其父元素的定位，不受父元素内容影响。使用绝对定位实现动画时，浏览器会将元素从文档流中脱离，并将其放置在父元素指定位置。

在此过程中，浏览器需要重新计算元素及其子元素的位置和大小，导致重绘 (Repaint) 。重绘是指浏览器重新绘制元素及其子元素的过程。

Transform 变换

Transform 变换不同于绝对定位，它是指元素相对于自身的位置和大小进行改变。使用 Transform 实现动画时，浏览器不会将元素从文档流中脱离，而是直接对其进行变换。

在这个过程中，浏览器不会重新计算元素及其子元素的位置和大小，因此不会触发重绘 (Repaint) 。这是 Transform 动画和 Absolute 动画在浏览器渲染方面的关键区别。

性能之别：Transform 动画为何更胜一筹

通常，Transform 动画的性能优于 Absolute 动画。原因在于 Transform 动画不会触发重绘，而重绘是一个相对耗时的操作。

面试锦囊：动画实现的最佳选择

问题：Transform 动画与 Absolute 动画在浏览器渲染方面的区别是什么？

解答： Transform 动画不会触发重绘，而 Absolute 动画会。

问题：为什么 Transform 动画的性能优于 Absolute 动画？

解答： 因为 Transform 动画不会触发重绘，而重绘是一个相对耗时的操作。

问题：实际开发中，如何选择动画实现方式？

解答： 根据具体情况。如果动画需要经常改变元素的位置和大小，使用 Transform 动画；如果只需改变元素位置，可以使用 Absolute 动画。

代码示例：直观呈现动画差异

以下是使用绝对定位和 Transform 变换实现相同动画效果的代码示例：

/* 绝对定位 */
.element {
  position: absolute;
  top: 0;
  left: 0;
  animation: move 1s;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 100px;
    left: 100px;
  }
}

/* Transform 变换 */
.element {
  position: relative;
  transform: translate(0, 0);
  animation: move 1s;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}