引言

在前端开发中，性能优化是一个永恒的话题。我们经常需要处理和展示大量的数据，所以当面试官问到：“如何一次性渲染十万条数据而不影响用户体验？”你会怎么回答？直接渲染十万条数据可能会导致页面卡顿、响应迟缓，甚至浏览器崩溃。本篇文章详细介绍时间分片和虚拟列表的解决方案，帮助你轻松拿下面试~

前置知识

js是单线程的，会有一个同步和异步的概念，为了确保主线程不会被长时间阻塞，js引擎就会依照事件循环机制来执行代码：

先执行同步代码（也属于是宏任务）同步执行完毕后，检查是否有异步代码需要执行执行所有的微任务微任务执行完毕后，若有需要就会渲染页面执行宏任务（也就是下一次事件循环开始）时间分片

v8引擎执行 js 代码速度很快，然而渲染页面时间相对来说要长很多。如果直接将十万条数据给到渲染引擎，很容易造成页面卡顿或白屏，所以一次性渲染十万条数据的关键在于——要让浏览器的渲染线程尽量均匀流畅地将数据渲染上去。

时间分片的核心思想是将一个大的任务分解成多个小的任务，使用setTimeout或requestAnimationFrame分批次地渲染一部分数据。

使用 setTimeout初始化：定义总数据条数total、每次渲染的数据条数once、需要渲染的总次数page和当前渲染的索引index。递归渲染：loop函数通过递归调用来逐步渲染数据。每次for循环渲染once条数据，并使用setTimeout将渲染操作放入下一个事件循环中。定时器：setTimeout确保每次渲染操作不会阻塞主线程，从而保持页面的流畅性和响应性。结束条件：当所有数据都渲染完毕后（即curTotal - pageCount