持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
写在前面: 记录总结一下关于前端渲染长列表的各种方案,以及虚拟列表的实现方式.
事关我对于虚拟列表的那些事
业务中经常遇到渲染长列表的需求,而我们使用的优化方式通常是分页加载,懒加载,以及虚拟列表,那就这几个方案来展开说说
分页加载
前端分页
- 多惨呀前端分页,后端一股脑把数据全传给前端,前端按步长把数据切成多份.
后端分页
- 后端数据库分页,接口告诉你总共有多少页,当前在多少页,请求数据的时候告诉后端你要第几页的数据.
使用场景通常在表格中,搭配分页器使用效果更加.
懒加载其一
手机端常用一些,通过监听上拉的动作,请求接口获取下一页的数据,但数据会越来越多,列表越来越长,影响流畅度造成页面卡顿
懒加载其二
css的新属性: content-visibility
content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。
简单来说就是,添加content-visibility属性之后,容器内的内容只会渲染用户能看见的那部分,其他 部分只要还没显示,就暂时不会渲染,天生的懒加载.
常用属性值
- content-visibility: visible：默认值，没有任何效果，相当于没有添加 content-visibility，元素的渲染与往常一致。
- content-visibility: hidden：与 display: none 类似，用户代理将跳过其内容的渲染。（这里需要注意的是，跳过的是内容的渲染）
- content-visibility: auto：如果该元素不在屏幕上，并且与用户无关，则不会渲染其后代元素。
虚拟列表
实现思路
- 虚拟列表每次只加载当前区域以及区域外一部分数据内容,不会全部加载.
- 移除浏览器滚动条,自己模拟滚动条然后监听鼠标滚动事件,通过修改transform的值来模拟滚动效果,同时在内容增加的时候,加大容器的padding-top值来让滚动条变短.
- 通过设置可见区域来遮挡可见区域外的内容和空白,在滚动的时候去动态加载内容,类似js无缝轮播的视觉戏法.
具体步骤
参考文章:
-
怕误人子弟,自己的总结后面补,给大家看一下超详细的两篇大佬文章.
End
