【问题标题】：Faux VirtualScrolling in Ionic AppIonic App 中的虚假虚拟滚动
【发布时间】：2017-10-26 18:06:59
【问题描述】：
出于性能原因，我正在尝试在 Ionic 应用程序中模仿虚拟滚动（表格单元回收）。在我的应用程序中，我有一些屏幕，其中包含数百个带有图像的项目。出于这个原因，我不能同时显示它们。 Ionic 中的 virtualScroll 组件应该可以解决问题，但遗憾的是目前存在一个不允许它与动态管道一起使用的错误。
我想构建自己的虚拟卷轴技术，但我认为我不适合创建自己的合法虚拟卷轴。我的问题是：我可以通过显示来模仿虚拟滚动：无，以及对不在视口中的项目的父组件设置高度吗？这会实现完全虚拟滚动所能实现的一些性能改进吗？
【问题讨论】：
标签：
angular
ionic-framework
mobile
virtualscroll
【解决方案1】：
回答你的问题：
您将通过设置 display: none 获得图形渲染性能优势，因为它会从渲染树中删除这些单元格。这可能会导致更平滑的滚动。
但是，您仍然将所有表格单元格分配到 DOM 上，而不是真正的虚拟滚动，它只分配可见的单元格。如果您决定进行自定义实现，尤其是在您拥有大型数据集的情况下，我会考虑到这一点。在内存和 CPU 方面，DOM 上 10 个可重用单元的性能总是比 10,000 好得多，其中 9,990 设置为“display: 'none'”。
我会说你最好的选择是权衡你的选择并找出使用动态管道的解决方法（这可能比尝试实现自己的虚拟滚动更容易），这样你就可以使用内置的虚拟滚动。