向dom添加大量img元素时出现net :: ERR_INSUFFICIENT_RESOURCES错误
我在一个图像很重的网站上使用jquery和backbone.js。 该网站的核心function涉及许多相当小的图像（150x180px jpg文件）。 图像列表通过ajax / json使用backbone.js集合提取。 然后，对于集合中的每个模型，都会有一个包含img元素的渲染视图。 然后将视图添加到dom中。
特别是有一个用户拥有数千个图像 – 相对于大多数普通用户拥有的图像数量而言，这是一个超级边缘的情况。 加载此用户的图像数据时，浏览器无法处理加载所有图像，至少在我们当前代码的工作方式。 大约一半的图像最终加载正常，但浏览器（我使用的是chrome 35）在几分钟内没有响应。 另一半图像无法加载，浏览器控制台显示未加载图像的“net :: ERR_INSUFFICIENT_RESOURCES”错误。
这是加载图像的代码的基本部分。 任何人都可以从技术上解释为什么会发生这种图像加载失败，并提供一个解决方案，不涉及添加分页或“点击她加载更多”function到图像列表？
// 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视图的render（）代码：
render: function () { var renderedTemplate= theTemplate(this.model.toJSON()); this.$el.html(renderedTemplate); return this; }
App.View.ImageView使用的模板（这只使用_.template编译一次）：
<a href=""><img src="" />
我相信这是影响你的错误： https ： //bugs.chromium.org/p/chromium/issues/detail？id = 108055
从2011年到2016年，它一直在讨论它，并且正在进行中。 基本上，Chrome无法在短时间内处理大量请求。
这是我的应用程序的一些帮助 ：
- 您可以添加一个像
img.addEventListener("error",tryAgainLater)这样的事件处理程序img.addEventListener("error",tryAgainLater)不会挽救无法加载的其他资源，因此加载数百个图像的脚本可能会干扰其他图像。 - 尝试缓存更多图像以减少网络请求的数量。
- 使用Firefox代替……显然无法告诉客户。
这是不起作用的 ：
- 将图像合成到canvas上并丢弃单个图像。 这没有用，因为它与网络请求有关，而不是存储在内存中的图像。
- 在上一个图像完全加载之前不启动下一个请求。 也许这是因为连接实际关闭或从内存（或其他一些资源）中删除需要时间。
然而，尝试：
- 通过HTTP / 2或SPDY加载图像，其中有许多请求但只有一个连接。
- 在您的情况下，您可以内联图像以避免提出请求。 示例来自https://css-tricks.com/data-uris/：
toJSON（）方法对于浏览器来说非常昂贵，因为它克隆了模型中的“属性”以返回JSON表示。
... // Return a copy of the model's `attributes` object. toJSON: function(options) { return _.clone(this.attributes); }, ...
在某些我只想显示模型信息的场景中，我只是直接使用’attributes’属性，它可以节省非常好的处理时间。
尝试在ImageView文件中替换此行：
theTemplate(this.model.toJSON());
对于
theTemplate(this.model.attributes);
希望这些信息有所帮助