一次性插入多个 DOM 节点，考虑性能

DOM 性能

• DOM 操作非常“昂贵”，避免频繁的 DOM 操作
• 对 DOM 查询做缓存

// 不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {}
// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length
for (let i = 0; i < length; i++) {}

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

const list = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
for (let i=0; i< 10; i++){
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`
    // 先插入到文档片段中
    frag.appendChild(li)
}
// 都完成后，再统一插入到 DOM 结构中
list.appendChild(frag)