对于需要显示大量数据的场景，Web 端通常的解决方案要么是每次只显示一页，并额外加上翻页按钮，要么是当列表滑到最底端的时候触发事件，加载下一页的数据并添加至末尾。然而在移动端通常大家会用复用不可见元素的方式来减少渲染成本，这个方案后来在 Android 端被封装成了 RecyclerView。不考虑利用 canvas 元素自己实现渲染引擎的话，在 Web 端似乎是没办法实现复用不可见元素的，我的理解是在这样做的时候会引起大量 reflow。
那么问题来了，在 Web 端有没有方案能实现类似移动端上，从滚动条上看用户能觉得一下子加载了 100000 行数据，而且滑动的时候不卡顿的方案？
 |
1
yljcyct Dec 23, 2018 via Android
better-scroll 好像有做类似的处理
作为小白希望看见更多的讨论 |
 |
2
fsdgfd Dec 23, 2018 via Android  1
|
|
3
fsdgfd Dec 23, 2018 via Android 1
大致是不渲染不可见元素
|
 |
4
newbieRenew Dec 23, 2018 via iPhone 1
可以的，你用绝对定位来做。先给一个很高的高度，根据滑动一段距离来动态替换里面的内容，看起来像是连续加载的。浏览完一千多张图也不卡。
|
 |
5
royzxq Dec 23, 2018
差不多如#4 所说， 但是需要注意的是该方式需要预先算好每个节点的高度， 不然会导致进度条之类的 bug。
成品的话你可以参考一下 B 站视频播放页面的弹幕列表。 |
 |
6
Raincal Dec 23, 2018 1
|
 |
7
kernel Dec 23, 2018
virtual list 实现已经有无数了，包括应用于 react/vue 之类的
|
 |
8
azh7138m Dec 24, 2018 via Android 1
https://material.angular.io/cdk/scrolling/overview
自带一个支持的 angular |
 |
9
exonuclease Dec 24, 2018 via iPhone
虚拟化技术吧
|
 |
10
gzxu OP 多谢楼上各位～
|
|
11
gzxu OP 其实我现在打算在 GTK 里面搞一个表放大量数据，但尽管前端有这么多库实现了 Virtual list，GTK 的生态太差了，得自己实现。先不操心大量数据的场景好了。
|
 |
12
wuhongwei Dec 24, 2018
迂回一下， 类似 lazy-load 一样，先做 10000 个空 div 给放如 IntersectionObserver 的 queue， 需要的时候在渲染，10000 个空 div 不会 卡顿的
|
Select Language