渲染十万条数据的方法

最新推荐文章于 2024-03-08 11:18:56 发布

ALKEN ABBY

最新推荐文章于 2024-03-08 11:18:56 发布

阅读量412

点赞数

分类专栏：开发中的实用方法和函数文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45803050/article/details/126455175

版权

开发中的实用方法和函数专栏收录该内容

54 篇文章 0 订阅

订阅专栏

渲染十万条数据的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul></ul>

    <!-- 方法2: 懒加载+分页的方式，分段渲染，逐帧渲染 -->
    <script>
        console.time();

        // 插入十万条数据
        const total = 100000;
        let ul = document.querySelector('ul');

        //懒加载--分段渲染
        // 1.一次渲染一屏的量
        const once = 20;

        // 2.全部渲染完需要多少次，循环到时候用
        const loopCount = total / once;

        // 3.已经渲染了多少次
        let countHasRender = 0;

        function add() {
            // 创建虚拟节点，（使用 createDocumentFragment，不会触发渲染）
            const fragment = document.createDocumentFragment();

            // 循环20次
            for (let i = 0; i < once; i++) {
                const li = document.createElement('li');
                li.innerText=Math.floor(Math.random()*total);
                fragment.appendChild(li);
            }

            // 最后把虚拟节点 append 到ul上
            ul.appendChild(fragment);

            // 4. 已渲染的次数+1
            countHasRender+=1;

            loop();

        }

        function loop(){
            // 5. 如果还没渲染完，那么就使用 来继续渲染
            if(countHasRender<loopCount){
                window.requestAnimationFrame(add); // 保证是60帧

                // 上一行和这一行效果是一样的
                // setTimeout(add, 16);
            }
        }

        loop();

    </script>


    <!-- 方法3: 懒加载，防抖，监听 scroll 事件，分页
    
    懒加载和分页方式一般用于做长列表优化, 类似于表格的分页功能, 
    具体思路就是用户每次只加载能看见的数据, 当滚动到底部时再
    去加载下一页的数据.-->
    <script>

    </script>


<!-- 方法5：虚拟滚动技术也可以用来优化长列表, 其核心思路就是每次只渲染可视区域的列表数,
    当滚动后动态的追加元素并通过顶部padding来撑起整个滚动内容,实现思路也非
    常简单. -->



    <!-- 方法1:普通方式渲染：性能卡顿，时间久 -->
    <!-- <script>
        console.time();

        // 插入十万条数据
        const total = 100000;
        let ul = document.querySelector('ul'); // 拿到ul

        function add() {
            // 1. 创建虚拟节点，（使用 createDocumentFragment，不会触发渲染）
            const fragment = document.createDocumentFragment();

            // 2. 循环十万次
            for (let i = 0; i < total; i++) {
                const li = document.createElement('li');
                li.innerText = Math.floor(Math.random() * total);
                fragment.appendChild(li);
            }

            // 3. 最后把虚拟节点 append 到ul上
            ul.appendChild(fragment);

        }

    </script> -->

</body>

</html>