如果一个列表有 100000 个数据，这个该怎么进行展示？

参考答案：

我们需要思考的问题：该处理是否必须同步完成？数据是否必须按顺序完成？

解决办法：

（1）将数据分页，利用分页的原理，每次服务器端只返回一定数目的数据，浏览器每次只对一部分进行加载。

（2）使用懒加载的方法，每次加载一部分数据，其余数据当需要使用时再去加载。

（3）使用数组分块技术，基本思路是为要处理的项目创建一个队列，然后设置定时器每过一段时间取出一部分数据，然后再使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。

（4）虚拟列表，每次只渲染需要视口的部分

题目要点：

答题思路

1. 分析数据量：首先认识到直接渲染100000个数据项到DOM中是不现实的，会严重影响页面性能和用户体验。

2. 选择展示策略：

   • 分页：将数据分成多个页面展示，每页显示固定数量的数据项。
   • 滚动加载（懒加载）：初始时只加载部分数据，当用户滚动到页面底部时，再加载更多数据。
   • 虚拟化技术：只渲染可视区域内的数据项，对于不可见的部分则不渲染或只渲染占位符。

3. 优化渲染性能：

   • 使用高效的DOM操作方法，如DocumentFragment来减少DOM操作次数。
   • 如果使用虚拟DOM库（如React、Vue），利用其内部优化机制。

4. 提供搜索和筛选功能：允许用户通过搜索或筛选来快速定位到感兴趣的数据项，减少需要渲染的数据量。

5. 考虑后端支持：如果可能，让后端支持分页或搜索查询，以减少前端处理的数据量。

考察要点

1. 性能优化意识：能否意识到大数据量对前端性能的影响，并提出合理的优化方案。

2. 技术选型能力：能否根据具体场景选择合适的展示策略和技术方案。

3. 用户体验设计：能否从用户的角度出发，设计出既高效又友好的数据展示方式。

4. 前后端协作能力：能否考虑到后端在数据处理和传输方面的支持作用，并提出合理的协作方案。