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

概述我们开发了一个Web应用程序,它在一个有点花哨的表格界面中显示了相当多的数据.我无法显示页面,但它有一个很大的表,在一个固定的定位元素内,有一些图像(大多数图标小于2KB,PNG具有alpha透明度,并且不超过30个不同的图像). 它并不重,页面中的元素少于1000个.它主要是在Chrome中开发的,在Chrome中运行完美.和IE11,IE10. 但是当谈到IE9时,会发生这种情况： 是的,这是 我们开发了一个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)的奇怪行为？

解决方法 经过大量调查,我认为我找到了罪魁祸首.

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

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

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

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

解

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

如果你必须在IE9中显示一个微调器,你可以使用一个小的,或静态的图像.唉,你必须自己制作动画,因为IE9@R_301_6963@CSS动画.而且你也不能依赖requestAnimationFrame,只需要setInterval.

我希望你能利用jquery.我不能……

出于某种原因,ie8更好地处理动画GIF,即使它仍然不完美.

总结

以上是内存溢出为你收集整理的HTML – 为什么IE9不断重新绘制页面,导致无响应？全部内容，希望文章能够帮你解决HTML – 为什么IE9不断重新绘制页面,导致无响应？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。