首页 > 其他 > 详细

DOM操作性能

时间:2021-04-10 22:57:18      阅读:26      评论:0      收藏:0      [点我收藏+]

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)

DOM操作性能

原文:https://www.cnblogs.com/wang--chao/p/14641652.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!