CSS 变换与位置

标签 css performance layout

有人可以向我解释转换位置 leftright 属性或 -transform: translateX(n) 的区别吗,因为两者似乎都达到了同样的目的,但可以独立应用。我了解硬件加速的可能性,但这取决于实现。

// psuedo code;

#box {
    -transition-property: all;
    -transition-duration: 1s;
}

// javascript

box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";

一个比另一个有什么优势? 谢谢,

p

最佳答案

渲染层的绘制顺序为:

  • 布局层
  • 油漆层
  • 合成器层

一个层的重绘会触发后续层的重绘。

改变 leftmargin 将触发 layout layer 的重绘(这反过来会触发其他两层的重绘)对于动画元素和 DOM 中的后续元素

更改 transform 将触发合成层 中的重绘仅针对动画元素(DOM 中的后续元素不会 strong> 被重绘)。

性能(因此每秒帧数,或者简单地说,动画流畅度)的差异是巨大的。即使在性能良好的机器上(当处理器繁忙时),使用第一种技术通常也会导致动画抖动,而即使在资源有限的系统上,第二种技术也可能会平稳运行。

使用 transform 的另一个优点是合成器重绘得到了高度优化(对多个元素的动画会导致所有元素都重绘),而更改布局层将在每个元素的每次更改后触发重绘。

关于渲染技术和渲染性能的更详细解释我推荐谷歌的Web Fundamentals .

关于CSS 变换与位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7108941/

相关文章:

html - 滚动后 ui-grid 单元格模板中的多选下拉列表无法正确呈现

html - 我的容器周围有白色边界线

javascript - 如何将一个 div 保持在另一个动画 div 后面

c# - 数据何时加载到应用服务器的内存中?

c++ - 验证 setter 中的值是否不同是否有意义

wpf - 如何将 IsHitTestVisible 设置为 True 的某个对象的子项设置为 false?

css - 响应式网页设计 : Media Queries not working for other screens

java - 如何快速序列化/反序列化复杂的java对象

wpf - 需要帮助理解 WPF MeasureOverride 和 ArrangeOverride 无穷大和 0 尺寸

html - 在行尾右对齐文本(不带表格)