提升性能-文档碎片

概念性解释：dom规定，文档碎片（document fragment）是一种“轻量级”的文档，不会像完整的文档那样占用额外的资源。我们叫他DocumentFragment节点，nodeType值为11，

而我们用文档碎片可以提升dom操作的性能。看看下面的例子就知道。

问题

<!--给id为 "u" 的<ul>元素里面添加10个<li>元素-->
<ul id="u"></ul>

通常解法：

var u = document.getElementById('u');
for(var i = 0; i < 10; i++){
var l = document.createElement('li');
l.innerHTML = "创建的li元素" + i;
u.appendChild(l);
}

我们用这样的方法很快就得到了效果，但是仔细审视，发现我们对dom操作的10次，不断的向 ul 创建 li ，就引发了10次dom“重绘重排”,这样也是我们不愿意看到的，太消耗时间了

优化解法-利用文档碎片

var u = document.getElementById('u');
var dFrag = document.createDocumentFragment();
for(var i = 0; i < 10; i++){
var l = document.createElement('li');
l.innerHTML = "创建的li元素" + i;
dFrag.appendChild(l);
}
u.appendChild(dFrag);

我们先创建一个文档碎片节点dFrag，然后我们将以后创建好的li全部都添加到dFrag里面，最后在把dFrag添加到 ul 中，这个时候我们就只引发了一次dom“重绘重排”，性能就提升了。

注意，u.appendChild(dFrag);这句话的意思是，将文档碎片dFrag中的子节点删除并转移到 ul 中。