b站面试官:如果后端给你 1w 条数据,你如何做展示?

语言: CN / TW / HK

theme: fancy

本文正在参加「金石计划」

最近一位朋友参加阿b的面试,然后面试官问了她这个问题,我问她咋写的,她一脸淡定的说:“虚拟列表。”

虚拟列表

What???

虚拟列表是个啥,我咋不知道😭

我就去查了一下,好家伙:

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

获取数据本身其实并没有那么消耗性能,渲染的过程才消耗时间,所以我们可以把渲染这一部分抽离出来,这样消耗的时间就减少了许多。

image.png

详细的实现可以看一下这里:”详解虚拟列表

懒加载

我看着虚拟列表想了半天,这玩意和懒加载有啥区别吗?

我就默默去查了一下懒加载详细定义和实现:

懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。

image.png

你仔细看看实现结构,懒加载的图片是已经存在的 div,已经放到 HTML 的结构里了。

我们再看看之前那个虚拟列表实现链接里的效果:

image.png

虚拟列表里面的渲染是动态的,当他不在视口可见,div 也不进行渲染了。

想详细看看懒加载的可以戳这个链接:“懒加载详解

分页

我能想到的方式自然还有组件库自带的分页。

分片渲染

其实还有一个东西,叫分片渲染

分片渲染:简单的说就是一个执行完再执行下一个,其思想是建立一个队列,通过定时器来进行渲染,比如说一共有3次,先把这三个放入到数组中,当第一个执行完成后,并剔除执行完成的,在执行第二个,直到全部执行完毕,渲染队列清空。

如果我们一次性把所有的数据都进行渲染显然是会出现很大的问题,JS 的执行速度比 DOM 快得多,我们可以渲染一个 Item,让他一开始的展示与否为 false,然后我们一个一个的渲染或者100个100个的渲染,这样就解决了我们一次性渲染过多 的问题。

个人感觉有点像分页(

想要详细看的可以看看这篇文章:“分片渲染 & 虚拟列表

那么这就是本章的全部内容啦

点个赞再走吧~