Question

我正在使用Jquery使图像水平滚动浏览我的页面。唯一的问题是它使用了大量的cpu使用。在Firefox中的单核笔记本电脑上高达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>

Answer 1

它占用了CPU资源，因为您要求浏览器在很长一段时间内每秒多次重新绘制图像。那不是免费的。

Answer 2

如果有人在使用jQuery动画时寻找高CPU使用率的解决方案（就像我一样），那么值得注意的是{joo 1.4.3中添加了jQuery.fx.interval因此你可以控制动画间隔率。

使用示例（将其设置为50-70左右使我的动画保持平稳，我注意到CPU使用率下降到大约10-20％）：

jQuery.fx.interval = 50;

Answer 3

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

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

注意：如果这是与内存泄漏有关的任何方式，那么它与循环引用有关通过设置为null，您可以打破它。

尝试一下，如果你有时间发帖，我想知道结果。

Answer 4

实现此目标的最佳方法是使用http://www.spritely.net/download/

等插件

Jquery CPU使用率

4 个答案: