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

标签 performance angular cordova ionic-framework ionic2

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

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

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

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

我还计划使用 wkwebview。

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

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

最佳答案

什么是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/

关于performance - Ionic - 可滚动的大图像列表 - 内存使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44791352/

相关文章:

c++ - 为什么 unordered_map 和 map 提供相同的性能?

r - 字符串向量中的高效模式检测

angular - 交换 Nebular 主题时更改 Bootstrap 表字体颜色

cordova - 如何在 Cordova 指定我的目标但出现此错误

cordova - 通过 PhoneGap Build 构建应用程序时排除文件夹

小型迭代的 Python 双端队列性能

Windows 2003 与 Windows 2008 中的 Java Web 应用程序性能

forms - Angular 2 响应式表单 + 指令验证

node.js - 安装 Ngx-Admin 时出错

javascript - Phonegap/Cordova 中的可滚动文本区域