Display many elements in the DOM can affect performance?

Question

Display many elements in the DOM can affect performance?

Navigation

#1 by (16 votes)

14

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

I wonder if this operation can cause some performance problem regarding memory or even navigation (causing crashes, for example).

I do not want to get into discussions about the Angular Watcher, ng-repeat, and the like, but rather know specifically about the DOM.

Have many elements in the DOM affect performance?

For example, if I do an infinite scroll on my page, and it generates about 10,000 divs, could this impact my page performance?

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>

javascript html dom

asked by anonymous 13.08.2018 / 20:41

1 answer

How to use and what is 'super' in Python classes? How to create a select with images in the options?

score 16 · Accepted Answer

Having too many elements in the DOM could detract from performance?

Yes, and let's look at two things:

memory - the more elements the DOM has, obviously more memory will consume, below I put two images to illustrate, but this should not be a big problem on desktop, in devices may be, where the memory is generally smaller.
processing - here is the aspect that most impacts. Just uploading content and going on display is not the biggest problem, but rather when you need to access the DOM and for example look for an element and change it. This can crash the browser engine while processing Javascript depending on the size of the DOM. Also, based on the idea that your DOM has many nodes and elements, you can also think of the idea that will exclude nodes / elements. Saving references to elements can generate memory leaks (here's a great read on this: Memory Management in Javascript ), which can lead to serious performance problems.

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

Certainly yes, especially if the content added is not optimized, or if there is content change. In your code example it's easy to see this:

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

It would be best to add all the elements to a new structure, which is not already in the DOM, and then, at the end, just add everything to the DOM, like this:

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 memory usage, running your snippet , see memory consumption with no elements:

And with 100,000+ elements:

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

Is there any recommendation on this?

There are several things you can do to improve performance:

have few nodes / elements in the DOM (obvious mean);
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 damage the work of the garbage collector;
When possible, test with Javascript pure instead of frameworks . Here is my experience: older versions of JQuery have problems validating a large number of fields, leaving the browser extremely slow. I had a little form more than 500 inputs that generated a slowness of almost 60s to validate. This was later corrected, but a pure validation was very more efficient;

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