Update 虚拟列表如何实现.md

src/frontend-basic/js/虚拟列表如何实现.md

@@ -1 +1,19 @@
-# 虚拟列表如何实现
+# 虚拟列表如何实现
+
+## 固定高度的虚拟列表
+1. 通过传入组件的每条数据的高度，计算整个列表的高度，从而得到滚动列表的总高，并将总高赋值给列表。
+2. 监听滚动事件，监听外层容器的滚动事件，并确定可视区域内起止数据在总数据的索引值，这可以通过scrollTop来获取滚动的距离，scrollTop / 元素高度，就可以获取到起始索引。
+3、设置数据对应的元素，为每条数据设置一个绝对定位，其中top等于索引值乘以每条数据的高度，也可以使用transform来实现
+4、考虑缓冲条数，为了避免滑动过快产生空白，可以设置缓冲条数。具体来说，如果滚动到底部，可以只显示最后N条数据，如果滚动到上部，可以只显示前N条数据。
+这样，就可以实现一个固定高度的虚拟列表
+
+
+## 非固定高度的虚拟列表
+原理和固定高度基本一致，差别在于，用户可以预先定义每条数据的高度，在渲染时再动态获取每一条数据的实际高度，从而重新计算滚动列表的总体高度。
+
+1. 初始化列表每项元素，设置一个初始的预估高度 top，并缓存所有节点的高度数据。
+2. 开始滚动后，可以获取scrollTop, 来计算出起始索引的元素
+3. 从计算的起始索引，开始计算实际元素高度，并且更新缓存中的元素高度。同时也要更新整个容器的高度。
+
+## 参考
+[「前端进阶」高性能渲染十万条数据(虚拟列表)](https://juejin.cn/post/6844903982742110216)