javascript - 向 dom 添加大量 img 元素时出现 net::ERR_INSUFFICIENT_RESOURCES 错误

Question

我在一个图像较多的网站上使用jquery和backbone.js。该网站的核心功能涉及许多相当小的图像(150x180px jpg 文件)。图像列表通过 ajax/json 使用backbone.js 集合获取来获取。然后，对于集合中的每个模型，都有一个渲染的 View ，其中包含 img 元素。然后将 View 添加到 dom 中。

有一个用户拥有数千张图像 - 相对于我们大多数普通用户拥有的图像数量而言，这是一个 super 边缘情况。当该用户的图像数据加载时，浏览器无法处理加载所有图像，至少以我们当前代码的工作方式是如此。大约一半的图像最终加载正常，但浏览器(我使用的是 chrome 35)在几分钟内没有响应。另一半图像无法加载，浏览器控制台会针对未加载的图像显示“net::ERR_INSUFFICIENT_RESOURCES”错误。

这是我们加载图像的代码的基本部分。任何人都可以从技术上解释为什么会发生此图像加载失败，并提供一个不涉及向图像列表添加分页或“单击她以加载更多”功能的解决方案吗？

// inside the view that renders the images
render: function () {
    this.collection.each(this.addOne, this);    
    return this;
},
addOne: function (imgModel) {
    var imgView = new App.Views.ImageView({ model: imgModel});
    this.$el.append(imgView.render().el);
}

以及 App.View.ImageView View 的 render() 代码:

render: function () {
    var renderedTemplate= theTemplate(this.model.toJSON());
    this.$el.html(renderedTemplate);
    return this;
}

以及 App.View.ImageView 使用的模板(仅使用 _.template 编译一次):

<script type="text/template" id="thumb-template">          
        <a href="<%= ImageUrl%>"><img src="<%= ImageUrl%>" /></a>
        <div class="delete"></div>
</script>

Answer 1

我相信这是影响您的错误:https://bugs.chromium.org/p/chromium/issues/detail?id=108055

从 2011 年到 2016 年，一直有关于此问题的讨论，并且仍在持续进行中。基本上Chrome无法在短时间内处理大量请求。

以下是对我的应用有一点帮助的内容:

• 您可以添加一个事件处理程序，例如 img.addEventListener("error",tryAgainLater)但这并不能拯救其他资源无法加载，因此您的脚本正在加载数百张图像可能会干扰其他图像。
• 尝试缓存更多图像以减少网络请求数量。
• 改用 Firefox...显然不能告诉客户这一点。

以下是不起作用:

• 将图像合成到 Canvas 上并丢弃单个图像。这没有帮助，因为它与网络请求有关，而不是存储在内存中的图像。
• 在前一个图像完全加载之前，不会启动下一个请求。也许这是因为连接实际关闭或从内存(或其他资源)中删除需要时间。

尚未尝试:

• 通过 HTTP/2 或 SPDY 加载图像，其中有很多请求但只有一个连接。
• 在您的情况下，您可能可以内联图像以避免发出请求。示例来自 https://css-tricks.com/data-uris/ :<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />