Can displaying many elements in the DOM impair performance?

Question

I really like using libraries like Vue and AngularJs and my favorite implementation was to Infinite Scroll (or loading on demand). I mean, I initially upload 15 records via ajax. If the user scrolls the page, loads 15 more, and so on until the records are finished, and assembling the elements in the DOM accordingly.

I keep wondering if this operation can cause any performance problems regarding memory or even navigation (causing crashes, for example).

I don’t want to get into discussions about the Angular Watcher, ng-repeat and the like, but specifically about the DOM.

Having many elements in the DOM could harm performance?

For example, if I do an Infinite scroll on my page, and it generates about 10,000 Ivs, it could impact the performance of my page?

Is there any recommendation on this?

Example:

var listElm = document.querySelector('#infinite-list');


var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 100; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }
}


listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});


loadMore();

#infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}

<ul id='infinite-list'>
</ul>

Answer 1

Having many elements in the DOM could harm performance?

Yes, and let’s look at two aspects:

• memory - the more elements the DOM has, obviously more memory will consume, below I put two images to illustrate, but this shouldn’t be a big problem in general desktops, but on devices can be, where memory is usually smaller.
• processing - here is the aspect that most impacts. Just upload content and go displaying is not the biggest problem, but when you need to access the DOM and for example search for an element and change it. This can lock the browser engine while processing Javascript depending on the size of the DOM.
  Moreover, starting from the idea that your DOM has many nodes and elements, you can also think of the idea that will exclude nodes/elements. Save references to elements can generate memory Leaks (here’s a great read on this: Memory management in Javascript), which can lead to very serious performance problems.

For example, if I do an Infinite scroll on my page, and it generates about 10,000 Ivs, it could impact the performance of my page?

Absolutely yes, especially if the added content is not optimized, or if the content changes.
In your code example it is easy to observe this:

for (var i = 0; i < 100; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }

The best thing would be to add all the elements to a new structure, which is not yet in the DOM and then, only at the end, add everything to the DOM, in this way:

var frag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    frag.appendChild(item);
  }
listElm.appendChild(frag);

About using memory by running your snippet, see memory consumption with no element:

And with 100000+ elements:

That is, practice doubled, so depending on the memory available on the customer’s equipment, the size of the DOM will make a difference.

Is there any recommendation on this?

There are several things that can be done to improve performance:

• have few nodes/elements in the DOM (half obvious);
• manipulate the DOM block, as in the above code example;
• avoid references to nodes/elements in global variables, especially elements that can be excluded, so as not to harm the work of the Garbage Collector;
• where possible, test with Javascript pure in place of frameworks. Here an experience of mine: older versions of JQuery has problems validating a large number of fields, leaving extremely slow the browser. I had a form with little more than 500 inputs that generated a slowdown of almost 60s to validate. This was corrected later, but a pure validation was very more efficient;

There are several other tips, but here I limited myself to some thinking about the focus of the question, any contribution will be very welcome.