Ionic App 中的虚拟滚动

Faux VirtualScrolling in Ionic App

出于性能原因,我正在尝试在 Ionic 应用程序中模仿虚拟滚动(table 单元格回收)。在我的应用程序中,我有一些屏幕包含数百个带图像的项目。因此,我无法同时显示它们。 Ionic 中的 virtualScroll 组件应该可以解决问题,但遗憾的是,目前有一个错误不允许它使用动态管道。

我想构建自己的虚拟卷轴技术,但我不认为我准备好创建自己的合法虚拟卷轴。我的问题是:我可以通过显示来模仿虚拟滚动:none,以及不在视口中的项目的父组件的设置高度吗?这会实现完全虚拟滚动所能实现的一些性能改进吗?

回答你的问题:

您将从设置 display: none 中获得图形渲染性能优势,因为它会从渲染树中删除这些单元格。这可能会导致更平滑的滚动。

但是,您仍在将所有 table 单元格分配到 DOM,这与真正的虚拟滚动相反,后者只分配尽可能多的可见单元格。如果您决定进行自定义实现,我会考虑到这一点,尤其是在您拥有大型数据集的情况下。 DOM 上的 10 个可重复使用的单元在内存和 CPU.

方面总是比 9,990 设置为 "display: 'none'" 的 10,000 好得多

我会说你最好的选择是权衡你的选择并找出使用动态管道的解决方法(这可能比尝试实现你自己的虚拟滚动更容易)这样你就可以使用内置的虚拟滚动.