W3C home > Mailing lists > Public > public-webapps@w3.org > January to March 2015

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

From: Simon Pieters <simonp@opera.com>
Date: Wed, 21 Jan 2015 09:52:32 +0100
To: "Glen Huang" <curvedmark@gmail.com>
Cc: "Anne van Kesteren" <annevk@annevk.nl>, "WebApps WG" <public-webapps@w3.org>
Message-ID: <op.xss1luwpidj3kv@simons-mbp>
On Wed, 21 Jan 2015 00:45:32 +0100, Glen Huang <curvedmark@gmail.com>  
wrote:

> Ah, thank you for letting me know.
>
> I vaguely remember document fragment is introduced just to reduce  
> reflows. Looks like this best practice is obsolete now? (I remember  
> myself wondering why bowsers couldn’t optimize that back then.) Many  
> people still suggest it though, including google  
> (https://developers.google.com/speed/articles/javascript-dom  
> <https://developers.google.com/speed/articles/javascript-dom> the  
> "DocumentFragment DOM Generation” section), and you can find more by  
> googling “why use document fragment".

I think that article is a bit misguided. Changing a class does trigger a  
reflow, but it doesn't force a reflow while the script is running (maybe  
it does in old browsers). Asking for layout information does force a  
reflow.

I think documentfragment has been faster in several browsers and maybe  
still is, but in Blink at least it appears that the different methods are  
getting about equally fast. It probably depends on how you do it, though.  
This jsperf might be interesting:

http://jsperf.com/appendchild-vs-documentfragment-vs-innerhtml/81

> 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?

Yeah.

-- 
Simon Pieters
Opera Software
Received on Wednesday, 21 January 2015 08:53:03 UTC

This archive was generated by hypermail 2.3.1 : Friday, 27 October 2017 07:27:25 UTC