Hacker News Reader

You can use document fragments for this and get a similar performance boost without resorting to string concatenation.

Do you mean SVG document fragments? Can you explain in more detail or point to an example?

Here is an introduction. They are not SVG specific but you can build SVG elements in a document fragment, which is a lot faster than appending to the DOM, then append the fragment to the DOM all in one go.

See http://ejohn.org/blog/dom-documentfragments/ or google for an introduction.

Building strings and using innerHTML is a very ugly way to get performance, you should definitely try to using the document fragment approach as it has similar performance characteristics.

So these are regular document fragments? I vaguely remember that we tried that and it didn't work nearly as well, but it's been a while.

Building strings and using innerHTML is a very ugly

Ah. Then you'll be dismayed to hear we use tables for layout as well :)

In fact, using a document fragment is actually faster at least in some cases: http://jsperf.com/svg-fragment-test

The naiive approach was fastest for this example, but that's probably because the document was so small.

Reply on news.ycombinator.com