显示动画 GIF 图像后 Internet Explorer CPU 使用率变高答案

【问题标题】：Internet Explorer CPU usage goes high after an animated GIF image has been displayed显示动画 GIF 图像后 Internet Explorer CPU 使用率变高
【发布时间】：2011-10-09 01:58:35
【问题描述】：

我已经做了一段时间的 web 应用程序，确实注意到很久以前 CPU 使用率有点高，但是开发已经停止了一段时间。

最近我又开始开发了，发现一个GIF动画图片作为背景图片显示后CPU使用率变高了。

我使用 Ajax 更新内容并将 CSS 类应用于元素以显示加载指示器。内容加载完成后，我删除了 CSS 类。如果我注释掉包含 GIF 的样式表中的类，一切看起来都很正常。

我已经在 Internet Explorer 7 和 Internet Explorer 8 中对其进行了测试。

可以做些什么来缓解这个问题？

var blabla = function() {
    var element = $('id of element');
    element.addClassName('a css classname');

    new Ajax.Request({some parameters},
        onSuccess: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onFailure: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onComplete: function() {
            element.removeClassName('a CSS classname');
            ....
        }
    }
}

【问题讨论】：

好吧，动画不可避免地会占用 CPU 周期。使用率到底有多高，电脑有多强大？
您没有发布任何代码或描述任何关于动画的有意义的内容，尽管我可以理解动画背景会导致 CPU 使用率高，具体取决于 PC。据推测，整个窗口必须连续多次重绘自己。
我说的是动画被移除之后。小图像〜20x20px。 CPU大约是20%。在不同的电脑上也一样。代码无非就是 $('id').addClassName('loading_indicator');和 $('id').removeClassName('loading_indicator');我正在使用原型。
这只是一个猜测：无论动画多么小，如果它被设置为整个背景，整个窗口必须重新绘制自己，尽管看起来效率很低。如果与动画背景无关，那么您的问题具有误导性且不完整。也许发布所有相关代码以及页面链接，以便人们可以在这里实际做一些事情。
在图像也被移除后，窗口是否必须重新绘制自身？

标签： html css internet-explorer-8 internet-explorer-7

【解决方案1】：

此问题可能与 Internet Explorer 如何加载 CSS 类所需的数据有关。我是否可以建议另一种方法：不要使用 CSS 类中包含的加载动画，只需将 .gif 放在可见的 <img> 标记中直接放入 HTML 中。然后，当onSuccess或其他方法被调用时，你就可以运行了：

$("#ajax-gif").hide();

【讨论】：

【解决方案2】：

正如已经评论过的，它看起来与 GIF 图像本身没有任何关系，尤其是 20x20 像素的图像。

如果您正在使用 GIF 图片更改页面的背景，则必须在一定程度上重新绘制其顶部的内容。

要降低 CPU 使用率，要么在更改背景之前减少页面上的内容，要么停止使用 GIF 图片，现在是 2011 年！

【讨论】：

只是好奇：gif 的替代品是什么？
@Vercas -- 很高兴知道 -- 从未尝试过。 APNG 看起来只有 GIMP 通过插件支持，但可能没什么大不了的——老实说，我担心你在建议 Flash——你知道移动设备（iPhone/Pad、Android）是否支持 APNG？跨度>
@Vercas -- 查看维基百科，en.wikipedia.org/wiki/APNG#Application_support Safari 和 IE 看起来并不支持 APNG，Chrome 开箱即用也不支持 -- 所以鉴于“它一直有效为你”这是否意味着你只是在为 Firefox 开发，或者维基百科中的表格已经过时了？

【解决方案3】：

如果这个问题只出现在 Internet Explorer 中，那确实是Barnzy's answer 的评论者所说的重绘问题。它也应该在其他浏览器中产生类似的问题。

一种解决方案是使用 JavaScript onload 事件处理程序将所有 GIF 图像预加载到 DOM 中，这将减少重绘的需要并且应该停止增加 CPU 周期。

我同意在 2011 年使用 GIF 图像可能不是网页设计的最佳方法。

【讨论】：