本文已参与「新人创作礼」活动，一起开启掘金创作之路
每一次对DOM 操作都发生了 "重排", 这严重消耗性能。 一般通常的做法是减少dom 操作， 减少发生重排的做法。
什么是文档碎片？，文档碎片可以干嘛？
什么是文档碎片？ document.createDocumentFragment()，它相当于一个容器，用于暂时存放创建的dom元素。
文档碎片有什么用？ 将需要添加的大量元素 先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大 减少dom操作，提高性能（IE和火狐比较明显） 文档碎片就类似于一个小型的dom，插入到dom中时速度会更快。
在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更 新，一条条循环插入也会运行很好
但是，如果当我们要向document中添加大量数据时(比如10w条)，如果像上面的代码一样，逐条添加节点，就会添加十万次，这个过程就可能会 十分缓慢。 为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附 加在它上面，然后再一次性添加到document中，使用文档碎片的方法就只需要添加一次，大大减少DOM 操作， 提高性能。
文档碎片的使用方法：
let element = document.getElementById('ul')
let fragment = document.createDocumentFragment()
let list = ['111', '222', '333', '444', '555']
browsers.forEach(function(browser) {
var li = document.createElement('li')
li.textContent = browser
fragment.appendChild(li)
})
element.appendChild(fragment)
