在不同的DOM元素中组合/批量多个CSS更新以减少回流/重绘？

Question

背景
我有一个HTML页面，它使用WebGL画布显示一些3D内容。覆盖的是<div>多个position: absolute，其内嵌CSS包含top以及left和<div>的相关维度。

问题：
当我更新3D内容的视图时（例如稍微旋转所有内容），我还需要移动所有重叠的<div>，以便它们看起来保持在3D空间中的相同位置。
如何更新网页，以便只进行一次重绘？

当我第一次重新绘制WebGL然后遍历 n {{1}}时，我每帧会得到 n +1重绘。在动画期间，这应该至少达到30 fps ......

注意：
我也知道其他问题，如：
Is there a way to apply multiple CSS styles in a batch to avoid multiple reflows? - 但是谈到在一个元素中组合多个CSS参数（我已经在这里使用它来从2 n +1到 n + 1 ...）
Multiple DOM updates in a single redraw/reflow? - 但我不确定这是否有帮助，因为我猜我还有 n +1重绘...

PS：jQuery是允许的，因为它已经在该项目中使用过。

Answer 1

如果您的div的其他位置的相对位置没有变化，则可以执行下一步：

1. 创建一个位置为absolute / relative / fixed
的父级
2. 将所有div添加到此父级并在CSS中设置其位置（位置将相对于父级）
3. 移动父div并更改父div的样式