为什么IE9不断重绘页面，导致无响应？

Question

我们开发了一个 Web 应用程序，该应用程序在一个带有表格的有点花哨的界面中显示了相当多的数据。我无法显示该页面，但它有一个相当大的表格，在一个固定位置的元素内，有一些图像（大多数是小于 2KB 的图标、具有 alpha 透明度的 PNG，以及不超过 30 个不同的图像）。

它并没有那么重，页面中的元素少于 1000 个。它主要是在 Chrome 中开发的，并且在 Chrome 中可以完美运行。还有 IE11 和 IE10。

但在 IE9 中， 发生了： 是的，这就是 IE11，因为它提供了不错的分析工具。我正在使用 IE9 仿真，但在 IE9 模式下的 IE10 和“本机”IE9 也会出现同样的无响应，CPU 使用率很高 - 但内存使用率稳定。

以更轻松的方式，它也发生在 IE8 中： 但是重绘花费的时间要少得多（也许它会重绘页面的较小部分？）并且响应能力没有受到影响。

如您所见，没有脚本在运行，只是一些随机垃圾收集。在 IE10、IE11 和 Chrome 中不涉及重绘。

如果我禁用图像（在 IE10 中执行此操作，不知道如何在 IE11 中执行此操作），IE9 不会继续重新绘制，但是如果我通过禁用或隐藏所有图像它不断占用 CPU 的样式表。正如预期的那样，禁用硬件加速会使事情变得更糟。

什么可能导致 IE9（和部分 IE8）出现这种奇怪的行为？

Answer 1

经过大量调查，我想我找到了罪魁祸首。

这似乎是与动画 GIF 有关的问题。无论是<img> 元素，还是设置为背景图像，或作为伪元素的内容，即使从 DOM 中移除后，浏览器继续重新绘制页面。

这可能是一项非常密集的任务，不仅在较旧的计算机中，尤其是在使用较大的 GIF 时。但即使使用较小的，如果 GIF 用作背景图像或伪元素，IE9 会重绘元素的整个区域，而不仅仅是图像的区域。 p>

这就是为什么它不断地在屏幕截图中重新绘制 1750x1051 像素的巨大区域。 我只是用了一个糟糕的 64x64 微调器！

所以...当心旋转器。还有 IE9。

解决方案

我还没有找到一个简单而明确的解决方案（除了完全放弃 IE9）。首先要避免在背景图像和伪元素中使用动画 GIF。

如果您必须在 IE9 中显示微调器，您可以使用小的微调器或静态图像。唉，你必须自己制作动画，因为 IE9 不支持 CSS 动画。你也不能依赖requestAnimationFrame，只能依赖setInterval。

我只是希望你能利用 jQuery。我不能...

出于某种原因，IE8 对动画 GIF 的处理要好得多，即使它仍然不完美。