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 的样式