javascript - 为 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 花费更长的时间，但用户将能够继续使用您的网站而不会注意到延迟。