字节二面：如果高性能渲染十万条数据？

朱雀 2024-04-17 10:26 14阅读 0赞

![a90d604fac5e42b394b6452c426b9890.png][]

**前言**

> 最近博主在**字节面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，我们虽然可能很少会遇到后端返回十万条数据的情况，但是了解掌握如何处理这种情况，能让你对前端性能优化有更深的理解，博主在这给大家细细道来。

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及人工智能领域`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  最粗暴的做法（一次性渲染）
 *  使用定时器
 *   *  为什么会出现闪屏现象呢
     *  简单聊一下 setTimeout 和闪屏现象
 *  使用 requestAnimationFrame
 *  使用 DocumentFragment
 *  总结

## 最粗暴的做法（一次性渲染） ##

我们先来看看最粗暴的做法，一次性将大量数据插入到页面中：

// 记录任务开始时间
    let now = Date.now();
    // 插入十万条数据
    const total = 100000;
    // 获取容器
    let ul = document.getElementById('container');
    // 将数据插入容器中
    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)
    // print: JS运行时间： 187
    // print: 总运行时间： 2844

我们对十万条记录进行循环操作，JS的运行时间为`187ms`，还是蛮快的，但是最终渲染完成后的总时间确是`2844ms`。

简单说明一下，为何两次`console.log`的结果时间差异巨大，并且是如何简单来统计`JS运行时间`和`总渲染时间`：

*  在 JS 的`Event Loop`中，当JS引擎所管理的执行栈中的事件以及所有微任务事件全部执行完后，才会触发渲染线程对页面进行渲染
 *  第一个`console.log`的触发时间是在页面进行渲染之前，此时得到的间隔时间为JS运行所需要的时间
 *  第二个`console.log`是放到 setTimeout 中的，它的触发时间是在渲染完成，在下一次`Event Loop`中执行的

依照两次`console.log`的结果，可以得出结论：

对于大量数据渲染的时候，JS运算并不是性能的瓶颈，性能的瓶颈主要在于渲染阶段

## 使用定时器 ##

从上面的例子，我们已经知道，页面的卡顿是由于同时渲染大量DOM所引起的，所以我们考虑将渲染过程分批进行

在这里，我们使用`setTimeout`来实现分批渲染

//需要插入的容器
    let ul = document.getElementById('container');
    // 插入十万条数据
    let total = 100000;
    // 一次插入 20 条
    let once = 20;
    //总页数
    let page = total/once
    //每条记录的索引
    let index = 0;
    //循环加载数据
    function loop(curTotal,curIndex){
        
        if(curTotal <= 0){
        
            return false;
        }
        //每页多少条
        let pageCount = Math.min(curTotal , once);
        setTimeout(()=>{
        
            for(let i = 0; i < pageCount; i++){
        
                let li = document.createElement('li');
                li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
                ul.appendChild(li)
            }
            loop(curTotal - pageCount,curIndex + pageCount)
        },0)
    }
    loop(total,index);

用一个gif图来看一下效果  
![在这里插入图片描述][b0f3869c07ea465487362e023023bb92.gif_pic_center]

我们可以看到，页面加载的时间已经非常快了，每次刷新时可以很快的看到第一屏的所有数据，但是当我们快速滚动页面的时候，会发现页面出现闪屏或白屏的现象

### 为什么会出现闪屏现象呢 ###

首先，理清一些概念。`FPS`表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一`帧`，`FPS`是描述`帧`变化速度的物理量。

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次，`FPS`为60frame/s，为这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响。

因此，当你对着电脑屏幕什么也不做的情况下，大多显示器也会以每秒60次的频率正在不断的更新屏幕上的图像。

为什么你感觉不到这个变化？

那是因为人的眼睛有视觉停留效应，即前一副画面留在大脑的印象还没消失，紧接着后一副画面就跟上来了， 这中间只间隔了16.7ms(1000/60≈16.7)，所以会让你误以为屏幕上的图像是静止不动的。

而屏幕给你的这种感觉是对的，试想一下，如果刷新频率变成1次/秒，屏幕上的图像就会出现严重的闪烁， 这样就很容易引起眼睛疲劳、酸痛和头晕目眩等症状。

大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。 因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。

直观感受，不同帧率的体验：

*  帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；
 *  帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；
 *  帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；
 *  帧率波动很大的动画，亦会使人感觉到卡顿。

### 简单聊一下 setTimeout 和闪屏现象 ###

*  `setTimeout`的执行时间并不是确定的。在JS中，`setTimeout`任务被放进事件队列中，只有主线程执行完才会去检查事件队列中的任务是否需要执行，因此`setTimeout`的实际执行时间可能会比其设定的时间晚一些。
 *  刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的刷新频率可能会不同，而`setTimeout`只能设置一个固定时间间隔，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致。

在`setTimeout`中对dom进行操作，必须要等到屏幕下次绘制时才能更新到屏幕上，如果两者步调不一致，就可能导致中间某一帧的操作被跨越过去，而直接更新下一帧的元素，从而导致丢帧现象。

## 使用 requestAnimationFrame ##

与`setTimeout`相比，`requestAnimationFrame`最大的优势是由系统来决定回调函数的执行时机。

如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，`requestAnimationFrame`的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象。

我们使用`requestAnimationFrame`来进行分批渲染：

//需要插入的容器
    let ul = document.getElementById('container');
    // 插入十万条数据
    let total = 100000;
    // 一次插入 20 条
    let once = 20;
    //总页数
    let page = total/once
    //每条记录的索引
    let index = 0;
    //循环加载数据
    function loop(curTotal,curIndex){
        
        if(curTotal <= 0){
        
            return false;
        }
        //每页多少条
        let pageCount = Math.min(curTotal , once);
        window.requestAnimationFrame(function(){
        
            for(let i = 0; i < pageCount; i++){
        
                let li = document.createElement('li');
                li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
                ul.appendChild(li)
            }
            loop(curTotal - pageCount,curIndex + pageCount)
        })
    }
    loop(total,index);

看下效果：  
![在这里插入图片描述][8ec3780465cd4bdc82f169e620028643.gif_pic_center]

我们可以看到，页面加载的速度很快，并且滚动的时候，也很流畅没有出现闪烁丢帧的现象。

这就结束了么，还可以再优化么？

当然~~

## 使用 DocumentFragment ##

先解释一下什么是 DocumentFragment ，文献引用自[MDN][]

>     DocumentFragment`，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的`Document`使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为`DocumentFragment`不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。
>      可以使用`document.createDocumentFragment`方法或者构造函数来创建一个空的`DocumentFragment

从MDN的说明中，我们得知`DocumentFragments`是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流。

当`append`元素到`document`中时，被`append`进去的元素的样式表的计算是同步发生的，此时调用 getComputedStyle 可以得到样式的计算值。 而`append`元素到`documentFragment` 中时，是不会计算元素的样式表，所以`documentFragment` 性能更优。当然现在浏览器的优化已经做的很好了， 当`append`元素到`document`中后，没有访问 getComputedStyle 之类的方法时，现代浏览器也可以把样式表的计算推迟到脚本执行之后。

最后修改代码如下：

复制代码<ul id="container"></ul>

//需要插入的容器
    let ul = document.getElementById('container');
    // 插入十万条数据
    let total = 100000;
    // 一次插入 20 条
    let once = 20;
    //总页数
    let page = total/once
    //每条记录的索引
    let index = 0;
    //循环加载数据
    function loop(curTotal,curIndex){
        
        if(curTotal <= 0){
        
            return false;
        }
        //每页多少条
        let pageCount = Math.min(curTotal , once);
        window.requestAnimationFrame(function(){
        
            let fragment = document.createDocumentFragment();
            for(let i = 0; i < pageCount; i++){
        
                let li = document.createElement('li');
                li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
                fragment.appendChild(li)
            }
            ul.appendChild(fragment)
            loop(curTotal - pageCount,curIndex + pageCount)
        })
    }
    loop(total,index);

## 总结 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[a90d604fac5e42b394b6452c426b9890.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/cd1a2358c21b410a9c298a80bf2db4e3.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[b0f3869c07ea465487362e023023bb92.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/21da72376af246f7a6fb3eadde30712d.gif
[8ec3780465cd4bdc82f169e620028643.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/689b44bbea664be08d583541f4b78467.gif
[MDN]: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FDocumentFragment