针对 Internet Explorer 进行优化答案

【问题标题】：Optimizing for Internet Explorer针对 Internet Explorer 进行优化
【发布时间】：2010-02-26 14:02:07
【问题描述】：

作为一名网络开发人员，我注意到我创建的任何内容在所有浏览器中都非常出色，但在 Internet Explorer 中总是总是存在速度问题。请注意，我指的是速度，因为我始终注意它在所有浏览器中的显示和工作。

在任何地方，或者有没有人有关于 Internet Explorer 的好的编程技巧？我的意思是如何做事，以便它或多或少地为 Internet Explorer 优化。

我的意思是我的最新示例是我从 DB（通过 AJAX）返回 JSON 数据，然后使用结果构建页面。来自服务器的响应很小，它在aaaaall 浏览器中即时加载，但在Internet Explorer 中需要5-10 秒，具体取决于操作系统和ie 版本。

我说不出话来，我只是想知道我能做些什么。

示例： http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://www.quirksmode.org/dom/innerhtml.html http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

-西奥

【问题讨论】：

好吧，我建议你在 IE 中预览你的设计，然后一旦在 IE 中工作，就很容易让它在 Firefox 或其他任何东西中工作..
我也注意到，当我用 IE 浏览 Gmail 和 Facebook 时，我仍然有类似的问题。
好评论，但我的问题不是它不起作用，而是它在 IE 中总是运行缓慢。
我在 IE 上使用 Gmail 或 Facebook 没有任何问题。也许您安装了有问题的附加组件？我还发现 IE 在使用 jQuery 库进行 AJAX 处理时与其他浏览器的性能非常相似。
再一次，我不是在谈论工作，我是在谈论性能。如果它在所有浏览器中都对您有效，请将您的计算机规格发送给我，以便我得到相同的结果。

标签： javascript html ajax optimization compatibility

【解决方案1】：

简答：不要在 IE 中使用像 document.createElement("div") 这样的 DOM 方法来创建标记。改为使用字符串构建 HTML。

如果您必须使用 DOM 方法，请确保不要多次向页面添加元素。也就是说，创建一个添加所有内容的主容器，然后作为最后一步调用 document.body.appendChild("div") （其中“div”是您的主容器）。这样可以最大程度地减少将要进行的重新渲染。

【讨论】：

另外，也不要多次将字符串作为 innerHTML 添加到页面中。
我会说这绝对是最好的提示，适用于所有浏览器，但特别适用于 IE。这意味着您应该使用某种模板工具，而不是自始至终手动编码字符串连接。一个很好的工具是 code.google.com/closure/templates 。它允许您从 javascript 或从 java 生成 html。像 smarty、velocity、free marker 一样工作。模板的输出是一个js函数，你传入一个数据对象并返回你可以用来设置为innerHTML的html。嵌套模板允许一次调用 innerHTML 以提高性能和代码重用。

【解决方案2】：

您可以使用dynaTrace AJAX Edition 在 IE 中分析您的网站，看看是什么导致它变慢。

【讨论】：

【解决方案3】：

IE 中的 Javascript 性能目前是所有流行浏览器中最差的。使用 IE 作为性能基准的建议是有根据的。我将补充一点，使用公认的 js/ajax 库（jQuery、YUI 等）将确保已经完成了大量特定于浏览器的优化并为您进行了大量测试。

如果你在你的 web 应用程序中做了大量的自定义 js 并且只是在寻找一些最佳实践，我可以推荐几个网站：jspatterns.com、IE + JavaScript Performance Recommendations。这是为普通js zen插入Douglas Crockford's Javascript: The Good Parts的好机会。

【讨论】：

您好，我使用 mootools 并且已经拥有这本书。今晚我将重新开始阅读它，谢谢。将检查链接

【解决方案4】：

任何 DOM 操作总是代价高昂（添加元素，删除元素）。因此，您实际上可以通过在页面上保留隐藏元素并在其中调整可见性来最小化可以完成的 DOM 操作。

我认为this 值得一游。

【讨论】：

【解决方案5】：

在 IE 6 中构建页面时，我遇到了类似的问题，并最终进行了纯字符串连接以使性能可以接受。我第一次尝试使用 jquery（当时是 1.2.6）来构建元素并添加属性，但事实证明它太慢了。手动将 html 构建为字符串，然后在元素上设置 innerHtml 属性以显示表格要快得多。 jQuery 1.4+ 相对于 IE6 要快得多，所以这可能不再适用了。

在 for 循环中使用中间字符串似乎也可以提高性能，即不要只在一个大字符串上使用“+=”。在 for 循环中有一个表行的字符串，并将其附加到每个循环的大字符串中。这可能是值得尝试的。

我在 IE6 的性能方面也遇到了 2 个问题： - 在 IE6 中切换 css 类比较慢，最好在元素的 style 属性中设置背景颜色等。 - 如果您在表格中的 tr 或 td 标记上进行鼠标悬停，这将在除 IE 之外的所有其他浏览器中正常工作。您必须在表格级别处理 mouseover 和 mouseout 事件，并找到作为事件源的 tr 或 td 标记并在此时执行任何行为。

【讨论】：