十万条大数据渲染优化
window.onload = () => {
let now = Date.now();
let ulDom = document.querySelector('ul')
let data = 100000
for(var i=0;i<data;i++){
let li = document.createElement('li')
li.innerHTML = `我是第${i}个子节点`
ulDom.append(li)
}
}
未经过任何优化打开页面会渲染十万条数据,会白屏卡顿一秒半。
改用分批渲染加载
let now = Date.now();
let ulDom = document.querySelector('ul')
let data = 100000
let currentNode = 1,currenPage = 1;
let pageSize = 50
let totalPage = Math.ceil(data/pageSize)
function initData () {
if(currenPage>totalPage) {
return
}
let block = document.createDocumentFragment()
for(var i=0;i<pageSize;i++){
let li = document.createElement('li')
li.innerHTML = `我是第${currentNode}个子节点`
block.append(li)
currentNode+=1
}
ulDom.append(block)
currenPage+=1
window.requestAnimationFrame(initData)
}
initData()
首先确定批次渲染,每次渲染的个数,然后再求出总共要渲染多少次,然后递归循环渲染,创建虚拟dom,把要append的元素暂时收集起来,每次循环结束再统一一次插入到dom里面,减少dom插入次数,最后借助requestAnimationFrame方法,每次刷新屏幕的时候插入数据。