离子3:如何处理性能不佳的巨型html文件?

Question

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

在呈现模式时，打开模式需要几秒钟。

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

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

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

但是根据离子文档，我不能重用模态。

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

谢谢。

编辑：我尝试使用本地存储来保存json(约100kb)并停止使用XHR以减少加载时间。但是，我不觉得加载时间变得更快。我只用 100 个列表而不是 1000 个列表进行了测试，打开模态的速度要快得多。

Answer 1

有几种选择：

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

2. 如果它是"相当"静态的，无论这意味着什么，只需将其放在 DOM 中的某个地方，这样它只需要在每次页面加载时加载一次。当用户单击链接以打开模态时，将数据存储在隐藏字段中。在页面加载时异步加载它甚至可能是一个好主意，从用户的角度来看，这可能会完全消除任何加载时间。

3. 使用您自己的模态，只需隐藏/显示它。异步加载它。

缓存示例

jQuery AJAX 示例

Answer 2

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

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