元素注入: DocumentFragments与innerHTML

现在假设我们页面中有一个<ul>元素，调用ajax获取json列表，然后使用javascript更新元素内容。通常，程序员会这么写：

    var list = document.queryselector('ul');

    ajaxresult.items.foreach(function(item) {
        // 创建<li>元素
        var li = document.createelement('li');
        li.innerhtml = item.text; 
        // <li>元素常规操作，例如添加class，更改属性attribute，添加事件监听等
        // 迅速将<li>元素注入父级<ul>中
        list.apppendchild(li);
    });

上面的代码其实是一个错误的写法，将<ul>元素带着对每一个列表的dom操作一起移植是非常慢的。如果你真的想要 使用document.createelement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用documentfragement。

documentfragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将documentfragement想象成看不见的<ul>元素，在 dom外，一直保管着你的子节点，直到他们被注入dom中。那么，原来的代码就可以用documentfragment优化一下：

var frag = document.createdocumentfragment();
ajaxresult.items.foreach(function(item) {
    // 创建<li>元素
    var li = document.createelement('li');
    li.innerhtml = item.text;

    // <li>元素常规操作
    // 例如添加class，更改属性attribute，添加事件监听，添加子节点等

    // 将<li>元素添加到碎片中
    frag.appendchild(li);
});

// 最后将所有的列表对象通过documentfragment集中注入dom
document.queryselector('ul').appendchild(frag);

为documentfragment追加子元素，然后再将这个documentfragment加到父列表中，这一系列操作仅仅是一个dom操作，因此它比起集中注入要快很多。

如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建html内容：

var htmlstr = '';

ajaxresult.items.foreach(function(item) {
    // 构建包含html页面内容的字符串
    htmlstr += '<li>' + item.text + '</li>';
});

// 通过innerhtml设定ul内容
document.queryselector('ul').innerhtml = htmlstr;

这当中也只有一个dom操作，并且比起documentfragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入dom更高效。