Javascript从数组在HTML5 DOM上呈现动画。先慢跑！第二次运行平稳。怎么会？

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

函数render_mouse（）
{
如果（播放位置<鼠标文件长度）
{
$（'.mouse'）.remove（）；
$（“正文”）。附加(
$('')
.css（'位置'，'绝对'）
.css（'top'，play_mousefile[play_pos+1]+'px'）
.css（'left'，play_mousefile[play_pos]+'px'）
.css（'width'，鼠标大小）
.css（'height'，鼠标大小）
.css（'background-image'，'url（images/cursor.png'））
);
播放位置=播放位置+2；
}
否则{
clearInterval（播放鼠标器）；
}
}
更新：
$（“#鼠标”）。设置动画({
左：录制鼠标文件[播放位置]+“px”，
顶部：录制鼠标文件[播放位置+1]+“px”
},80);

如果不是每次都对鼠标div执行这么多操作，动画会更快

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

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

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

**编辑以回应评论**

您可以在函数外部缓存对鼠标div的引用，或将其挂起到渲染函数本身，即la:

var mouseDiv=$（“#鼠标”）

或

---

在此处发布代码将有助于定位问题Post代码。到目前为止，我的最佳猜测是您正在尝试实时光栅化图像，而不是使用精灵。下面是渲染鼠标的函数：我用animate x，y pos替换了remove。但仍然使用jQuery animate发布了更新版本。部分原因是原始版本代码太慢了，是因为你每次都删除并插入DIV。IIRC，这会导致你每次这样做时都会出现回流。谢谢你的建议。我已经在pastebin中发布了更新的代码。它使用动画。我就像你在这里说的那样。第一次执行时仍然很慢。第二次，第三次等等。运行平滑渲染。明白了。你合作了吗uld仍然在函数外部缓存对mouse div的引用，或者将其挂起，这样您就不必每次都使用$（“#mouse”）来选择它。我将发布一个代码示例。再次感谢。我像您所说的那样更新了代码。仍然存在性能问题。您说过“由于缓存的原因，动画在第二次运行时应该总是快一点，但这些优化至少对初始运行有一点帮助。“是否可以以某种方式预缓存动画？我确实需要它与第二次运行一样快。我想可以尝试在隐藏分区中首先运行动画。例如，可见性：隐藏而不是显示：无。这仍然会使包含的元素占用dom中的空间（显示：无实际上会将其从流中删除）。我猜大多数浏览器都足够聪明，这个技巧不会奏效，但值得一试。或者，您可以尝试将鼠标定位在屏幕外，设置动画，然后将其放回正确的位置以进行实际动画。再次感谢。我尝试了此方法，但对执行速度没有影响。似乎不是p解决这个问题是可能的。

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