离子 - 可滚动的大图像列表 - 内存使用

Question

我有一个使用最新版本的角4和离子3的离子应用程序。

该应用程序包含许多非常大的图像的可滚动列表。

IOS上的内存崩溃是因为那些巨大的纹理都堆积在内存中。

现在我正在使用VirtualScroll和ion-image来尝试解决这个问题。

我还计划使用wkwebview。

当它们不在视口中时，是否有任何处理从内存中卸载纹理？

如果没有 - 我该如何手动执行此操作？

Answer 1

VirtualScroll的全部内容：

  

基本思想是我们只在DOM中创建足够的元素来显示当前在屏幕上的列表数据，并且我们回收这些DOM元素以在屏幕滚动时显示新数据。

使用VirtualScroll的好处在于性能方面的巨大优势。 当你有1000个项目时，DOM可能会非常沉重，更不用说可能存在内存崩溃的危险了。

ion-img做了什么：

  

ion-img组件类似于标准的img元素，但它也增加了功能以提供改进的性能。功能包括仅加载可见的图像，使用Web worker处理HTTP请求，防止滚动时的jank和内存缓存。

此外：

  

使用ion-img，应用程序可以将资源专用于可查看的图像

这种方法的好处对于提高性能也是巨大的，因为不可见的图像不会被渲染。

最后：

ion-img有一个名为cache

的属性

  

成功下载图像后，可以对其进行缓存   在记忆中。这对于允许图像的VirtualScroll非常有用   在滚动之前，缓存和不渲染的响应   已完成，可以更顺畅地滚动。

您可以相应地设置此属性。

我会尝试进一步丰富我的答案，请告诉我任何我错过的或任何不清楚的事情。

来源：

https://ionicframework.com/docs/api/components/img/Img/， https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/， https://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/