Jquery CPU使用率

Question

我正在使用Jquery让一张图片在我的网页上水平滚动。唯一的问题是它会消耗大量的CPU资源。在Firefox浏览器中，单核笔记本电脑的CPU使用率可高达100％。

这可能是什么原因呢？

Jquery

<script>
    jQuery(document).ready(function() {

    $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null);
    });

    </script>

CSS

.speech {
    /*position:fixed;*/
    top:0;
    left:0px;
    height:400px;
    width:100%;
    z-index:-1;
    background:url(/images/speech.png) -300px -500px repeat-x;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
}

HTML

<div class="speech"></div>

- user289554

---

真的吗？我从来没有遇到过这么占用内存的情况。你用的是什么浏览器？我无法复制这个问题。试试同样的操作，但不要使用png格式，改用gif/jpg格式，看看是否还有同样的问题。 - Glycerine

他没有说它是一个内存吃货；100%的CPU利用率并不意味着那个。 - Pointy

Answer 1

因为您长时间地要求浏览器每秒多次重绘图像，所以它正在使用CPU资源。这并不是免费的。

- Pointy

Answer 2

如果有人在使用jQuery动画时遇到高CPU使用率的问题（就像我一样），那么值得注意的是，jQuery 1.4.3中添加了jQuery.fx.interval，因此您可以控制动画间隔速率。

使用示例（将其设置为约50-70使我的动画保持流畅，我注意到CPU使用率降至约10-20％）：

jQuery.fx.interval = 50;

- NickGPS

Answer 3

如果这是一个与内存和CPU有关的问题，那么您可以使jQuery函数调用的结果无效。如果您的调用返回一个jQuery对象，则在调用之后可以将其设置为null：

var tmp = $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null);
});
tmp = null;

注意：如果与内存泄漏有任何关系，那么它与循环引用有关，将其设置为 null 可以打破循环引用。

如果你有时间发布结果，可以尝试一下。

- Andreas

---

那样做完全没有任何好处。所描述的问题是动画期间的 CPU 负载问题。在动画之后释放 jQuery 对象不会影响动画本身的过程。 - Pointy

所以您可以忽略与内存有关的任何问题。我会深入了解animate函数的实现细节并检查问题，同时确保理解函数/方法契约参数。如果动画在您的应用程序中很重要，我建议寻找专注于动画的JS库。可能有一个jQuery插件或扩展可以更好地处理动画。抱歉没有做什么好事...有时我们需要一个起点，并逐一排除因素，找到达成目标的路径。 - Andreas

Answer 4

最好的方法是使用像http://www.spritely.net/download/这样的插件来实现。

- user289554