html - 为什么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，即使它仍然不完美。