大量数据列表渲染优化方法

身为前端，我们经常遇到数据列表渲染等功能，我相信很多人都会完成这类的功能，使用的方法也大多是循环数据，创建列表元素，然后经新元素添加到列表后面，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大量数据加载</title>
</head>
<body>
<div class="box">
    <ul id="ulBox"></ul>
</div>
</body>
<script>
    (function () {
        const ul = document.getElementById('ulBox')
        if(!ul){
            return
        }
        const array = new Array(100000) //存放将要渲染的列表数据
        for (var i = 0; i < array.length; i++){
            array[i] = i;
            var li = document.createElement('li');
            li.innerText = array[i];
            ul.appendChild(li);
        }
        //        点击列表项
        ul.addEventListener('click', function(e) {
            if(e.target.tagName === "LI"){
                alert(e.target.innerText)
            }
        })
    })()
</script>
</html>

数据列表的渲染就这样很快的完成了。对于少量的数据来说，这个方法足够用了，但是当列表数据非常大的时候，我们不难发现，页面需要加载很长时间才能正常显示出来，这显然不是我们想要的结果。

那么如何在数据量很大的时候，还能很快显示呢？接下来我们将分析并解决这个问题
我们都知道显示屏的大小是固定的，无论数据量有多少，初看我们也只需要显示最开始的数据而已，所以我们可以分批次让数据显示出来，这样既不需要长时间的等待，也不会影响数据的显示。

在此之前，我们需要了解一下createDocementFragment的功能，不太清楚的同学可以自己了解一下，这里就不再赘述了

以下附上实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大量数据加载和花样打印</title>
</head>
<body>
<div class="box">
    box
    <div id="create"></div>
    <ul id="ulBox"></ul>
</div>
</body>
<script>
    (function () {
        const ul = document.getElementById('ulBox')
        if(!ul){
            return
        }

        const total = 100000;
        const once = 20;
        const number = total / once;
        var areadyNum = 0;
        const array = new Array(100000) //存放将要渲染的列表数据
        for (var i = 0; i < array.length; i++){
            array[i] = i;
        }

        function addItem() {
//        创建一个虚拟节点占位
            const fragment = document.createDocumentFragment();

            for( var i = 0; i < once; i++){
                const li = document.createElement("li")
                li.innerText = array[areadyNum * once + i + 1]
                fragment.appendChild(li);
            }
            ul.appendChild(fragment)
            continueDo();
            areadyNum++;
        }

        function continueDo () {
            if(areadyNum < number){
                window.requestAnimationFrame(addItem);
            }
        }

        continueDo();

//        点击列表项
        ul.addEventListener('click', function(e) {
            if(e.target.tagName === "LI"){
                alert(e.target.innerText)
            }
        })
    })()
</script>
</html>

如此我们就可以看见数据在随着时间慢慢的往页面里添加，此时大量数据列表渲染的问题也就解决了。

大量数据列表渲染优化方法

猜你喜欢