Re: oldNode.replaceWith(...collection) edge case

On 1/20/15 6:45 PM, Glen Huang wrote:
> I vaguely remember document fragment is introduced just to reduce
> reflows. Looks like this best practice is obsolete now?

You don't have to use a document fragment to reduce reflows, as long as 
you don't query layout information between your DOM notifications.

There are some other things (e.g. maintaining DOM state of various 
sorts) a browser may be able to optimize a bit better with a document 
fragment.  Or not.

> So to recap, when you have the need to pass the context node as an
> argument along with other nodes, just use before() and after() to insert
> these other nodes? And even insert them one by one is fine?

I strongly suggest measuring to get an answer to this question.  The 
performance characteristics will depend on the browser, on the exact set 
of DOM features used on the page, and on the exact stylesheets used on 
the page.

That said, I would expect the difference between inserting a document 
fragment and inserting the nodes one at a time to be fairly small in all 
modern browsers in most situations.  Note all the weasel-wording.  ;)

-Boris

Received on Wednesday, 21 January 2015 03:23:42 UTC