前言

在项?中，有时需要展?上万条甚??万条数据，?如何在保证性能的前提下?效地渲染这些数据成为了我?临的难题。在经过?段时间的摸索和实践后，我积累了?些经验和技巧，现在我将这些分享给?家。

本篇文章开始之前说明：这些只是小编的微末见解，如有瑕疵，欢迎指正！！

另外小编联合阿里、字节大牛总结了前端面试的必备文档（主要还是大佬总结的，本人摸鱼~）如果有需要获取完整版的小伙伴关注我之后点赞+转发，私信回复【学习】即可领取

不进行任何操作（?次性渲染）

这种?法的核?理念是尽可能减少对DOM的操作，特别是在处理?量数据时。DOM操作通常是相对昂贵的，因为它们会触发浏览器的回流和重绘。

回流指的是浏览器根据最新的 DOM 树计算元素的?何属性，然后再进?布局，?重绘则是将元素的像素信息绘制到屏幕上。

我们?两个输出语句来看看 js代码运?时间 和 总渲染时间 ，把它们进?对?：

• 在 JS 的 Event Loop 中，当JS引擎所管理的执?栈中的事件以及所有微任务事件全部执?完

后，才会触发渲染线程对??进行渲染；

• 第?个 console.log 的触发时间是在??进?渲染之前，此时得到的间隔时间为JS运?所需要

的时间；

• 第?个 console.log 是放到 setTimeout 中的，它的触发时间是在渲染完成，在下?次Event Loop 中执?的；

对?时间我们可以看?，渲染的时间也太?了，所以我们得想想办法，有没有什么?法可以优化?下渲染的过程；

setTimeout（使?定时器）

setTimeout 的?作原理是将任务放?事件队列中，等待当前执?栈清空后执?。这种?法可以?来延迟执?某些耗时的操作，以允许浏览器在操作之间进???重绘。

我们根据上?代码改编?下：

现在数据有了，但是我发现如果快速往下滑动的时候，会有类似 闪屏 的效果

这是因为原因：

• setTimeout的执?时间是不确定的 ，setTimeout任务被放?事件队列中，只有在主线程执?完毕后才会检查并执?事件队列中的任务。

• 屏幕刷新频率受分辨率和屏幕尺?影响 ，?setTimeout只能设置?个固定的时间间隔，这个时间不?定和屏幕刷新时间相同。

requestAnimationFrame + fragment (时间分?)

requestAnimationFrame 是?种在浏览器重绘之前执?操作的?法，通常?于动画和其他需要?性能的场景。它可以保证回调函数在每次??重绘之前执?，从而避免了由于执?操作?导致的??抖动问题。

更新后的代码如下：

补充

requestAnimationFrame （RAF）和 setTimeout 都是?于控制 JavaScript 代码执?时间的

?法，但它们有?些关键的区别：

1. 执?时机：

• setTimeout ：将任务放?事件队列，并在指定的延迟时间后执?任务。但是，由于JavaScript 是单线程的，如果主线程忙于执?其他任务， setTimeout 中的任务可能会被延。

迟执?。

• requestAnimationFrame ：在浏览器下?次重绘之前执?任务。它会与浏览器的渲染循

环同步，以确保在??重新绘制时执?任务，通常是每秒 60 次（60Hz）。

2. 性能优化：

• setTimeout ：尽管可以设置延迟时间，但执?时间并不是可靠的。这可能导致性能问题，

尤其是在需要频繁执?的动画或渲染任务中。

• requestAnimationFrame ：浏览器会?动优化执?时间，通常能够更好地与??渲染协

调，避免因执?任务?导致的卡顿或闪烁。

3. ?途：

• setTimeout ：适?于?般性的延迟执?任务，例如定时器功能或简单的异步操作。

• requestAnimationFrame ：主要?于执?与??渲染相关的任务，如动画或需要频繁更新的 UI 效果。它可以确保在每次??重绘时都进?优化的任务执?，以提供更流畅的??体验。

虚拟列表

虚拟列表是?种专?为处理?量数据?设计的优化?案。它的核?思想是只渲染当前可视区域内的数据，?不是?次性渲染所有数据。通过动态计算可视区域内需要展?的数据，可以有效地减少渲染时间和资源消耗，提???的响应速度和流畅度。

如图：

虚拟列表的实现通常包括以下?个步骤：

? 计算可视区域：获取可视区域的?度，并根据滚动位置计算可视区域内的起始和结束索引。

? 动态渲染：根据计算得到的起始和结束索引，从数据源中获取相应的数据进?渲染。

? 滚动优化：监听滚动事件，当滚动位置发?变化时，重新计算可视区域并更新渲染的数据。

实现?意图：

本篇文章到此结束啦！这些只是小编的微末见解，如有瑕疵，欢迎指正！！

另外小编联合阿里、字节大牛总结了前端面试的必备文档（主要还是大佬总结的，本人摸鱼~）如果有需要获取完整版的小伙伴关注我之后点赞+转发，私信回复【学习】即可领取