使用angularjs的

Question

我有一个非常特殊的问题。我需要用angularjs显示一个长列表（大约200-2000）的大图像（每个1-4MB）。我已经开始意识到我必须在屏幕上只显示一小部分图像，并使用虚拟顶部和底部DOM元素模拟其他图像不可见的图像。我的解决方案接近linkedin smooth infinite scrolling。

它按预期工作：我有很少的DOM元素用于非常长的列表（通常大约10个可见项）。您可以查看演示plunkr。我在这里发布了一些HTML代码来说明这个想法：

<light-scroll name="images" 
              class="list">
    <!-- top dummy DOM element with dynamic height will be placed here-->

    <!-- transcluded part of visible items -->
    <div ng-repeat="item in visibleItems track by item.url"
         id="{{ item.url }}"
         ng-click="doSomeJob(item)"
         class="list-item">
         <img height="300"
              hide-till-loaded="item.markAsLoaded()"
              defer-src-loaded="item.loaded"
              defer-src="item.url">
         <div>{{ item.name }}</div>
     </div>

     <!-- bottom dummy DOM element with dynamic height will be placed here-->
</light-scroll>

问题

使用长列表（通常约200-500个图像）测试此代码时，应用程序有时会导致崩溃。崩溃不容易复制，但它们会发生。

我的研究

我使用Chrome任务管理器查看应用程序的内存使用情况。它非常大：从300MB到1.5GB。所以我认为我有记忆问题。

我认为问题出在我的代码中，而且我的内存泄漏了。我开始使用Google Developers Memory Diagnosis page和Eliminating memory leaks in Gmail

中所述的Chrome开发工具（时间轴和配置文件）

我找不到任何泄漏，但我发现了一个有趣的规律性。

1. 如果我不经常滚动列表（如滚动到底部，然后等待20-30秒，然后再次滚动，然后再等待等等。）垃圾收集器工作正常并清理内存和DOM节点。在这里您可以看到时间轴结果：
2. 如果我积极地滚动（快速到顶部，快到底，然后是中间，然后是底部等）没有任何暂停，垃圾收集器无法清理内存和DOM节点。时间表再次出现：

我在监控任务管理器时获得了相同的结果。在30-60秒暂停后，记忆力通常会下降。

问题

1. 您能否建议其他任何方法来检测内存泄漏？
2. 浏览器是否会将所有图像保留在内存中，并且由于某种原因无法对其进行垃圾回收？
3. 您能为这个缓存或/和内存问题建议任何解决方案吗？
4. 您能否就实施包含大图片的长列表提出任何其他想法？

注释

我没有使用缩略图，因为我需要一个缓存的全分辨率图像，以便以后在我的工作流程中立即工作。我可以强制用户在滚动列表时等待，但是当他点击图像并开始使用它时，我不能强迫他等待。

我尝试使用track by $index选项重复使用ng-repeat DOM元素。是的，它对DOM节点的数量有所帮助，但内存仍然会增长到很大的值。