# 渲染几万条数据不卡住页面
常见的面试题,也是大型项目必备的优化知识点
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')