码迷,mamicode.com
首页 > 其他好文 > 详细

DOM操作性能

时间:2021-04-12 12:02:04      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:list item   改变   文档   prope   ++   tno   lis   性能   操作   

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操作性能

标签:list item   改变   文档   prope   ++   tno   lis   性能   操作   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!