Ionic 3：如何处理性能不佳的巨大 html 文件？

Question

我在打开 ionic 3 Modal 时遇到性能问题。 我需要在模态中显示一个列表，列表的长度是 1000。

在渲染时打开模态框需要几秒钟。

我想过在modal中使用InfiniteScroll，但是我使用Searchbar这意味着服务器端应该为此开发更多的API。

由于列表的数据是相当静态的，我想像这样：

1. 预加载模态页面并默认隐藏。
2. 在应该打开模式时显示它。
3. 当模态框关闭时，不要破坏它，只是隐藏。

但是根据ionic docs，我不能重用modal。

所以我的问题是：有没有更好的方法在 ionic3 中制作可搜索的 1000 个列表？

谢谢。

编辑：我尝试使用 localStorage 来保存 json（大约 100kb）并停止使用 XHR 来减少加载时间。但是我不觉得加载时间变快了。我只测试了 100 个列表而不是 1000 个，并且打开模式要快得多。

Answer 1

有几种选择：

1. 如果它实际上是静态的，只需将其放在网络存储中，并在用户重新加载页面时检索它。

1234563当用户单击链接打开模式时，将数据存储在隐藏字段中。在页面加载时异步加载它甚至可能是一个好主意，从用户的角度来看，这可能会完全消除任何加载时间。

2. 使用您自己的模式，然后隐藏/显示它。异步加载。

Example of cache

jQuery AJAX Example

Answer 2

好的，我使用<ion-infinite-scroll (ionInfinite)="doInfinite($event)">做到了。

1. 首先，当modal打开时，从服务器获取列表数据 并保存在local storage
2. 一开始只显示1000个项目中的20个。所以渲染 会快很多。
3. 当用户向下滚动时，doInfinite 将被执行。
4. 在doInfinite 函数中，检查下一个索引是什么以便显示 数据。就像分页逻辑一样。并获取正确的数据和push 列表数组。
5. 关于<ion-searchbar>，当您从任一服务器获取列表数据时 或本地存储，保存原始列表数据以供搜索（在我的情况下，我只是使用了this.originalData = myData 。）。通过这样做，每当用户通过键入搜索时，您可以从 1000 个数组中过滤，但不会出现渲染缓慢的问题。