jquery - 定位 200+ div's every tick，使用 HTML5 <canvas> 标签是否更快？

Question

我正在使用 jQuery 创建一个游戏，我需要在每次更新时(大约 0.02 秒)更新 200 多个(有时是 300 个)div。现在性能非常好(尽管突破了极限)并且可以在大多数浏览器上运行。

我的游戏使用“单位”，这是一个具有 Create() 和 Update() 函数的类。 Create() 创建一个 32x32 大小的 div 并为其命名，而 Update() 使用两个重要的 css 调用设置位置:

    $("#unit"+this.uid).css("left", posx+"px");
    $("#unit"+this.uid).css("top", posy+"px");

有人告诉我 HTML5 会运行得更快“因为 HTML5 Canvas 的内容不会改变 DOM 树”。这对我的情况有影响吗？我会自己测试这个，但我没有 HTML5 的经验或知识，想知道我是否应该先尝试任何东西。

提前谢谢你。

Answer 1

您可能想要探索 CSS3 转换。您可以在一段时间内对 css 属性进行动画处理，而不是每个滴答声。它还能够在 webkit 浏览器上使用硬件加速。