元素注入: DocumentFragments与innerHTML

现在假设我们页面中有一个

元素，调用ajax获取json列表，然后使用javascript更新元素内容。通常，程序员会这么写：

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

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

上面的代码其实是一个错误的写法，将

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

documentfragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将documentfragement想象成看不见的

元素，在 dom外，一直保管着你的子节点，直到他们被注入dom中。那么，原来的代码就可以用documentfragment优化一下：

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

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

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

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

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

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

var htmlstr = '';

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

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

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