0

我为游戏实现了一个简单的可拖动世界地图，但是使用不同的浏览器时性能会有所不同——这很明显。我使用了 256x256 像素图块，脚本动态渲染数字以填充整个窗口和边框。

原型： http: //mt111102.students.fhstp.ac.at/draggable/game.html

目前我只是通过在 mousemove 上设置top和样式属性来做到这一点。left这是一个片段：

mouseDown : function(e) {
    Map.myPreventDefault(e);

    dx = map.offsetLeft - e.clientX;
    dy = map.offsetTop - e.clientY;

    map.addEventListener('mousemove', Map.divMove, false);
},

divMove : function(e) {
    Map.myPreventDefault(e);

    map.style.position = "absolute";
    map.style.cursor = "move";

    map.style.left = e.clientX + dx + "px";
    map.style.top = e.clientY + dy + "px";
}

稍后当拖动到边界时，我将使用 XHR 加载新图块并在另一端删除旧图块以保持性能，以便包装器不会变大。

我的问题是：使用 CSS translate 而不是仅仅设置topandleft属性会更高效吗？你们有什么技巧可以让它更流畅吗？

在 Firefox 中，原型几乎可以完美运行，但在 Chrome 等 Webkit 浏览器中，它看起来不太好——它有点滞后。我只是想知道谷歌地图是如何让它在每个现代浏览器中以同样的流畅度工作的。

4

1 回答 1

0

CSS 变换，尤其是具有 Z 值（将变换加载到 GPU 中）的 CSS 变换几乎总是更快、更流畅——尤其是在 iPad 等设备上，但在其他设备上也是如此。

有关更多详细信息，您可以查看有关 GPU 加速的本教程：

于 2013-02-04T00:13:13.767 回答