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

我试图对节点的innerHTML设置一个巨大的（200K）响应。目标是在InternetExplorer6中获得比2.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将以纯文本显示，就像使用

和

一样，这不会加快修改速度，但会阻止浏览器锁定用户；他们可以在后台继续使用该页面：

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.
});

var allTheHTML='……'；
asyncInnerHTML（所有HTML，函数（片段）{
myTarget.appendChild（片段）；//myTarget应该是元素节点。
});

---

这项技术将比普通的

innerHTML

花费更长的时间，但是用户将能够继续使用您的站点而不会注意到延迟。

首先，我将确保您的HTML尽可能简单。尽可能减少结构标记。在任何地方使用CSS，包括它的层叠特性，这样就不会在任何地方设置类属性，等等

然后尝试进一步研究每个浏览器的最佳方法。例如，有些方法通过构建DOM对象做得更好，有些方法将所有DOM对象设置为单个非树DOM节点的innerHTML，然后将其添加到树中，等等。我建议您阅读

---

您可能还希望使用JimmyP建议的脚本来添加块，这样浏览器UI就不会挂起。尽管如此，您不希望将其分割得太多，否则在不需要刷新页面时，您将不必要地触发太多页面刷新。

对于较大的HTML负载，您将面临IE 6中“操作中止”错误的风险。花些时间检查以下StackOverflow问题，因为使用innerHTML更新DOM时会出现错误，而到目前为止，MS还没有一个完整的修复程序：

---

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

样式与CSS（不要将XML与XSLT结合使用，这可能会导致解析/构建速度更慢）

---

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

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

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

看看其他事情，比如任何可以简化的循环，等等，但听起来确保数据准备就绪，确保数据可以有效地跨线发送将是最有帮助的

---

如果IE是局外人，而所有其他浏览器都运行良好，那么您可能需要继续前进。你能做的只有这么多，但我怀疑这不是主要问题。

在不知道你想做什么以及如何做的情况下，很难发表评论。发布你的代码。很难发布所有代码。。它真的很大，在js类的很多地方都有分布。。。但意义在于，如果我们对添加的内容有更好的了解，那么我们可以提供更好的解决方案。例如，如果你添加了一堆列表项，那么这可以在不破坏页面布局的情况下递归完成。内容非常混乱。）我不能依赖它的结构，真的。它由许多类型的html块（块、div的表跨度…等等）组成，因此没有快速的方法。我本来打算建议把它拆分一下，但既然没有语义结构，那几乎是不可能做到的；它可能是原始OP想要添加的HTML标记。是的，它应该被解析为domNice链接-post很有趣。是的，HTML非常复杂，“target”标记有9级层次结构。我刚才在想：什么dom事件会导致innerHTML设置？如果尝试向select元素添加选项，则它不适用于

select

。