网页前端有没有类似 RecyclerView 的东西？

[gzxu]

对于需要显示大量数据的场景，Web 端通常的解决方案要么是每次只显示一页，并额外加上翻页按钮，要么是当列表滑到最底端的时候触发事件，加载下一页的数据并添加至末尾。然而在移动端通常大家会用复用不可见元素的方式来减少渲染成本，这个方案后来在 Android 端被封装成了 RecyclerView。不考虑利用 canvas 元素自己实现渲染引擎的话，在 Web 端似乎是没办法实现复用不可见元素的，我的理解是在这样做的时候会引起大量 reflow。

那么问题来了，在 Web 端有没有方案能实现类似移动端上，从滚动条上看用户能觉得一下子加载了 100000 行数据，而且滑动的时候不卡顿的方案？

[yljcyct]

better-scroll 好像有做类似的处理
作为小白希望看见更多的讨论

[fsdgfd]

https://clusterize.js.org 这种吧，

[fsdgfd]

大致是不渲染不可见元素

[newbieRenew]

可以的，你用绝对定位来做。先给一个很高的高度，根据滑动一段距离来动态替换里面的内容，看起来像是连续加载的。浏览完一千多张图也不卡。

[royzxq]

差不多如#4 所说， 但是需要注意的是该方式需要预先算好每个节点的高度， 不然会导致进度条之类的 bug。
成品的话你可以参考一下 B 站视频播放页面的弹幕列表。

[Raincal]

https://github.com/valdrinkoshi/virtual-scroller

[kernel]

virtual list 实现已经有无数了，包括应用于 react/vue 之类的

[azh7138m]

https://material.angular.io/cdk/scrolling/overview
自带一个支持的 angular

[exonuclease]

虚拟化技术吧

[gzxu]

多谢楼上各位～

[gzxu]

其实我现在打算在 GTK 里面搞一个表放大量数据，但尽管前端有这么多库实现了 Virtual list，GTK 的生态太差了，得自己实现。先不操心大量数据的场景好了。

[wuhongwei]

迂回一下， 类似 lazy-load 一样，先做 10000 个空 div 给放如 IntersectionObserver 的 queue， 需要的时候在渲染，10000 个空 div 不会 卡顿的