DOM操作性能

DOM是树结构

• property: 修改对象属性，不会体现到html中（通过style改变节点的样式，不会加入html行内样式）
• attribute: 修改html属性，会改变html结构（setattribute,getattribute)
• 两者都有可能会引起DOM重新渲染

DOM操作非常昂贵，很耗费性能，要避免频繁的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++) {

}

const ListNode = document.getElementById('list')
for(let i = 0; i < 10; i++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${i}`
  //每次都加去，很耗性能，一次性加入节省性能
  ListNode.append(li)
}

创建一个文档片段，此时还没有插入到Dom中,要知道如何创建文档片段

const listNode = document.getElementById('list')
  
  //创建一个文档片段，此时还没有插入到Dom中
  const lis = document.createDocumentFragment()
  for(let i = 0; i < 10; i++) {
    const li = document.createElement('li')
    li.innerHTML = `list item ${i}`
    //每次都加去，很耗性能，一次性加入节省性能
    lis.append(li)
  }
  listNode.append(lis)