直到最近它一直很快 – 但我担心复杂性正在减慢速度.奇怪的是,在我的IE9实例中,Sunspider benchmark比在Firefox中运行得更快.
该脚本(这是一个更大的集合的片段***)：
>检查用户进程的HTML5会话存储日志
游戏.
>根据阶段,在两个之间设置动画
使用crSpline分.
>确保浏览器窗口跟随对象
穿过大画布,通过scrollLeft等.
>最后,它通过colorbox加载一个弹出窗口.
>当此框关闭时,用户进度日志会相应增加,对象再次移动.
我可以对我的代码进行明显的速度提升吗？有一点点的回复,我怎么能减少呢？是否有任何无限循环运行,我错过了？有没有我可以使用的软件来描述JS的慢点？
***(我无法提供其他JS文件或HTML,但我已将此脚本识别为问题)
更新：
经过相当多的测试后,似乎步骤动画功能 – 通过scrollLeft跟踪窗口中的对象 – 导致生涩的动画.删除它会大大改善事情.
然而,这不是一个可行的长期解决方案.快速修复是完全调用跟随功能,但这对最终用户来说是一种不那么流畅的体验,特别是当对象移动距离较远时.
那么,我如何修改步长函数以更慢’/更有效地运行？我猜测它的急动是由它使用所有可用资源来跟踪每毫秒的对象造成的.
(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,complete: function() {
$.colorBox({href:"dialog-2",height:"547px",close: ""});
}
}
);
break;
case '3':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[1499,285],[1922,423]]) },complete: function() {
$.colorBox({href:"dialog-3.html",close: ""});
}
}
);
break;
case '4':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[1922,423],[2216,578]]) },{
duration: 5000,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",close: ""});
}
}
);
break;
case '5':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[2216,578],[2769,904]]) },{
duration: 5000,complete: function() {
$.colorBox({href:"dialog-4.html",close: ""});
}
}
);
break;
case '6':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[2769,904],[3263,903]]) },complete: function() {
$.colorBox({href:"dialog-5.html",close: ""});
}
}
);
break;
case '7':
$.colorBox({href:"game-2.html",width:"500px",height:"600px",close: ""});
break;
case '8':
$.colorBox({href:"dialog-6.html",height:"567px",close: ""});
break;
case '9':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[3263,903],[4141,820]]) },complete: function() {
$.colorBox({href:"dialog-7.html",close: ""});
}
}
);
break;
case '10':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[4141,820],[4568,949],[4447,1175]]) },complete: function() {
$.colorBox({href:"dialog-8.html",height:"434px",close: ""});
}
}
);
break;
case '11':
$.colorBox({href:"dialog-9.html",close: ""});
break;
case '12':
$("#object").animate(
{ crSpline: $.crSpline.buildSequence([[4447,1175],[4701,1124],[4816,822]]) },complete: function() {
$.colorBox({href:"dialog-10.html",width:"900px",height:"687px",close: ""});
}
}
);
break;
}
};
})(jQuery);
解决方法
我注意到的第一件事是,在IE(特定版本8)中,附加到window.scroll或.resize的回调在调整窗口大小(或滚动)时似乎比Chrome或FF多了很多倍.因此,附加的任何回调被称为比Chrome增加相对成本多倍的回调.
我们设法通过将这些回调中的内容最小化到最小化来解决我们的问题,并且我们获得的主要收益是摆脱jQuery选择器.所以在你的情况下,你有回调函数中的var mover = $(‘#object’),每当你的事件触发时,IE会尝试查找并获取对象并将其包装在jQuery中,只需在你的回调,然后使用缓存的对象.在我们的例子中,通过大小顺序改善了性能,即使没有遇到性能问题也是一件好事(这是一个不必要的重复操作).
所以例如在案例8中,有类似的东西：
case '10':{
//caching myObject once and then use it afterwards
var myObject = $("#object"),$window = $(window);
myObject.animate(
{
crSpline: $.crSpline.buildSequence([[4141,step: function() {
var mover = myObject,//no need to refetch the object
posX = mover.position().left;
posY = mover.position().top;
$window.scrollLeft(posX - $window.width() / 2)
.scrollTop(posY - $window.height() / 2);
},close: ""});
}
}
);
}
ps：另外,我不确定您的应用程序的语义,但您可能需要添加自己的逻辑来跟踪posX和posY,因为它们总是可以引用原始缓存对象,但在所有情况下,请执行我提到的步骤确保选择器的成本是造成问题的原因(就像我的情况一样).
