同时渲染大量数据优化-时间分片

最新推荐文章于 2024-07-20 23:54:17 发布

cq-wangyong

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量215

点赞数

分类专栏：前端性能优化文章标签： javascript

本文链接：https://blog.csdn.net/qq_30282133/article/details/112343005

版权

前端性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一次性渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="app"></ul>
    <script>
        let now = Date.now();
        const total = 200000;
        let ul = document.getElementById('app');

        // 将数据插入容器中
        for (let i = 0; i < total; i++) {
            let li = document.createElement('li');
            li.innerText = Math.random() * total;
            ul.appendChild(li);
        }
        console.log('JS运行时间：', Date.now() - now);
        setTimeout(() => {
            console.log('总运行时间：', Date.now() - now);
        }, 0)
        /**
         * JS运行时间： 638
         * 总运行时间： 8200
         * 实际上js运行时间很快，只花了628ms，但是从js运行到数据渲染到页面花了8200ms，主要时间花在了数据渲染上
        */
    </script>
</body>
</html>

使用定时器优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="app"></ul>
    <script>
        let now = Date.now();
        const total = 200000;
        const pageSize=100;//每次渲染的数量
        let ul = document.getElementById('app');

        function loop(start){
            if(start>total){return};//大于总数表示渲染完成，return结束递归调用

            var end= pageSize + start;

            end=end>total?total:end;//如果end比total大，将total赋值给end，不渲染多余数据

            setTimeout(()=>{
                for (let i = start; i < end; i++) {
                    let li = document.createElement('li');
                    li.innerText = Math.random();
                    ul.appendChild(li);
                }
                loop(end);
            },100)
        }

        loop(0);
        /**
         * 这种方式可以快速渲染页面，不会出现长时间白屏
         * 但是刷新时会出现闪屏
        */
    </script>
</body>
</html>

使用requestAnimationFrame和documentFragment优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="app"></ul>
    <script>
        let now = Date.now();
        const total = 200000;
        const pageSize=100;//每次渲染得数量
        let ul = document.getElementById('app');

        function loop(start){
            if(start>total){return};//大于总数表示渲染完成，return结束递归调用

            var end= pageSize + start;

            end=end>total?total:end;//如果end比total大，将total赋值给end，不渲染多余数据

            window.requestAnimationFrame(()=>{
                var fragment=document.createDocumentFragment();
                for (let i = start; i < end; i++) {
                    let li = document.createElement('li');
                    li.innerText = Math.random();
                    fragment.appendChild(li);
                }
                ul.appendChild(fragment);
                loop(end);
            })
        }

        loop(0);
        /**
         * 刷新的时候不会出闪屏
         * 大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次，因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。
         * requestAnimationFrame会根据屏幕分辨率自动决定回调函数的执行时机，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms
         * 
         * DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为 DocumentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。可以使用 document.createDocumentFragment方法或者构造函数来创建一个空的DocumentFragment
         * 
         * DocumentFragments是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流。
         * 
         * 
         * 重绘和回流：
         * 比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。
         * 当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇。
         * 你应该能感觉到，回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。

        */
    </script>
</body>
</html>

vue版本：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="app">
        <ul>
            <li v-for="item in arr" :key="item">{{item}}</li>
        </ul>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                arr:[],
                pageSize:100,
                total:200000,
            },
            methods: {
                loop(start){
                    if (start > this.total) { return };//大于总数表示渲染完成，return结束递归调用
    
                    var end = this.pageSize + start,arr=[];
    
                    end = end > this.total ? this.total : end;//如果end比total大，将total赋值给end，不渲染多余数据
    
                    for (let i = start; i < end; i++) {
                        arr.push(Math.random())
                    }
                    this.arr.push(...arr);
                    window.requestAnimationFrame(()=>{
                        this.loop(end);
                    })
                }
            },
            mounted () {
                this.loop(0)
            }
        })
        
    </script>
</body>

</html>

cq-wangyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同时渲染大量数据优化-时间分片

一次性渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <
复制链接

扫一扫

专栏目录