在不同的 DOM 元素中组合/批处理多个 CSS 更新以减少重排/重绘

Question

Background：
我有一个HTML页面，它使用WebGL画布来显示一些3D内容。叠加是由内联 CSS 放置的多个<div>，具有position: absolute和相关维度，用于top和left。

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

当我第一次重绘WebGL然后迭代n <div>时，我每帧会得到n+1次重绘。在应该获得至少 30 fps 的动画中，这不是很好......

注意：
我也知道其他问题，例如：
有没有办法在批处理中应用多个 CSS 样式以避免多次重排？- 但这谈到在一个元素中组合多个 CSS 参数(我已经在这里使用它从 2 n+1 到 n+1......
在一次重绘/重排中更新多个 DOM ？- 但我不确定这是否在这里有所帮助，因为我想我也会有 n+1 次重绘......

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

Answer 1

如果相对于div 的其他位置没有变化，您可以执行以下操作：

1. 创建一个具有绝对/相对/固定位置的父项
2. 将所有div 附加到此父级，并在 CSS 中设置它们的位置(位置将相对于父级(
移动父div
3. 并更改父div 的样式