异步处理节点innerHTML

innerHTML这个方法在很多时候都非常好用，尽管在不同的浏览器中有些这样或者那样的问题；有时，假设你现在需要处理一个innerHTML值较大的节点，（PS：一般来说，我们应该尽可能的使innerHTML as simple as possible；），尤其在IE6中，如果处理大节点的innerHTML有可能使得浏览器处于假死状态，下面就是一种处理前面提到的那种“确实需求”的方法：

//基本上原理就是把将要处理的HTML切割成单个的simple节点，然后不断的设置新的定时器，这样能在javascript线程空闲的时候执行；HTML就是要处理的htmlStr；
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 {
//回调函数，一旦参数HTML切割并全部加入到frag完成之后执行；
            callback(frag);
        }
    })();
}

使用方法如下：

var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
//arguments[1]即是回调函数；按照这种以片段文档append方法，也可以尽可能减少reflow的次数；
    document.body.appendChild(fragment);
});

不过，很重要的一点就是：这种方法本身并不能比使用innerHTML方法更快，只是能防止浏览器因此挂起；客户端可以继续浏览页面不受其影响；

当然，回到innerHTML这个方法，其实因为不同浏览器的原因，有时，使用DOM原生方法创建也许更快，有时，先用innerHTML之后使用createDocumentFragment的方法更好，可以参考这篇文章。