离子2滚动性能问题

Question

关于ionic2和Angular2的博客和评论给我留下了深刻的印象，我开始在离子2中编写一个应用程序，并发现ionic2滚动性能不适合iOS和Android的大量记录。

1. 我在大多数列表项目的图像之间有一个很大的项目列表
2. 滚动性能适用于10到20个项目，但在涉及30多个项目时非常慢
3. 经过大量搜索后发现虚拟滚动离子并使用它然后性能略有改善，最多50件物品但在65件以上物品后又慢了

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

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

Answer 1

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

尝试使用Ionic2的虚拟滚动

虚拟滚动解决了这个问题。在Ionic 1中，这被称为Collection Repeat，在Ionic 2中它被称为Virtual Scroll，但它是一个在HTML5移动开发中广泛使用的概念。基本的想法是我们只在DOM中创建足够的元素来显示当前在屏幕上的列表数据，并且我们回收这些DOM元素以在屏幕滚动时显示新数据。

更多信息：Ionic Framework - Virtual Scroll

Answer 2

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

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

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

},{passive: true});

它尚未在所有浏览器中实现，但希望在所有浏览器实现时，所有主要的js框架都将采用这种技术。