js大数据渲染总结

window.onload = () => {
    let now = Date.now();
    let ulDom = document.querySelector('ul')
    let data = 100000
    for(var i=0;i 

 未经过任何优化打开页面会渲染十万条数据，会白屏卡顿一秒半。
 
改用分批渲染加载
 
	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 
首先确定批次渲染，每次渲染的个数，然后再求出总共要渲染多少次，然后递归循环渲染，创建虚拟dom，把要append的元素暂时收集起来，每次循环结束再统一一次插入到dom里面，减少dom插入次数，最后借助requestAnimationframe方法，每次刷新屏幕的时候插入数据。