performance - Ionic - 可滚动的大图像列表 - 内存使用

Question

我有一个 Ionic 应用程序，它使用最新版本的 angular 4 和 ionic 3。

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

我在 IOS 上遇到了内存崩溃，因为那些巨大的纹理都堆积在内存中。

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

我还计划使用 wkwebview。

当它们不在视口(viewport)内时，这些是否处理从内存中卸载纹理？

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

Answer 1

什么是VirtualScroll:

The basic idea is that we only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off screen.

使用 VirtualScroll 的好处在性能方面是巨大的。当您渲染 1000 个项目时，DOM 可能会非常重，更不用说可能出现内存崩溃的危险了。

ion-img 的作用:

The ion-img component is similar to the standard img element, but it also adds features in order to provide improved performance. Features include only loading images which are visible, using web workers for HTTP requests, preventing jank while scrolling and in-memory caching.

还有:

with ion-img the app is able to dedicate resources to just the viewable images

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

最后:

ion-img 有一个名为 cache

的属性

After an image has been successfully downloaded, it can be cached in-memory. This is useful for VirtualScroll by allowing image responses to be cached, and not rendered, until after scrolling has completed, which allows for smoother scrolling.`

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

我会尝试进一步丰富我的答案，请提出任何我遗漏或不清楚的地方。

来源:

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/