2

背景:
我有一个 HTML 页面,它使用 WebGL 画布来显示一些 3D 内容。Overlayed 是<div>由内联 CSS 放置的多个,具有和position: absolute的相关尺寸。topleft

问题:
当我更新 3D 内容的视图时(例如,稍微旋转所有内容),我还需要移动所有覆盖的内容<div>,以便它们似乎停留在 3D 空间中的同一位置。
如何更新网页,以便只发生一次重绘?

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

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

PS: jQuery 是允许的,因为它已经在那个项目中使用了。

4

1 回答 1

2

如果相对于您的 div 的其他位置没有改变,您可以执行以下操作:

  1. 创建一个具有绝对/相对/固定位置的父级
  2. 将所有 div 附加到此父级并在 CSS 中设置它们的位置(位置将相对于父级)
  3. 移动父 div 并更改父 div 的样式
于 2012-04-05T04:02:41.953 回答