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.