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