文档碎片的应用

文档碎片对浏览器性能的提升

---

每次对dom的操作都会触发”重排”（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少”重排”

---

一、向body中插入一百个元素

这里我们用网上众所周知的插入100个元素的例子

第一种方法：

for(var i = 0;i < 100;i++){
    let div = document.createElement('div')
    document.querySelector('body').appendChild(div)
}
//这里for循环了100次 进行了一百次的dom操作

第二种方法：

let div = ''
for(var i = 0;i < 100;i++){
    div += '<div></div>'
}
document.querySelector('body').innerHTML = div
//这里的方法相比于第一种性能提升不止一点半点 不失为一种好办法

第二种方法：

let Frag = document.createDocumentFragment()
for(var i =0;i<100;i++){
    let div = document.createElement('div')
    Frag.appendChild(div)
}
document.querySelector('ul').appendChild(Frag)

二、文档碎片

把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点
这使得DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点
当文档碎片插入完自动会被销毁碎片内容

let Frag = document.createDocumentFragment()
for(var i =0;i<100;i++){
    let div = document.createElement('div')
    Frag.appendChild(div)
}
document.querySelector('ul').appendChild(Frag)
Frag.appendChild(document.querySelector('ul'))

如果将文档中的节点添加到文档碎片中，就会从文档中移除该节点，也不会从浏览器再看到该节点，添加到文档碎片的新节点也不属于文档树