Thursday, June 17, 2010

Benchmarking VexFlow

I have about 340 tests now for VexFlow, and one of the things I find really impressive is the speed at which browsers currently load, execute, and render web-pages.

Since the code exercises the browser on a few different dimensions (heavy JavaScript, lots of DOM manipulation, a few new HTML5 features), I decided to pit the major browsers against each other and run a few benchmarks.

Test Suite on Chrome 5.0.375
I ran the 340 tests in a loop a 1000 times on each browser, and calculated the mean runtime in milliseconds. Here are the results:

  • Chrome 5.0.375: 754ms
  • Safari 4.0.4: 1118ms
  • Opera 10.53: 1511ms
  • Firefox 3.6.3: 3209ms

The difference between the Chrome and Firefox numbers is quite surprising.

I also ran some SVG vs. Canvas benchmarks and found that SVG was about 3 times slower than Canvas. This factor increased significantly as the number of elements in the SVG image grew. That said, SVG rendered much more consistently across the different browsers.

The test machine used was a dual-core MacBook Pro with a 2.53 GHz Intel Core 2 Duo processor and 4GB of DDR3 RAM.


  1. What about Internet Explorer? it's still the most used browser

  2. Quite impressive. It would be interesting to see how fast it renders big songs. I.e. How long would it take to render a song containing 200 bars. (Tablature and Notation)

  3. @Dani: I don't have a windows machine to benchmark IE. I'll upload the test suite somewhere so others can test and report.

    @Danielku15: I haven't tried a real 200-bar song yet, but I'd estimate between ~500-700ms on Chrome with Canvas.