DOM DocumentFragments

As I read John‘s post on DocumentFragments the idea was very obvious as were the speed improvements.

Let’s say you have 10 divs that you attach to and 10 elements that you need to attach. In the “normal” case this means you will call appendChild 100 times and cloneNode 100 times. In the “fragment” case you will only call appendChild 20 times (10 to append the elements to the fragment and 10 to append the fragment to the divs) and cloneNode 10 times (when appending the fragment to the div). My thinking was that with clone you don’t really gain much as it in effect must clone 100 nodes even though it is called only 10 times, but you do gain some time with less appends and you might gain some more time by not appending each node to the visible document which should trigger less redrawing.

As I don’t like to be in the dark I set off to test some of these assumptions. I didn’t run the test in all browsers so Firefox 3 on Mac will have to do:

Append 10 nodes to a detached node
60us
Append 10 nodes to an attached node
360us
Append 10 nodes to an attached node, display:none
160us
Append 10 nodes to a fragment
60us

This means that appending does seem to be slower when you are attaching to nodes that are in the displayed document but also that appending to an element is no slower than appending to a DocumentFragment.

The next test I wanted to do is to see how speed of clone changes when you have the same number of elements in different depths:

Clone a detached empty node
15us
Clone an attached empty node
15us
Clone an empty fragment
15us
Clone an empty node (deep)
15us
Clone an empty fragment (deep)
15us
Clone a detached node with 9 subnodes (total of 10 nodes)
27us
Clone an attached node with 9 subnodes (total of 10 nodes)
29us
Clone a fragment with 9 subnodes (total of 10 nodes)
27us
Clone a detached node with deep subnodes (total of 10 nodes)
28us
Clone an attached node with deep subnodes (total of 10 nodes)
28us
Clone a fragment with deep subnodes (total of 10 nodes)
27us
Clone 10 detached empty nodes in a loop
95us

As you can see the changes in test times between similar variations aren’t significant. It does however pay off to clone bigger chunks of the tree with the deep parameter.

This means you should only gain by using DocumentFragment when you’re attaching many sibling nodes that don’t have a single parent node. A simple case for this would be when you’re attaching items (<li>) to an existing list. On the other hand if you are attaching a whole list you would not gain anything since what you could do is set up a list and clone the whole list and attach that:

Append 10 items to a single list (directly)
100us
Append 10 items to a single list (fragment first)
107us
Append 10 items to 10 lists (directly)
2000us
Append 10 items to 10 lists (fragment first)
570us

In the first case, when attaching to a single list, you actually lose time with the fragment first method because you first attach items to the fragment and then attach the fragment to the list. I must remind you that you don’t need to do any cloning here since you’re only attaching the items to a single list. This means no gain due to clone being faster on bigger chunks. The second case mimics the case that John presented in his post and the difference is obvious.

The lesson: if you’re about to attach a lot of sibling nodes into more than one location (in other words you’ll need cloning) it’s smart to use a DOM DocumentFragment for that.

Zemanta Pixie

Leave a Reply