Question

我为游戏实现了一个简单的可拖动世界地图，但使用不同的浏览器时性能有所不同 - 这有点显而易见。我使用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翻译而不仅仅设置top和left属性会更高效吗？你们有任何提示如何让它更顺畅？

在Firefox中，原型几乎非常流畅，但在像Chrome这样的Webkit浏览器中看起来并不是很好 - 它有点滞后。我只是想知道谷歌地图如何管理它在每个现代浏览器中都能以相同的平滑度工作。

Answer 1

CSS变换，尤其是Z值（将变换加载到GPU中），几乎总是更快更顺畅 - 特别是在iPad等设备上，但也在其他地方。

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

http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

有没有办法改善这个可拖动的世界地图的表现？

1 个答案: