innerHTML添加大量节点优化

这里有个需求.就是如果有很大量的html元素用innerHTML加载到页面中尤其在IE6下会很慢.甚至假死.该怎么解决.JAMES PADOLSEY 给了一个很好的解决方法.

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 htmlStr = '<div><p>...</p><p>...</p></div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment) {
    document.body.appendChild(fragment);
});

这里主要思路就是:

通过递归temp里的firstChild结点.不断的添加转移到FragMent结点中.直到temp.firstChild为null(即转移完毕**因为添加的是结点引用所以用appendChild添加的时候temp里的结点会不断减少.需注意).

当全部添加完毕的时候调用回调函数.可以执行将FragMent添加到body或其他的自定义操作.

这样就可以避免一次添加大量节点.很巧妙.

 

 

下面是一些相关有用的链接:

http://james.padolsey.com/javascript/asynchronous-innerhtml/

http://www.quirksmode.org/dom/innerhtml.html#t13 

http://ejohn.org/blog/dom-documentfragments/