Javascript 在 HTML5 DOM 上从数组渲染动画。首先慢跑!第二次运行顺利。怎么会？

Question

我有一个关于使用 DOM 在 HTML 中通过 javascript 实现动画的问题。在本例中，我使用的是绝对位置和 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);

Answer 1

如果你不用每次都对鼠标div进行这么多操作，动画会更快。

基本上，将鼠标附加到 dom 一次，使用初始渲染所需的所有 CSS，缓存对附加元素的引用，然后仅操作动画所需的 css 属性。

通过将元素保留在 dom 中，而不是每次都删除并重新附加，您应该会看到性能有所提高。此外，保存对附加元素的引用将防止您在进行另一次更新之前必须重新查询 dom。

由于缓存，动画在第二次运行时应该总是快一点，但这些优化应该至少对初始运行有一点帮助。

** 编辑回应评论 **

您可以在函数外部缓存对鼠标 div 的引用，或者将其卡在渲染函数本身之外，例如:

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();}
}