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

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

From: Glen Huang <curvedmark@gmail.com>
Date: Wed, 21 Jan 2015 17:50:05 +0800
Cc: Anne van Kesteren <annevk@annevk.nl>, WebApps WG <public-webapps@w3.org>
Message-Id: <358589E7-36BE-4BFB-86FA-625A14E32CDF@gmail.com>
To: Simon Pieters <simonp@opera.com>
@Boris @Simon

From the jsperf, looks like Blink is indeed making document fragment obsolete. Run the tests in webkit, although still way faster with document fragment, I believe the gap will narrow in the future. (I really think authors shouldn’t have to rely on it to get good performance).

Thank you for debunking the myth for me. :)

Now, let’s go back to the original topic. I brought up document fragment because I wanted to argue that by disallowing passing the context node as an argument, authors would be unable find an equally performant solution. You guys tell me that’s not the case. I agree, and I will drop that.

But I still don’t feel disallowing that is the right way to go, for two reasons:

1. Passing context node as an argument does have a meaningful result, and practical use cases.
2. Although the use cases might not come as often, these are native DOM methods, everybody is expected to use them. Given the huge user base, the use cases might not come as rare also.

I see the argument against it is probably that it may slow down normal operations too. But is that really true? The key here is to find the correct insertion point after the macro action. Although in the spec algorithm, using a transient node seems to be the most performant way (and it slows down normal operations), I doubt it’s impossible for an actual implementation to optimize that.

This isn't some feature that can be disallowed now and allowed in the future. And by disallowing it, I think it qualifies as a gotcha when you do need it.

But that’s just my personal feelings. If it turns out it’s really not that cheap to implement. I’d be happy to correctly use before() and after() and not root for something that will slow everybody down. :)

> On Jan 21, 2015, at 4:52 PM, Simon Pieters <simonp@opera.com> wrote:
> 
> 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 09:50:38 UTC

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