前端时间分片渲染

在经典的面试题中：”如果后端返回了十万条数据要你插入到页面中，你会怎么处理？”

除了像 useVirtualList 这样的虚拟列表来处理外，我们还可以通过 时间分片 来处理

通过 setTimeout

直接上一个例子：

 

上面的例子中，我们使用了 setTimeout，在每一次宏任务中插入一页数据，然后设置多个这样地宏任务，直到把所有数据都插入为止。

但是很明显能看到的问题是，快速拖动滚动条时，数据列表中会有闪烁的情况

这是因为：

当使用 setTimeout 来拆分大量的 DOM 插入操作时，虽然我们将延迟时间设置为 0ms，但实际上由于 JavaScript 是单线程的，任务执行时会被放入到事件队列中，而事件队列中的任务需要等待当前任务执行完成后才能执行。所以即使设置了 0ms 延迟，setTimeout 的回调函数也不一定会立即执行，可能会受到其他任务的阻塞。

当 setTimeout 的回调函数执行的间隔超过了浏览器每帧更新的时间间隔（一般是 16.7ms），就会出现丢帧现象。丢帧指的是浏览器在更新页面时，没有足够的时间执行全部的任务，导致部分任务被跳过，从而导致页面渲染不连续，出现闪烁的情况

所以，我们改善一下，通过 requestAnimationFrame 来处理

通过 requestAnimationFrame

 

很明显，闪烁的问题被解决了

这是因为：

requestAnimationFrame 会在浏览器每次进行页面渲染时执行回调函数，保证了每次任务的执行间隔是稳定的，避免了丢帧现象。所以在处理大量 DOM 插入操作时，推荐使用 requestAnimationFrame 来拆分任务，以获得更流畅的渲染效果