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

Question

我们开发了一个Web应用程序，它在一个有点奇特的桌面界面中显示了相当多的数据。我无法显示页面，但它有一个很大的表，在一个固定的定位元素内，有一些图像（大多数图标小于2KB，PNG具有alpha透明度，并且不超过30个不同的图像）。

页面中的元素少于1000个，并不重。它主要是在Chrome中开发的，在Chrome中运行完美。和IE11，以及IE10。

但是当谈到IE9时，发生了这个： 是的，这是IE11，因为它提供了不错的分析工具。我正在使用IE9仿真，但IE9在IE9模式下也会出现同样的无响应现象，并且“本机”IE9会出现高CPU使用率 - 但内存使用率很高。

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

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

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

在IE9（以及部分IE8）中可能导致这种奇怪行为的原因是什么？

Answer 1

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

这似乎是与动画GIF相关的问题。无论是<img>元素，还是设置为背景图像，还是作为伪元素的内容，即使从DOM中删除它，浏览器仍然重新绘制相同的部分页面。

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

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

所以......小心旋转器。和IE9。

解决方案

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

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

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

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