分类
默认

一次性插入多个 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)