在不触发重新计算样式的情况下更改 CSS3 转换？答案

【问题标题】：Change CSS3 transform without triggering recalculate styles?在不触发重新计算样式的情况下更改 CSS3 转换？
【发布时间】：2018-04-07 23:22:49
【问题描述】：

尝试在屏幕上以 60FPS 为具有绝对定位的元素制作动画，我注意到大部分 CPU 时间都被 recaculateStyles 占用。

我可以在不触发重新计算样式的情况下更改element.style.transform 属性吗？

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

这是一个演示：http://jsfiddle.net/pLtvxv41/ 你可以使用谷歌浏览器性能开发工具查看 recalculateStyle 函数的用法。

能否以更有效的方式进行更改？

【问题讨论】：

好吧，您更改样式，听起来很正常，它们会重新计算。 Fwiw，它不会像offsetTop 那样触发同步回流。此外，如果您以线性方式为这些值设置动画，您是否考虑过使用 CSS 过渡？
@Kalido 问题在于这种风格的重新计算是应用程序执行的 CPU 最密集的步骤。不，这些变化可以被认为是随机的而不是线性的。
那你能分享一个minimal reproducible example吗？您的布局是否过于复杂以至于重新计算样式需要很长时间？它甚至需要很长时间，还是只是快速过程中最慢的一个？我假设您无法达到 60fps，但情况是这样吗？你如何管理你的动画循环？
@Kaiido 样式以 60FPS 更新，因此每秒更新 60 次 el.style
@RijoKP 我的对象不会随机移动，它由用户输入控制。我需要大约 100 万个类来覆盖屏幕的每个像素。

【解决方案1】：

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

你也可以尝试will-change行为到inform the browser，transform属性会被改变

.example {
  will-change: transform;
}

【讨论】：