jQuery CPU 使用率答案

【问题标题】：Jquery CPU usagejQuery CPU 使用率
【发布时间】：2011-02-12 01:59:43
【问题描述】：

我正在使用 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>

【问题讨论】：

真的很危险吗？我从来没有遇到过这样的记忆猪。你使用的是什么浏览器？我无法复制问题。尝试同样的方法，但不要使用 png - 尝试使用 gif/jpg 来代替，看看是否有同样的问题。
他没有说这是一个记忆猪；这不是 100% CPU 利用率的意思。

标签： javascript jquery jquery-animate cpu-usage

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

jQuery.fx.interval = 50;

【讨论】：

【解决方案3】：

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

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

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

试一试，如果你有时间，我想知道结果。

【讨论】：

这不会有任何好处。所描述的问题是动画期间的 CPU 负载之一。动画结束后释放 jQuery 对象不会影响动画本身的进程。
因此您可以忽略与内存相关的任何问题。我将进入动画函数实现细节并检查问题，我还将确保函数/方法合同参数被理解。如果动画在您的应用程序中很重要，我建议四处寻找专注于动画的 JS 库。 jQuery 中可能有一个插件或扩展可以更好地处理动画。很抱歉没有做好事...有时我们需要一个地方开始并在逐个消除因素后找到通往目标的路。

【解决方案4】：

实现这一点的最佳方法是使用插件，例如http://www.spritely.net/download/

【讨论】：