js大数据渲染总结

十万条大数据渲染优化

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方法，每次刷新屏幕的时候插入数据。