这是一个创建于 2535 天前的主题，其中的信息可能已经有所发展或是发生改变。
对于需要显示大量数据的场景，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