Web前端性能优化——DocumentFragment或innerHTML取代复杂的元素注入

DOM 操作对于前端性能的影响是举足轻重的，如何减少 DOM 节点的创建以及快速注入是特别重要的。

假设页面中有一个 <ul> 元素，需要动态创建多个 <li> 子节点，常规的写法是

var list = document.getElementsByTagName("ul");
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //对 li 进行操作，如添加属性，插入子节点，添加事件监听等
    list[0].appendChild(li);
}

这段代码的性能是非常差的，每一次的循环都要对 DOM 进行一次插入操作，这时应该考虑使用 DocumentFragment。

DocumentFragment 文档片段，可以包含和控制节点，但是不会占用资源，文档片段中的节点并不会存在于 DOM 树中。

var list = document.getElementsByTagName("ul");
var frag = document.createDocumentFragment();
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //对 li 进行操作，如添加属性，插入子节点，添加事件监听等。
    frag.appendChild(li);
}
list[0].appendChild(frag);

另外一种优化的方法就是使用 innerHTML：

var listStr = "";
for(var i = 0 ; i < 5 ; i ++){
    listStr += "<li>" + i + "</li>";
}
document.getElementsByTagName("ul")[0].innerHTML = listStr;

这样的方式比起 DocumentFragment 的代码量更少。

但是两种方法比起每次循环都注入HTML元素是更加高效的。

参考：http://www.gbtags.com/gb/share/1215.htm