What is the best option to add 50+ blocks to the DOM?

Question

JavaScript

I get AJAX data. From them I form new DOM elements. In general, I get 50+ elements with text, pictures and other things. I add to the DOM at once, via $.append :

var elems = [elem, elem, elem...];
$("#dump").append(elems);

But the whole thing eerily slows down the browser, how to avoid this? Add one by one? Translate to HTML and add via $.html ? Use documentFragment or...? What is the most reliable and smart way?

Answer 1

To translate to html, you still have to add all the elements to one container to take it's innerHTML. That is, you will do the same insertion, except perhaps in memory, plus the insertion of the text itself into the dom, from which the browser will then create an object representation of the elements in a new way. There is too much garbage.
As a solution, you can carry out the insertion itself by native means. jsfiddle.net/bpd7b1dx here you can clearly see the difference in speed.
I can’t say anything about documentFragment, I only read that it is not particularly useful in modern browsers, but in the same test for 1000 elements there was an increase of ~ 20% compared to a normal native insert.