带有 HTML5（Stepcarousel）的网站在 IE 中速度慢？答案

【问题标题】：Website with HTML5 (Stepcarousel) slow in IE?带有 HTML5（Stepcarousel）的网站在 IE 中速度慢？
【发布时间】：2012-05-11 19:39:48
【问题描述】：

请在 IE 和 Chrome/Firefox 中查看此页面：http://goo.gl/kR2Cv

在 Chrome/Firefox 中它加载速度很快并且工作正常，但在 Internet Explorer 中它加载很慢并且非常滞后。在页面中，我使用 HTML5 和 jquery/stepcarousel 以及很多图像。整个网站只是一个 html 页面。

我不明白为什么它在 Chrome/Firefox 中运行良好，但在 Internet Explorer 中却不行？谁能向我指出这一点并帮助我解决问题？

谢谢。

【问题讨论】：

【解决方案1】：

Internet Explorer 在版本 9 之前有一个众所周知的残暴引擎。除了在支持现代标准方面远远落后之外，它也非常缓慢。然而，版本 9 及更高版本已显着改进，因此，您的网站在 IE9、Firefox 和 Chrome 中运行同样流畅。但是，在 IE8 中，它的运行速度非常慢。

如果您想支持 IE8，也许您可以为这些用户选择一个不太注重效果的设计，以保持最佳性能。

【讨论】：

【解决方案2】：

您的网站方式太重了。它接近 3mb，在 Chrome 上加载需要 12 秒（10mbps 连接）。您应该避免下载所有这些背景图片，直到需要它们，并优化它们（使用 ImageOptim、PunyPNG 或类似的，您将不得不为 JPEG 牺牲一点质量）。在主页上争取

较旧的 IE 版本的并行下载限制低于现代浏览器，并且可能会因加载的图像数量而窒息。

【讨论】：

感谢您的回答。我会尝试优化图像。
我已经尝试对它们进行更多优化，但是当我这样做时它们看起来像 sh*t。所以我把它们改回来了。图像已经非常优化。问题是当您进入网站时必须加载 36 张图片（每张 90-130kB）。那么你知道如何让背景图片在需要时才加载吗？
@StreamAlex 让它们远离 HTML，并在您转到相关部分时通过 javascript（使用 css 类或 data-* 属性）添加它们。见：stackoverflow.com/questions/2396909/…

【解决方案3】：

IE8 需要大量的 HTML 才能同时移动。那是一个表格布局可能没有帮助。表格往往会触发更多的回流计算。

这里有很多关于这个主题的好建议：

【讨论】：

【解决方案4】：

由于连接速度较慢，FF 加载页面的速度比 IE9 快十倍。我认为您的文件格式有问题。下面的代码是您代码中的一个 sn-p：

确保以DOS/Windows 或ANSI-mode 保存文件。

【讨论】：