有沒有辦法提高這個可拖動的世界地圖的性能？

Question

我爲一款遊戲實現了一個簡單的可拖動的世界地圖，但使用不同瀏覽器時性能會有所不同 - 這很明顯。我使用256x256像素瓦片，腳本動態地渲染數字以填充整個窗口和邊框。

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

目前我簡單地做它通過設置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瀏覽器等瀏覽器中，它看起來不太好 - 它有點滯後。我只是想知道Google地圖如何管理它在每個現代瀏覽器中以相同的平滑度工作。

Answer 1

CSS變換，特別是Z值（可將變換加載到GPU中）幾乎總是更快更平滑 - 尤其是在iPad等設備上，但在其他地方也如此。

有關詳細信息，你可以檢查出GPU加速本教程：

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