DOM性能

时间:2020-9-12 作者:admin

1、dom查询做缓存

DOM性能


2、将频繁操作改为一次操作

//频繁操作
const list = document.getElementById("list")
for(let i = 0 ; i<10;i++){
    const li = document.createElement("li")
    li.innerHTML = `List Item ${i}`
    list.appendChild(li)
}

//一次操作
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)
}
list.appendChild(frag)
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。