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

Question

背景:
我有一个 HTML 页面，它使用 WebGL Canvas 来显示一些 3D 内容。叠加多个 <div>由内联 CSS 放置 position: absolute以及top的相关尺寸和left .

问题:
当我更新 3D 内容的 View 时(例如稍微旋转所有内容)，我还需要移动所有覆盖的 <div>这样它们看起来就停留在 3D 空间中的同一个地方。
如何更新网页，以便只进行一次重绘？

当我第一次重新绘制 WebGL，然后迭代 n <div> ，每帧我会得到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. 创建一个位置为绝对/相对/固定的父级
2. 将所有 div 附加到此父级并在 CSS 中设置它们的位置(位置将相对于父级)
3. 移动父 div 并更改父 div 的样式