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

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的Benchmark - W3C DOM vs. innerHTML.

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

Answer 3

我听说这比IEinnerText快两倍。innerHTML虽然不确定这是否属实，但可能值得一试。

\n\n

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

\n\n

更新：请注意，如果您想修改 的 HTML myElement，请不要使用innerText\xe2\x80\x93，HTML 将以纯文本形式显示，就像您使用<和 一样>。

\n