Is this still the case with the newer transactional methods like Element.append(), Element.before(), and DocumentFragment?
When I manipulate the DOM I try to create the entire structure in a fragment and the use .append(...) only once.
When I manipulate the DOM I try to create the entire structure in a fragment and the use .append(...) only once.
element.append([array of Elements]);
for(const el of [array of Elements])
element.appendChild(el);
But think about updates like this:
element.patch(<p multiple={n > 1}>There {n > 1? "are": "is"} {n} bottle{n > 1? "s": ""} of beer on the wall</p>);
I also would have sworn up and down that using a DocumentFragment would be loads faster than both, but it doesn't seem to be the case. I wonder why that is.
It is pretty accurate here, case #3 is significantly (almost two times) slower than case #1.
I suspect that element.append(...list) is just a
for(auto arg : args)
element.append(arg);
On Windows I am testing it in Edge, Chrome and FF. Edge and Chrome show close numbers (#1 fastest). FF shows #3 is faster - same problem as Safari I think.
My naive take on this is that browsers have overall gotten a lot more consistent with the layout-paint-composite loop, and it's not worthwhile to swap out all your appendChild calls with fragments. On the other hand, making sure your all your layout reads (.clientWidth) are batched before the layout writes (appendChild) is much more important (fastdom)
edit: something like documentFragment/append(...children) would help guarantee the layout trashing addressed by fastdom
Unless you getting computed styles in between add/deletions, etc, I don’t think there would be much of a difference.