2

The MDN docs say:

Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

So

const el1 = document.createElement('div');
const el2 = document.createElement('div');
const df = document.createDocumentFragment();
df.appendChild(el1);
df.appendChild(el2);
document.body.appendChild(df);

is better than

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.appendChild(el1);
document.body.appendChild(el2);

But what about using append ? Is append as efficient as using documentFragment?

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.append(el1,el2);
JLRishe
  • 99,490
  • 19
  • 131
  • 169
8HoLoN
  • 1,122
  • 5
  • 14
  • The MDN text is a bit inaccurate, appending elements separately doesn't have an affect to the count of the renderings or reflows, that's done only once after the script has been executed. "Potentially" is the keyword, because if you're going to _read_ some values from the DOM in between the appendings, then it's possible to trigger reflow calculation in the middle of the script execution. The advantage of `documentFragment` is, that you can create a fragment of the elements you normally can't do in some other element. For example you can create a bunch of `tr`s, and then append them to a table – Teemu May 19 '21 at 09:55
  • I do not understant the point of your comment, you do not talk about difference with .append method. However, concerning your example with table. `[document.createElement('tr'),document.createElement('tr')].forEach(tr=>{document.querySelector('#tbl').appendChild(tr);})` but it's not the point of this question. – 8HoLoN May 19 '21 at 10:05
  • The point is, that there's no difference in the efficiency of a wrapper element, documentFragment or when appending elements with `append` (a HTMLTableElement might be an exception in some conditions). – Teemu May 19 '21 at 10:11
  • @Teemu what is the source/reference of your affirmation ? – 8HoLoN May 19 '21 at 10:13
  • It's a combination of a lot of small pieces of how the DOM works. – Teemu May 19 '21 at 10:15
  • Could you detail the exception cases `(a HTMLTableElement might be an exception in some conditions). ` ? – 8HoLoN May 19 '21 at 10:17
  • A table is incredible complex element. Depending on the layout, ex. you've a table which adapts the size according to the content of the cells, there's a lot of calculations every time you add a new row/cells to a table in the live DOM. If you've a fixed layout, the calculations are much simpler. – Teemu May 19 '21 at 10:23
  • 1
    [A small test](https://jsfiddle.net/2k68r5nh/) shows you, that appending elements directly to the DOM is not slower than appending a fragment. If you'd switch the commented lines 11/12, you'd detect a massive performance issue with appending to the DOM. Reading specific values from the DOM during manipulation causes a recalculation of the layout. A parentless fragment doesn't suffer this issue, but it gives kinda incorrect values (the same stands when appending to a wrapper element too). Appending elements separately makes it possible to kill the performance, you can't do that with fragments. – Teemu May 19 '21 at 13:02

0 Answers0