首页 » 文章 » 文档 » js web api问题 » 一次性插入多个 DOM 节点,考虑性能

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

»js web api问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top