「前端性能优化」十万条数据丝滑查看（虚拟列表）

面试官：给你10万条数据，你怎么处理？

今天跟大家来唠唠嗑，如果后端真的返回给前端10万条数据，咱们前端要怎么优雅地展示出来呢？（哈哈假设后端真的能传10万条数据到前端）天呐，不会真的有人会直接在页面绘制10万个 DOM 节点来渲染10万条数据吧，这人指定疯了吧！

其实对于十万条数据，我们前端可以采用 虚拟列表 + 分页 的方式来展示

那到底什么是虚拟列表呢？让我们来一探究竟

什么是虚拟列表？

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。来看一下渲染的效果吧：

虚拟列表在线体验地址：www.xyst.club:4888/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZsUnzSX-1658297325037)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/127c64b78a7b4be8aa9edb8c32198d8c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

一个虚拟列表一共分为上空白区、上缓冲区、可视区、下缓冲区、下空白区，废话不多说，直接上图

假设页面可视区最多能渲染5条数据，这是页面首次加载完渲染的样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-235sDnBA-1658297325037)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89e7e8e642be43d0999bb9a6ea912d40~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)] 这是页面发生滚动之后渲染的样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SqUlfhMz-1658297325038)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3bd193f184040d19cdb3e09f4f652c9~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)] 这是页面已经滚动到底部该渲染的样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SkKTKN