net::ERR_INSUFFICIENT_RESOURCES error when adding numerous img elements to dom

Question

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

Answer 1

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

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:

• 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.

Here's what did not work:

• Compositing the images on to a canvas and discarding the individual images. This did not help because it's related to the network requests, not the images stored in memory.
• Not starting the next request until the previous image is fully loaded. Perhaps this is because it takes time for the connection to actually close or be removed from memory (or some other resource).

Yet to try:

• 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" />

Answer 2

The method toJSON() is very expensive for the browsers as it clones the 'attributes' in the model to return a JSON representation.

...
// Return a copy of the model's `attributes` object.
toJSON: function(options) {
  return _.clone(this.attributes);
},
...

In some scenarios where I just wanted to display the information of my model, I simply used the 'attributes' property directly, it saves very good time of processing.

Try replacing this line in the ImageView file:

theTemplate(this.model.toJSON());

for

theTemplate(this.model.attributes);

Hope this information helps.