Web应用程序中长列表的内存问题

Question

我正在开发一个渐进式网络应用程序（PWA）项目，其中包含很长的项目列表。这些项目包括：头像，名称，文字说明和按钮。理想情况下，我希望这个项目能够在平板电脑（主要是iPad）上运行。

要求：

• 该列表必须按字母顺序排列。
• 每个项目都有动态高度。
• 滚动必须顺畅，与联系人iOS应用程序相同。
• 以相同字母开头的每组人都会有一个字母标题，与联系人iOS应用程序中的标题相同。
• 右侧有一个按字母顺序排列的列表，该列表应链接到列表中的相关组字母。
• 字母顺序列表必须支持与Contacts iOS应用程序相同的平滑滚动。

有关详细信息，请参阅随附的屏幕截图

我只使用jQuery，Bootstrap和iScroll，没有其他框架。

我已经成功完成了大部分工作，但遇到了一些问题：

当列表太长时，PWA会崩溃，可能是因为内存问题。 我已经编辑了iScroll Infinite的一些部分，它们在不使用时基本上从DOM中删除了大部分项目但是会产生一些UI问题。

任何想法如何解决这些问题？

我已经做了一些例子以便更清楚，因为我认为很难在没有显示的情况下解释上述问题：

使用额外的CSS：

https://shakedos.com/examples/list/pwa.php

没有CSS：

https://shakedos.com/examples/list/pwa-nocss.php

截图：