前端面试题：如何渲染大批量数据而页面不被卡住

 FE-Interview  javascript 66

    setTimeout(() => {
        // 总共加载10万条数据
        const total = 100000
            // 一次加载20条
        const once = 20
            // 需要加载多少次
        const loopCount = total / once
            // 加载到第几次了
        let currentNum = 0

        function add() {
            // 创建一个文档碎片（上古朕哥叫法）
            let bigBox = document.createDocumentFragment()
            let ul = document.querySelector('ul')
                // 每次加载once条
            for (let i = 0; i < once; i++) {
                let li = document.createElement('li');
                li.innerText = Math.random() * 100
                bigBox.appendChild(li)
            }
            // 插进UI
            ul.appendChild(bigBox)
            currentNum++
            loop()
        }

        function loop() {
            if (currentNum < loopCount) {
                // requestAnimationFrame(add) 每隔10000/屏幕刷新率 毫秒执行一次函数 
                window.requestAnimationFrame(add)
            }
        }
        loop()
    }, 0)

 

知识点

document.createDocumentFragment( )

没什么好讲的，老知识了，科普一下吧😄

如果当我们要向document中添加大量数据时(比如10w条)，如果逐条添加节点，这个过程就会十分缓慢。 

当然,你也可以建个新的节点,比如说ul,先将li添加到ul上,然后再将ul添加到页面中.但这样要在父元素中多添加一个<ul>但文档碎片不会产生这种额外节点。

window.requestAnimationFrame( )

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。