一次性插入多个节点，如何优化 DOM 操作的性能？

缓存 DOM 查询结果：

//不缓存 DOM 查询结果
for(let i=0; i < document.getElementsByTagName('p').length; i++) {
	//每次循环都会计算 length，频繁进行 DOM 查询
}

//缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length;
for(let i = 0; i<length; i++) {
	//缓存 length，只进行一次 DOM 查询
}

将频繁操作改为一次性操作：

频繁操作：

const list = document.getElementById('list')

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

使用 document.createDocumentFragment() 创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到页面中，减少页面渲染 Dom 的次数。

document.createDocumentFragment()：创建一个 DocumentFragment 对象，该对象并不是真实 DOM 树的一部分，而只是存在于内存中。最常用的方法就是当要向 document 中添加大量节点时，就可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到 document 中。

const listNode = document.getElementById('list')

//创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()

//执行插入
for(let x=0; x<10; x++) {
    const li = document.createElement('li')
    li.innerHTML = 'List item'  + x
    //先插入文档片段中
    frag.appendChild(li)
}

//都完成之后，再插入到 DOM 树中
listNode.appendChild(fag)