前言

提到前端性能优化，相信你已经听说过一个结论：尽量少地操作 DOM，包括 Vue 在官方文档中也提到该问题。

因为 DOM 的重新渲染会重新生成页面上的 DOM 节点树，并导致触发布局重排、样式重绘等高性能消耗的操作，从而大幅度降低页面渲染性能（详细过程可以了解另外一篇文章：https://blog.csdn.net/weixin_42678675/article/details/117113450）

今天将采用文档碎片的方法，在必须使用 DOM 操作的情况下，可以尽量少地操作 DOM。

示例

1）不使用文档碎片的写法

正常写法中，每循环一次，就会触发一次 DOM 操作，当循环次数多了之后，性能将大幅下降

const list = document.getElementById('list')
				
for(let i = 0;i<10;i++){
	const item = document.createElement('li')
	item.innerHTML = `列表${i}`
	list.appendChild(item)
}

2）使用文档碎片的写法

注意 每循环一次，将 DOM 节点新增到文档碎片中时，此时页面上仍未渲染；需要将文档碎片进行 appendChild 操作，才能将文档碎片中的 DOM 渲染出来

const list = document.getElementById('list')
// 创建文档碎片对象				
const fragment = document.createDocumentFragment()
				
for(let i = 0;i<10;i++){
	const item = document.createElement('li')
	item.innerHTML = `列表${i}`
    // 将新建的DOM节点加入到文档碎片对象，此时页面上还未渲染出 li
	fragment.appendChild(item)
}
// 将文档碎片中的所有DOM一次性渲染出来				
list.appendChild(fragment)

3）简单理解

正常操作DOM的情况，就像每当外卖员接到一单，就会去送一单，中途不再接新的订单，直到一单送完再送另外一单；

而使用文档碎片，相当于外卖员会同时收下几个时间和地点都相近的订单，一次性进行派送，大大加快了派送效率。