在 css 转换上触发布局答案

【问题标题】：Layout being triggered on css transform在 css 转换上触发布局
【发布时间】：2016-09-26 14:37:54
【问题描述】：

我有一个元素div，它有以下样式——

  height: '100%',
  willChange: 'transform',
  marginRight: '15px',
  transform: 'translateX(-100%)'

在触摸移动事件中，我正在更新元素 style.transform，如下所示 —

el.style.transform = `translateX(${100 * x - 100}%)`

显然是这里的信息https://csstriggers.com/transform 这些更改不应导致任何Layout 更新。但我仍然在时间线上看到很多Layout 事件。

【问题讨论】：

显示一些代码。布局更新可能是由其他原因引起的。
@tushar 你能提供 js fiddle 吗？我也在向 csstriggers 提出这个问题，以了解有关您的问题的更多见解。 github.com/GoogleChrome/css-triggers/issues/23
@Tushar 接受的答案不正确。如果您不显示任何代码，我们将无法帮助您。使用 transform 不会强制任何布局.

标签： css performance google-chrome-devtools

【解决方案1】：

Css 转换是一种属性，如果通过 Javascript 使用确实会导致浏览器同步计算样式和布局，也就是回流或Layout trashing。看看这个以了解所有可能导致布局垃圾的元素https://gist.github.com/paulirish/5d52fb081b3570c81e3a

但事情是这样的，根据我的理解，Transform 是浏览器可以轻松轻松地制作动画的属性之一.和

变换是动画的最佳属性，因为 GPU 可以协助举重参考：HTML5rocks high performance animations

developers.google 上有一个关于避免大型、复杂的布局和布局抖动 的很好的例子，在底部你可以看到一个关于读写 DOM 的 offsetWidth 的例子。我认为您可以尝试使用转换，我认为它可能会有所帮助。

编辑：@Tushar 您能否为您的问题提供 js fiddle 或建议我如何重新生成确切的问题？我也在 git 上使用 csstriggers 提出这个问题，以了解有关您的问题的更多见解。 github.com/GoogleChrome/css-triggers/issues/23

【讨论】：

@Tushar Transform 属于 getComputedStyle 方法。因此，正如我在答案中提到的，当在 JavaScript 中请求/调用转换时，它会导致布局垃圾。 Original Source 也可以从 gist 链接 what-forces-layout 中确认这一点，作者是 paulirish。底线， cstriggers 是不正确的。仅在这种情况下是错误的，如果您通过 Js 调用该属性。