持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
后端一次性返回10w条数据，你该如何渲染？
这个是之前一段时间爆出来的一个很火的题目，后端一次性返回10w条数据，你该如何渲染？，个人感觉这也是一个概念题，要是真在现实工作中要是遇到，呵呵，让后端先跑30米！
但是回到正题，虽然这个设计不合理，虽然正常情况下也没有后端会一次性返回10w条数据，但是我就是要处理该怎么办？
首先：浏览器能否处理10w条数据？
- 只要是网络畅通的情况下，加载 10w条数据绝对是没有问题的。
- 在数据量不是特别大的情况下，JS 处理也是没有问题的
- 渲染到 DOM 会非常卡顿
- dom节点内存增大，监听事件占用的内存也逐渐加大 那么很显然，渲染时候，我们的家用、办公用电脑并不能处理10w条数据的，dom渲染
方案一：自定义中间层
自定义 node.js 中间层，获取并拆分这 10w 条数据，既然后端不给我们做，那我们自己做呗，我们前端自己做一个中间层进行拆分就好
相关推文：
方案二： 虚拟列表
虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。 这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表，以提高无限滚动的性能。
虚拟列表的设计基础思路：
- 只渲染可视区域DOM
- 其他隐藏区域不显示，只用
<div>撑起高度 - 实现虚拟列表就是在处理用户滚动时，要改变列表在可视区域的渲染部分，随着浏览器滚动，随时准备生成或者销毁DOM
虚拟列表- 第三方 lib
- 虚拟列表实现起来非常复杂，可借用第三方 lib
- vue-virtual-scroll-list
- react-virtualized
