以下のスクリプトを使用すると、ビジュアルとパフォーマンスに深刻な問題が発生します。最大の問題は、オブジェクトのアニメーションが非常にぎくしゃくしていることです。IE9 ではほとんど不自由ですが、Firefox ではますます煩わしくなります。
最近までかなり高速でしたが、複雑さが速度を落としているのではないかと心配しています。奇妙なことに、Sunspider ベンチマークは、Firefox よりも IE9 インスタンスの方が高速に実行されます。
スクリプト (より大きなコレクションのスニペットです ***):
- ユーザーのゲーム進行状況の HTML5 セッション ストレージ ログをチェックします。
- ステージに応じて、crSplineを使用して 2 点間のオブジェクトをアニメーション化します。
- scrollLeft などを介して、ブラウザー ウィンドウが大きなキャンバス全体でオブジェクトをたどるようにします。
- 最後に、 colorboxを介してポップアップ ウィンドウを読み込みます。
- このボックスを閉じると、それに応じてユーザー進行ログが増加し、オブジェクトが再び移動します。
コードに加えることができる明白な速度の改善はありますか? かなりの繰り返しがありますが、どうすればそれを減らすことができますか? 私が見逃している無限ループが実行されていますか? JS のスロー ポイントをプロファイリングするために使用できるソフトウェアはありますか?
*** (他の JS ファイルや HTML を提供することはできませんが、このスクリプトが問題であると特定しました)
更新: かなり多くのテストの後、scrollLeft を介してウィンドウ内のオブジェクトを追跡するステップ アニメーション機能が、ぎくしゃくしたアニメーションを引き起こしているようです。それを取り除くと、物事はかなり改善されます。
ただし、これは実行可能な長期的な解決策ではありません。簡単な解決策は、完了時に follow 関数を呼び出すことですが、これは、特にオブジェクトがより長い距離を移動する場合に、エンド ユーザーのエクスペリエンスが大幅に低下します。
では、ステップ関数を変更して、「より遅く」/より効率的に実行するにはどうすればよいでしょうか? ジャーキネスは、利用可能なすべてのリソースを使用してミリ秒ごとにオブジェクトを追跡することが原因であると推測しています。
(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);