what's the best way for d3 to manipulate html?

Question

I'm using mbostock's awesome d3 for simple html rendering, the simplest way I could think of, selecting an empty div and filling it with HTML.

d3.select($('#thediv')[0])
  .selectAll('p')
  .data(l).enter()
  .append('p')
  .html(function(d){return 'd3 ' + d;});

In Win7 Chrome, I noticed that, for large datasets, this seems to be very slow. (3.5 s for 20000 items)

This example renders a very simple (though long) list: http://jsfiddle.net/truher/NQaVM/

I tried two solutions, visibility toggling:

$('#thediv').toggle()

and writing to a detached element:

var p = $('<div>')
d3.select(p[0])...
$('#theparent').append(p)

The results were this:

Firefox: uniformly fast (600-700 ms)

Chrome: either toggling or detaching is fast (800 ms), otherwise very slow (3.5 s)

Internet Explorer: detaching is faster but still slow (1.8 s), otherwise very slow (3.2 s)

My question is this: Is there a better solution?

Answer 1

Generally the two things that end up being slow when doing DOM manipulation are modifications to the DOM tree and browser redraws.

Using visibility toggling allows you to avoid the browser redraw in any modern, optimized DOM engine. You will still pay the price of modifying the DOM tree in line though.

Editing a detached element will give you both the no redraw perk as well as not having to pay for the updates to the DOM.

In all cases the second option, out of flow DOM manipulation, will be faster or at worst as fast. The relative difference in speed between browsers is more than probably due to differences in their DOM and Javascript engines. There are some benchmarks that might give you more insight into this.

Besides the speed of the DOM manipulations itself you could start looking into loop unrolling and other optimizations (by Jeff Greenberg) to minimize the work your actual script is doing. Other than that you are doing it right already.

If you are interested in knowing more details about the browser internal you should defiantly have a look at the long article at html5rock about browser internals. There is also a nice article over at Google developers about how to speed up JavaScript in webpages.