背景:
我有一个 HTML 页面,它使用 WebGL 画布来显示一些 3D 内容。Overlayed 是<div>
由内联 CSS 放置的多个,具有和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 是允许的,因为它已经在那个项目中使用了。