js中文档碎片createDocumentFragment的应用

1、什么是文档碎片

document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

2、作用

js中操作dom是一个非常消耗性能的过程，在某些情况下，不得不进行dom循环操作，我们每次对dom的 操作都会触发“重排（重新渲染界面，发生重绘或回流）”，这非常影响到能耗，所以我们一般都会尽量减少对dom的操作来减少“重排”。
需要动添加大量元素时，先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少了dom操作，提高了性能

3、示例应用

普通写法（操作100次dom）

    for (let i=0;i<=100;i++){
        //创建一个div节点
        let elem=document.createElement('div');
        //将节点添加到body中
        document.body.appendChild(elem);//进行了100次添加dom节点操作
    }

使用文档碎片（操作1次dom）
先将dom暂存在文档碎片中，然后在一次性操作dom

    //    创建一个文档碎片
    let df = document.createDocumentFragment()
    for (let i = 0; i <= 100; i++) {
        //创建一个div节点
        let elem = document.createElement('div');
        //将节点添加到body中
        df.appendChild(elem);//将创建的节点添加到文档碎片中
    }
    //循环完后，将文档碎片添加到body中,只进行了一个添加dom操作
    document.body.appendChild(df);