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

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

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')