尝试以60FPS的速度对在屏幕上具有绝对位置的元素进行动画处理时，我注意到recaculateStyles使用了大多数CPU时间。
是否可以在不触发重新计算样式的情况下更改element.style.transform属性？
目前，我这样改变位置:el.style.transform = 'translate3d(${x}px, ${y}px, 0px)';
这是一个演示:http://jsfiddle.net/pLtvxv41/您可以使用Google Chrome性能开发工具来查看recalculateStyle函数的用法。
可以更有效的方式进行更改吗？
最佳答案
您是否尝试默认添加-webkit-transform: translate3d(0,0,0);以避免完全重画页面？
您也可以尝试将will-change行为更改为inform the browser，以更改转换属性
.example {
will-change: transform;
}