Question

我正在尝试对节点的innerhtml设置一个巨大的（200K）响应。目标是在Internet Explorer 6中获得比2.7秒更好的时间。有什么想法吗？

由于

Answer 1

这不会让它发生得更快，但它会阻止浏览器锁定用户;他们可以在后台发生这种情况时继续使用该页面：

function asyncInnerHTML(HTML, callback) {
    var temp = document.createElement('div'),
        frag = document.createDocumentFragment();
    temp.innerHTML = HTML;
    (function(){
        if(temp.firstChild){
            frag.appendChild(temp.firstChild);
            setTimeout(arguments.callee, 0);
        } else {
            callback(frag);
        }
    })();
}

使用它：

var allTheHTML = '<div><a href="#">.............</div>';
asyncInnerHTML(allTheHTML, function(fragment){
    myTarget.appendChild(fragment); // myTarget should be an element node.
});

此技术需要比普通 innerHTML 更长的时间，但用户可以在不注意延迟的情况下继续使用您的网站。

Answer 2

首先，我会确保您的HTML尽可能简单。尽可能减少结构标记。在任何地方使用CSS，包括其级联功能，因此您不会在任何地方设置类属性等。

然后尝试进一步研究每个浏览器的最佳方法。例如，有些人通过构建DOM对象做得更好，有些人将它们全部设置为单个非树DOM节点的innerHTML，然后将其添加到树中等等。我建议你阅读Quirksmode.org's Benchmark - W3C DOM vs. innerHTML。

您还可能希望使用JimmyP建议的脚本添加块，因此浏览器UI似乎不会挂起。虽然，您不希望将其拆分太多，或者在您不需要时会不必要地触发过多的页面刷新。

Answer 3

为什么不以json格式提供响应并在客户端处理它，例如here每次更改任何导航选项时都会驱动大量数据，并且所有行都由客户端呈现。

Answer 4

使用大量HTML有效负载时，您将面临IE 6中“操作已中止”错误的风险。花一些时间查看以下StackOverflow问题，因为使用innerHTML更新DOM时出现错误，而MS到目前为止没有一个完整的解决方案：

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

Answer 5

使HTML尽可能简单，或使用具有最短元素/属性名称的XML。

使用CSS的样式（不要在XSLT中使用XML，最终解析/构建可能会更慢）。

不幸的是，不同浏览器中的XML处理不兼容。

Answer 6

确保您的JSON / HTML /纯文本尽可能简单。最简单的解决方案是减少工作量，但如果确实需要流式传输200k，请确保压缩到浏览器的传输，这应该可以在您的应用和/或Web服务器中进行配置。 Gzip'ping内容（假设您正在使用AJAX友好的服务）确实有所帮助，尤其是简单的文本。

看看其他东西，比如任何可以简化的循环等等，但这听起来好像确保数据准备好并确保数据可以有效地通过网络发送将是最有帮助的。

如果IE是异常值且所有其他浏览器都运行良好，您可能需要继续。你可以做的只有这么多，但我怀疑这不是主要问题。

Answer 7

我听说innerText比IE中的innerHTML快两倍。但不确定这是否属实，但可能值得一试。

if (window.ActiveXObject) { // we're using IE
    document.getElementById('myElement').innerText = 'Bla bla bla bla';
    // or create a textnode:
    var txt = document.createTextNode('Lorem ipsum');
    document.getElementById('myElement').appendChild(txt);
} else {
    // other code here
}

更新：请注意，如果您要修改myElement的HTML，请不要使用innerText - HTML将以纯文本形式显示，就像您正在使用<和>。

在为innerHTML设置大值时提高性能的方法

7 个答案: