简单其实不简单

innerHTML操作的改进

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

看看上面的代码，对平常我们用的innerHTML做了些许改进，不管在用处上还是浏览器呈现上都有所进化。

• 使用setTimeout防止出现浏览器堵塞现象（及长时间没反应，突然一下子呈现的现象）
• 使用DocumentFragment提升效率

再来看下它的作用吧

var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
    // You can treat 'fragment' as a regular node.
    document.body.appendChild(fragment);
});

我想这已经很明了了，这函数强于 string 转 DOM 并得到转化后的DOM对象，做点记录方便以后使用吧！

这函数的出处看这里