DOM性能

1、dom查询做缓存

2、将频繁操作改为一次操作

//频繁操作
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)
}

//一次操作
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)
}
list.appendChild(frag)