Skip to content

为什么有时候⽤translate来改变位置⽽不是使用position进行定位?

Posted on:2024年8月10日 at 17:06

translate 是 transform 属性的⼀个值。

改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。

⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。

transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。

因此translate()更⾼效,可以缩短平滑动画的绘制时间。

⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。

具体的原理可查看 【前端基础系列】CSS篇-带你搞懂“硬件加速”

原文转自:https://fe.ecool.fun/topic/98cd24a6-d666-4ddd-a696-f74fbe1552a1