本文介绍了虚拟列表的概念和实现原理，通过 IntersectionObserver 监听元素与视口的交叉状态，优化长列表渲染性能。文中详细展示了如何在不依赖框架的情况下，使用 JavaScript 生成和渲染数据，以及如何利用 IntersectionObserver 实现动态加载，提高网页响应速度。
技术不局限于框架，相同的原理只是实现方式略有不同。
前置
1. 什么是虚拟列表？
首先，虚拟列表只是一个概念，本人对虚拟列表这个表述不置可否。
虚拟列表是对于列表形态数据展示的一种按需渲染，是对长列表渲染的一种优化。
虚拟列表不会一次性完整地渲染长列表，而是按需显示的一种方案，以提高无限滚动的性能。
2. 虚拟列表的实现原理？
根据容器元素的高度 clientHeight 以及列表项元素的高度 offsetHeight 来显示长列表数据中的某一个部分，而不是去完整地渲染整个长列表。
实现一个虚拟列表需要：
得知容器元素的高度 clientHeight
得知列表项元素的高度 offsetHeight
计算可视区域应该渲染的列表项的个数 count = clientHeight / offsetHeight
计算可视区域数据渲染的起始位置 start
计算可视区域数据渲染的结束位置 end
对完整长列表数据进行截断 sliceList = dataList.slice(start, e
最低0.47元/天 解锁文章
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
