创建文档碎片优化DOM插入操作

有一段HTML字符串，想插入到页面中，通常来讲要如下几个步骤才能完成:

//创建节点
var oDiv = document.createElement("div");
//装载字符串
oDiv.innerHTML = html;
//获取生成的节点
var nodes = oDiv.childNodes;
//把新生成的节点插入到文档的#container元素中
var container = document.getElementById('container');
for (var i=0, length=nodes.length; i<length; i+=1) {
   container.appendChild(nodes[i].cloneNode(true)); 
}

上面的每次循环都会导致浏览器的回流和重绘,所以应该把这些节点变成一个节点再append

var oDiv     = document.createElement("div"),
    nodes    = null,
    fragment = document.createDocumentFragment();// 创建一个文档片段
oDiv.innerHTML = html;
nodes = oDiv.childNodes;
//把新增的节点先暂存到片段中
for (var i=0, length=nodes.length; i<length; i+=1) {
    fragment.appendChild(nodes[i].cloneNode(true));
}
//只用一次append,减少了回流和重绘的次数
var container = document.getElementById('container');
container.appendChild(fragment);

最新的浏览器已经有现成的方法可用了

var container = document.getElementById('container');
container.insertAdjacentHTML('beforeEnd', html);//append
container.insertAdjacentHTML('afterBegin', html);//prepend