ゲーム用に単純なドラッグ可能な世界地図を実装しましたが、ブラウザーを使用するとパフォーマンスが異なります。これは明らかです。256x256のピクセルタイルを使用しましたが、スクリプトは数値を動的にレンダリングして、ウィンドウ全体と境界線を埋めます。
プロトタイプ： http： //mt111102.students.fhstp.ac.at/draggable/game.html
現在、mousemoveでandstyle属性を設定するだけで実行してい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を使用して新しいタイルをロードし、もう一方の端にある古いタイルを削除して、ラッパーが大きくならないようにパフォーマンスを維持します。
私の質問は、属性topとleft属性を設定するだけでなく、CSS変換を使用する方がパフォーマンスが向上するでしょうか。そして、あなたたちはそれをよりスムーズにするためのヒントがありますか？
Firefoxでは、プロトタイプはほぼ完全にスムーズに動作しますが、ChromeなどのWebkitブラウザーでは、見栄えがよくありません。少し遅れます。グーグルマップがそれをどのように管理して、同じ滑らかさですべての最新のブラウザで機能するのか疑問に思います。