DOM操作性能
时间:2021-04-12 12:02:04
收藏: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)
评论(0)