不触发重新计算样式，如何更改CSS3变换？

Question

14

我尝试在屏幕上使用绝对定位来以60FPS进行元素动画，注意到大部分CPU时间都用在了recalculateStyles上。

我能否改变element.style.transform属性而不触发重新计算样式？

目前我是这样改变位置的：el.style.transform = 'translate3d(${x}px, ${y}px, 0px)';

这里有一个演示：http://jsfiddle.net/pLtvxv41/ 您可以使用Google Chrome性能开发工具查看recalculateStyle函数的使用情况。

这个能以更有效的方式改变吗？

- XCS

1

当你改变样式时，它们通常会被重新计算。顺便说一下，这不像 offsetTop 一样触发同步回流。此外，如果您正在以线性方式动画化这些值，是否考虑使用 CSS 过渡效果？ - Kaiido

@Kalido 问题在于这种样式重新计算是应用程序执行的最消耗CPU的步骤。而且，这些更改可以被认为是随机的而不是线性的。 - XCS

那你能达到60fps吗？那问题是什么呢？如果没有其他操作，这个动作占用大部分CPU时间听起来很正常。（附注：一个[MCVE]可能仍然有助于这个讨论...） - Kaiido

我认为这是因为您没有专用的GPU？看一下我在问题中添加的图像，大约60%的时间用于更新层树和重新计算样式。我希望有一种更容易改变元素位置的方法，以便不会对应用程序产生最大的影响。 - XCS

1

@RijoKP 我的对象不会随机移动，它是由用户输入控制的。我需要大约一百万个类来覆盖屏幕上的每个像素。 - XCS

显示剩余22条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Leuliette · Accepted Answer

你是否尝试默认添加-webkit-transform: translate3d(0,0,0);以避免页面完全重绘？

你也可以尝试使用will-change属性来告知浏览器将会更改transform属性。

.example {
  will-change: transform;
}