ionic 2滚动性能问题

Question

我对ionic2和Angular2的博客和评论印象非常深刻，我开始用ionic 2编写应用程序，发现ionic2滚动性能对于iOS和Android的大量记录都不理想。

1. 我有一个很大的项目清单，其中大多数清单项目都在图像之间
2. 滚动性能适合10到20个项目，但涉及30个以上项目时非常慢
3. 经过大量搜索后，找到了ionic中的虚拟滚动条并使用了它，然后最多50个项目的性能略有改善，但超过65个项目后性能再次缓慢

我在iOS中尝试了WKWebview，性能有所提高，但是对于大列表，屏幕经常变黑，所以我放弃了这个想法。 我不想使用人行横道，因为它增加了应用程序的大小，所以从未尝试过。

任何人都可以帮助建议解决此问题的任何解决方法，也可以提供任何纯JavaScript框架解决方案来显示没有任何问题的大列表？ 适用于Android和ios。

Answer 1

滚动是与移动应用程序最常见的交互之一，感觉正确非常重要。 本机应用程序具有可平滑滚动的列表，它们对触摸和方向变化做出响应，以自然的方式加速和减速。

尝试使用Ionic2的虚拟滚动

虚拟滚动解决了此问题。 在Ionic 1中，这称为“集合重复”；在Ionic 2中，其称为“虚拟滚动”，但这是在HTML5移动开发中广泛使用的概念。 基本思想是，我们仅在DOM中创建足够的元素来显示当前在屏幕上的列表数据，并且当这些DOM元素从屏幕上滚动时，我们对其进行回收以显示新数据。

更多信息： Ionic框架-虚拟滚动

Answer 2

滚动性能是大多数javascript框架中的常见问题。

这是因为触摸和滚轮事件。 但是您可以将{passive：true}传递给事件侦听器以启用一些优化。 通过预先进行此操作，您说您的处理程序将永远不会使用preventDefault（）来禁用滚动。

addEventListener(document, "touchstart", function(e) {

},{passive: true});

尚未在所有浏览器中实现，但希望所有主流js框架都将采用此技术。