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

【问题标题】：Combine / batch multiple CSS updates in different DOM elements to reduce reflows / repaints?在不同的 DOM 元素中组合/批处理多个 CSS 更新以减少重排/重绘？
【发布时间】：2012-04-03 04:52:34
【问题描述】：

背景：
我有一个 HTML 页面，它使用 WebGL 画布来显示一些 3D 内容。覆盖的是多个<div>，它们由内联CSS放置，带有position: absolute和top和left的相关尺寸。

问题：
当我更新 3D 内容的视图（例如，稍微旋转所有内容）时，我还需要移动所有覆盖的 <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 是允许的，因为它已经在那个项目中使用了。

【问题讨论】：

如果你只是做所有事情而不屈服于事件循环并且没有访问需要引擎运行回流的属性stackoverflow.com/a/1278213/1026，你不应该看到多次回流或重绘。您是否希望或只是希望？
我希望。所以感谢您的提示，我现在将进一步研究

标签： javascript css dom repaint reflow

【解决方案1】：

如果相对于你的 div 的其他位置没有改变，你可以做下一步：

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

【讨论】：