Question

我已经在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');
            ....
        }
    }
}

Answer 1

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

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

Answer 2

如上所述，看起来它与GIF图像本身没有任何关系，尤其是20x20像素的图片。

如果您要更改带有GIF图像的页面背景，则必须在一定程度上重绘其上的内容。

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

Answer 3

如果此问题仅发生在Internet Explorer中，则确实是Barnzy's answer的评论者所讨论的重绘问题。它应该在其他浏览器中创建类似的问题。

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

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

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

3 个答案: