js大数据渲染总结

最新推荐文章于 2025-10-01 17:58:14 发布

原创最新推荐文章于 2025-10-01 17:58:14 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文探讨了在渲染大量数据时导致页面卡顿的问题，并提出了解决方案——分批渲染。通过设置每批渲染数量、计算总页数和使用requestAnimationFrame，实现了平滑的批量数据加载，有效避免了浏览器白屏和卡顿现象，提高了用户体验。

十万条大数据渲染优化

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