javascript之文档碎片，文档碎片提高DOM操作的执行效率

1.文档碎片可以提高DOM操作性能

2.文档碎片原理

      减少对DOM 修改带来的的回流操作。

3.什么是回流操作

举个粗俗简单的例子：

比如一个人去商场买醋、白酒、盐。

他有两种做法：

(1)一次性去商场把这三样东西都买回家，这样来回也就是2趟；

(2)可以是买一样东西就拿回家，然后又回去买第二样东西，接着又回去买第三样东西，显示这样来回是要6趟。

显然后者是神经病。

这个例子想表达的这就是回流操作，来来去去。

 

理论说完了我们看一下代码

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
</table>

我现在要向 tbody 里面动态的插入数据

 let arr = [
            {
                name:'Rose',
                gae:18,
                gender:'男'
            },
            {
                name:'Tom',
                gae:20,
                gender:'女'
            },
            {
                name:'Jack',
                gae:22,
                gender:'男'
            },
        ]

我们把数据先写好

然后在创建一个文档碎片 并且找到tbody

 let box = document.createDocumentFragment()

 let tBody = document.querySelector('tbody')

 // 循环遍历数组
        for ( let i = 0; i < arr.length; i++ ){
            let tr = document.createElement('tr')
            if ( i % 2 === 0 ) {
                tr.style.backgroundColor = 'skyblue'
            }else{
                tr.style.backgroundColor = 'pink'
            }
           for( arrt in arr[i] ){
               let td = document.createElement('td')
               td.innerText = arr[i][arrt]
               tr.appendChild(td)
           }
           box.appendChild(tr)
        }
        tBody.appendChild(box)

其实这样就可以了，我们在循环的最后添加元素是添加到文档碎片当中去的，然后才一次性的从文档碎片中把元素添加到页面中