net::ERR_INSUFFICIENT_RESOURCES 将大量 img 元素添加到 dom 时出错 [英] net::ERR_INSUFFICIENT_RESOURCES error when adding numerous img elements to dom

问题描述

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

I'm using jquery and backbone.js on a site that is pretty image heavy. The core functionality of the site involves many many fairly small images (150x180px jpg files). The list of images comes in via ajax/json using a backbone.js collection fetch. Then for each model in the collection there is a view that gets rendered which contains an img element. The view is then added to the dom.

特别是有一个用户拥有数千张图片——相对于我们大多数普通用户拥有的图片数量而言，这是一个超级边缘情况.当该用户的图像数据加载时，浏览器无法处理加载所有图像，至少在我们当前代码的工作方式中是这样.大约一半的图像最终可以正常加载，但是浏览器(我使用的是 chrome 35)在几分钟内没有响应.另一半图像无法加载，并且浏览器控制台显示未加载图像的net::ERR_INSUFFICIENT_RESOURCES"错误.

There is one user in particular that has thousands of images - a super edge-case relative to how many images most of our normal users have. When this user's image data loads, the browser just can't handle loading all the images, at least in the way our current code works. About half of the images load okay eventually, but the browser (i'm using chrome 35) becomes unresponsive for several minutes. The other half of the images fail to load, and the browser console shows "net::ERR_INSUFFICIENT_RESOURCES" errors for the images that don't load.

这是加载图像的代码的重要部分.任何人都可以从技术上解释为什么会发生这种图像加载失败，并提供一种解决方案不涉及向图像列表添加分页或点击她加载更多"功能?

Here is the essential part of our code that loads the images. Can anyone provide an explanation as to technically why this image loading failure happens, and offer a solution that doesn't involve adding paging or "click her to load more" functionality to the image list?

// 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() 代码:

And the render() code for the App.View.ImageView view:

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

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

And the template used by App.View.ImageView (this gets compiled only once using _.template):

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

推荐答案

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

I believe this is the bug affecting you: https://bugs.chromium.org/p/chromium/issues/detail?id=108055

从 2011 年到 2016 年一直在讨论它，并且仍在进行中.基本上 Chrome 无法在短时间内处理非常大量的请求.

There's been discussion about it from 2011-2016, and is ongoing. Basically Chrome can't handle a very large number of requests in a short period of time.

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

Here's what helped a bit for my app:

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

• You could add an event handler like img.addEventListener("error",tryAgainLater) but that won't rescue the other resources that fail to load, so your script that loading hundreds of images could interfere with others.
• Try to cache more of the images to reduce the number of network requests.
• Use Firefox instead... obviously can't tell customers that.

以下是不起作用:

• 将图像合成到画布上并丢弃单个图像.这没有帮助，因为它与网络请求有关，而不是存储在内存中的图像.
• 在上一个图像完全加载之前不会开始下一个请求.也许这是因为连接需要时间才能真正关闭或从内存(或其他资源)中移除.

尚未尝试:

• 通过 HTTP/2 或 SPDY 加载图像，其中有很多请求但只有一个连接.
• 在您的情况下，您可能可以内联图像以避免提出请求.来自 https://css-tricks.com/data-uris/ 的示例:< IMG WIDTH = 16" HEIGHT = 16" ALT = 星" SRC = 数据:图像/GIF; BASE64，R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBS/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>

• Loading the images over HTTP/2 or SPDY where there are many requests but only one connection.
• In your case you could probably inline the images to avoid making requests. Example from https://css-tricks.com/data-uris/ : <img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

这篇关于net::ERR_INSUFFICIENT_RESOURCES 将大量 img 元素添加到 dom 时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！