面试题:js如何渲染十万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js如何渲染十万条数据并不卡住界面</title>
</head>
<body>
    <ul>控件</ul>
</body>
</html>
setTimeout(() => {
    let data = 100000;
    let once = 20;
    let num = data/once;
    let currentIndex = 0;
    let ul = document.querySelector('ul');
    let frameagent = document.createDocumentFragment();
    function add(){
        for (var i = 0; i < once; i++) {
            let li = document.createElement('li');
            li.innerText = Math.floor(Math.random() * data);
            frameagent.appendChild(li);
        }
        currentIndex += 1;
        ul.appendChild(frameagent);
        loop();
    }
    function loop(){
        if(currentIndex < num){
            window.requestAnimationFrame(add);
        }
    }
    loop();
},0)

本题来自于网络,所有权归其作者。

上一篇:HTTP 错误 500.19 Internal Server Error的解决方法


下一篇:while(true)应用 之 实现自己的消息队列