Javascript 性能慢，500kb图像需要6s+；装载

在我的应用程序中，我有三个ng repeat部分，它们重复一个字符串和一个图像，对于较小的内容，性能很好，-但是如果有“很多”（100+）图像，页面加载需要相当长的时间（10+秒）

{{data.label | limito:50}

firefox控制台的性能测试。

448KB的图像加载不需要7.66秒

我对糟糕的性能感到非常困惑，这是100多张图片所期望的吗

不确定延迟加载是否对我有帮助，或者我的设置是否存在根本性的问题

---

如何提高加载时间性能？

您应该只在视口中加载图像，在用户滚动时懒散地加载其余的图像。请参见示例阅读此处的答案：-浏览器对同一域的并发请求有限制。Chrome和Firefox每个域一次下载6个。其他浏览器甚至更少（2-3）。通常由于服务器和网络问题，图像加载速度较慢，请选择一个更好的。图像的总大小并不那么重要（如果您有快速连接的话）。问题在于它们的数量。浏览器一次只能从同一个域下载少量内容。结果就像从瓶子里倒水：水不会一下子全部出来。@AndersPedersen你可以从不同的子域中提供图像。这将允许浏览器更高效地下载它们。然而，这可能并不容易做到。您还可以通过延迟加载来限制加载图像的数量。这可能是最容易实现的解决方案。

<div ng-repeat="data in data">

  <div class="horizontalLabelImageWrap">
    <p> {{data.label | limitTo:50}} </p>
    <div class="imageContainer">
      <img class="thumbnailImage" ng-src="{{::data.image}}" ng-if="data.image != null" ng-mouseover="imageHover($event)" />
    </div>
  </div>

</div>