Benchmark: HTML outlining/TOC scripts

A bit over a week ago Chris Heilmann published a post on table of contents generators, where he listed a couple of JavaScript methods to do that. It’s been always in the plans to optimize the performance of my own implementation of the HTML5 outlining routine – and what better way to measure it, than to compare it with some other approaches while I’m at it. To no surprise, I lost. Big time.

Results

  1. Chris Heilmann’s YUI based approach (136ms)
  2. Chris Heilmann’s DOM based approach (247ms)
  3. Stuart Langridge’s generated-toc (258ms)
  4. Josh Johnston’s solution with jQuery (781ms)
  5. My own HTML5 Outliner (3099ms)
  6. Chris Heilmann’s RegExp based approach (4440ms)
  7. Diogo Vincenzi’s solution with jQuery (9334ms)

Methodology

The numbers above are based on an 1.5Mb file, which has some 200 headings to use for the TOC table. The actual file, was created out of HTML4 specification part on forms, to reflect a more natural usage. The results were a bit different, when I used my own generated file, which had a lot more headings, and a lot less text.

The test runner itself would create an iframe, load the test document inside, inject the required script and call it. The source is available on Google Code (though be aware, that you will need to procure and hack the dependencies yourself).

I ran it on a decent 2.2Ghz laptop, using a vanilla version of Portable Firefox 3.5. With some exceptions (see below), the results were comparable and not unexpected in other browsers.

Insights

  • The RegExp based approach was a non-contender from the start, as it doesn’t really work under any browser, other than Firefox.
  • Diogio’s solution scored so low because it’s querying the DOM twice inside every loop iteration (I think).
  • I am impressed at how well YUI3 performed – on every browser (incl. IE8), except Opera. I seriously need to follow up on the Opera thing…
  • Speaking of YUI3 – one needs to go through extra hoops to measure performance, due to YUI loader’s setTimeout(). And make sure that you have all dependencies in on file, to avoid calls to the Yahoo’s CDN.
  • IE8 didn’t like 2Mb documents inside an iframe (hence 1.5Mb)
  • I have plenty of space for improvement – it will be fun!

Comments are closed.