我有一个关于使用DOM在HTML中通过javascript动画的问题。在这种情况下,我使用绝对possition和css + jQuery并动画div。
因此,当我通过我的大阵列x,y时,动画运行速度非常慢。我在100毫秒(80毫秒)间隔运行,但似乎渲染速度不够快,我的动画需要超过10秒......
当重新运行动画时,似乎说明已经以某种方式缓存(渲染)并且我的动画运行得非常完美。
然后,如果我等待让我们说5分钟,它将再次变慢。 (似乎是已删除的低级机器代码存储器,因为它没有再次使用?)
如果它第一次执行,我就无法弄清楚如何让我的动画顺利运行。 我试过fabric.js来渲染动画......同样的问题。在第一次运行它的速度很慢。第二次运行和跟随是顺利的。
function render_mouse()
{
if(play_pos < mousefile_length)
{
$('.mouse').remove();
$("body").append(
$('<div id="mouse" class="mouse"></div>')
.css('position', 'absolute')
.css('top', play_mousefile[play_pos+1] + 'px')
.css('left', play_mousefile[play_pos] + 'px')
.css('width', mousesize)
.css('height', mousesize)
.css('background-image', 'url(images/cursor.png')
);
play_pos = play_pos +2;
}
else {
clearInterval(play_mousetimer);
}
}
UPDATED:
$('#mouse').animate({
left: rec_mousefile[play_pos]+"px",
top : rec_mousefile[play_pos+1]+"px"
},80);
答案 0 :(得分:2)
如果你不是每次都对鼠标div进行这么多操作,那么动画会更快。
基本上,将鼠标附加到dom一次,使用初始渲染所需的所有CSS,缓存对附加元素的引用,然后仅操作动画所需的css属性。
通过将元素保留在dom中,而不是每次删除和重新附加,您应该看到一点性能提升。此外,保存对附加元素的引用将阻止您在进行另一次更新之前重新查询dom。
由于缓存,动画在第二次运行时应该总是快一点,但这些优化应该有助于初始运行至少一点。
**编辑以回复评论**
你可以在函数外部缓存对鼠标div的引用,或者将它挂起渲染函数本身,la:
var mouseDiv = $('#mouse');
function render_mouse()
{
if(mousefile_length > play_pos)
{
mouseDiv.animate({
left: rec_mousefile[play_pos]+"px",
top : rec_mousefile[play_pos+1]+"px"
},80);
play_pos=play_pos+2;
}
else {playtimer.stop();}
}
或
function render_mouse()
{
// query the first time, and then use the cached version thereafter
render_mouse.mouse = render_mouse.mouse || $('#mouse');
if(mousefile_length > play_pos)
{
render_mouse.mouse.animate({
left: rec_mousefile[play_pos]+"px",
top : rec_mousefile[play_pos+1]+"px"
},80);
play_pos=play_pos+2;
}
else {playtimer.stop();}
}