6
我对下面的脚本有严重的视觉&性能问题。最大的问题是该对象的动画变得非常干，在IE9中几乎变得残缺不全，但在Firefox中越来越讨厌。可怜的JS/jQuery性能，尤其是在IE9和Firefox中
直到最近它一直很快 - 但我担心复杂性会降低速度。奇怪的是，我的IE9实例中的Sunspider benchmark运行得比在Firefox中快。
脚本（这是一个更大的集***的片段）：
- 检查用户进程的HTML5会话存储日志通过 游戏。
- 根据舞台情况，使用crSpline在两个 点之间动画显示一个对象。
- 确保浏览器窗口沿着穿过一个大帆布对象 ，通过scrollLeft等
- 最后，通过colorbox加载一个弹出窗口。
- 当此框关闭时，用户进度日志会相应增加，对象再次移动。
有没有很明显的速度改进，我可以做我的代码？有一点点的回应，我该如何减少呢？有没有我失踪的无限循环？我可以使用软件来分析JS的慢点吗？
***（我不能提供其他的JS文件或HTML，但我已经确定这个脚本的问题）
UPDATE： 更公平一点测试完成后，似乎步骤动画函数 - 它通过scrollLeft在窗口中跟随对象 - 导致生涩的动画。删除它可以大大改善事情。
但是，这不是一个可行的长期解决方案。一个快速的解决方法是完整地调用跟随功能，但对于最终用户来说，这是一种不太流畅的体验，尤其是当对象移动更长的距离时。
那么，我将如何修改step函数来运行“更慢”/更高效？我猜测它是由它使用所有可用资源每毫秒跟踪对象造成的。
(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);
只是一个侧面说明从基准测试页面：'这个基准测试的核心JavaScript语言而已，而不是DOM或其他浏览器APIs' - 你的颜色框和动画都几乎纯粹是DOM。 –