6
以下のスクリプトでは、深刻な視覚的なエラー&の問題が発生しています。最大の問題は、オブジェクトのアニメーションがIE9では非常にぎこちないようになってきていますが、Firefoxではますます厄介なことです。JS/jQueryのパフォーマンスが悪い（特にIE9とFirefoxの場合）
最近までかなり速いですが、複雑さが減速していることが懸念されます。奇妙なことに、Sunspider benchmarkはFirefoxよりもIE9インスタンスで高速に動作します。
（大きなコレクションの一部です***）スクリプト：
- チェックし ゲームを通じてユーザー進行のHTML5セッションストレージログ。
- ステージによっては、crSplineを使用して2つの ポイントの間でオブジェクトをアニメーション化します。
- 最後に、それはcolorboxを経由してポップアップウィンドウをロード
- などscrollLeftを経由して、ブラウザウィンドウが大きなキャンバス全体にオブジェクト を以下のようにします。
- このボックスを閉じると、それに応じてユーザーの進行ログが増分され、オブジェクトが再び移動します。
私のコードに明白なスピードの改善がありますか？繰り返しの公正なビットが、どのように私はそれを減らすことができますか？実行中の無限ループがありますか？ JSの低速ポイントをプロファイルするために使用できるソフトウェアはありますか？それは、公平なビットより多くのテストの後 ：
***
UPDATE（私は他のJSファイルやHTMLを提供することはできませんが、私は問題として、このスクリプトを確認しています）スクロール・レフトを介してウインドウ内のオブジェクトに続くステップ・アニメート・ファンクションがぎこちないアニメーションを引き起こしているようです。それを削除すると、かなり改善されます。
しかしこれは実行可能な長期的な解決策ではありません。迅速な修正は、完了時にフォロー機能を呼び出すことですが、これは、特にオブジェクトが長距離移動する場合に、エンドユーザーにはあまりスムーズではありません。
私はステップの機能をより「より遅く」/より効率的に変更するにはどうしたらよいですか？私は、ジャーキネスが、ミリ秒ごとにオブジェクトを追跡するために利用可能なすべてのリソースを使用していることに起因すると思われます。
(function ($) {
sessionStorage.gameMainStage = 0
moveShip = function() {
switch (sessionStorage.gameMainStage)
{
case '1':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[715, 425], [582, 524], [556, 646], [722, 688], [963, 629], [1143, 467]]) },{
duration: 10000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-1.html", width:"737px", height:"474px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '2':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[1143, 467], [1343, 667], [1443, 367], [1243, 167], [1499, 285]]) },
{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-2", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '3':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[1499, 285], [1922, 423]]) },
{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-3.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '4':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[1922, 423], [2216, 578]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"game-1.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '5':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[2216, 578], [2769, 904]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-4.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '6':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[2769, 904], [3263, 903]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-5.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '7':
$.colorbox({href:"game-2.html", width:"500px", height:"600px", iframe: true, overlayClose: false, escKey: false, close: ""});
break;
case '8':
$.colorbox({href:"dialog-6.html", width:"737px", height:"567px", iframe: true, overlayClose: false, escKey: false, close: ""});
break;
case '9':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[3263, 903], [4141, 820]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-7.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '10':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[4141, 820], [4568, 949], [4447, 1175]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-8.html", width:"737px", height:"434px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
case '11':
$.colorbox({href:"dialog-9.html", width:"737px", height:"567px", iframe: true, overlayClose: false, escKey: false, close: ""});
break;
case '12':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[4447, 1175], [4701, 1124], [4816, 822]]) },{
duration: 5000,
step: function() {
var mover = $('#object'),
posX = mover.position().left;
posY = mover.position().top;
$(window)
.scrollLeft(posX - $(window).width()/2)
.scrollTop(posY - $(window).height()/2);
},
complete: function() {
$.colorbox({href:"dialog-10.html", width:"900px", height:"687px", iframe: true, overlayClose: false, escKey: false, close: ""});
}
}
);
break;
}
};
})(jQuery);
ベンチマークのページのちょっとしたメモ： 'このベンチマークは、DOMやその他のブラウザAPIではなく、中心的なJavaScript言語のみをテストします。あなたのカラーボックスやアニメーションはほとんど純粋なDOMです。 –