angular - Ionic App 中的虚假虚拟滚动

Question

出于性能原因，我试图在 Ionic 应用程序中模仿虚拟滚动（表格单元回收）。在我的应用程序中，我有一些屏幕上有数百个带有图像的项目。出于这个原因，我不能同时显示它们。Ionic 中的 virtualScroll 组件应该可以解决问题，但遗憾的是，目前存在一个不允许它与动态管道一起使用的错误。

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

Answer 1

要回答您的问题：

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

但是，您仍然将所有表格单元格分配到 DOM 上，而不是真正的虚拟滚动，它只分配可见的单元格。如果您决定进行自定义实现，尤其是在您拥有大型数据集的情况下，我会考虑到这一点。在内存和 CPU 方面，DOM 上的 10 个可重用单元的性能总是比 10,000 好得多，其中 9,990 设置为“显示：‘无’”。

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