# 渲染几万条数据不卡住页面

常见的面试题,也是大型项目必备的优化知识点

const oUl = document.querySelector('ul')
for (let i = 0; i < 200000; i++) {
    const oLi = document.createElement('li')
    oLi.innerHTML = i;
    oUl.appendChild(oLi)
}

使用for循环一个一个插入的话,每次都会进行操作DOM...此处省略八千字,具体参考vue源码

解决办法:创建文档片段Fragment,将标签全部放入该片段中,再统一插入document,这样只会渲染一次,只会操作一次DOM

console.time('over')

let oUl = document.querySelector('ul')
let fragment = document.createDocumentFragment()

for (let i = 0; i < 200000; i++) {
    const oLi = document.createElement('li')
    oLi.innerHTML = i;
    fragment.appendChild(oLi)
}

oUl.appendChild(fragment)

// 据说下面这样子世界会更清净
fragment = null

console.timeEnd('over')