Collect some SVG-heavy examples for use as performance testcases. I was looking for examples that either included large DOM structures or intensive animations. I was not looking for examples of features not supported by Firefox. My hope is that we can use these testcases to eek out some additional performance increases in Fx3.
I did some simple benchmarking with Safari when I could see a significant difference, but comparing against Safari isn't the end goal. Competing against Flash and Silverlight are more important to me.
Simple Benchmarked Testcases
- Street map of Baltimore, MD
- Large DOM
- Safari: ~15sec
- Fx3: ~60sec [note: Fx3/linux failed to load the page]
- 3D SVG animated shapes
- Safari: ~72 FPS, 90%-96% CPU [motion is very smooth and rendering is clean]
- Fx3: ~20 FPS, 67%-72% CPU [motion somewhat smooth (small blip every so often) and rendering is not as clean (aliased cube edges)]
- note: the SVG uses optimizeSpeed which Fx3 uses to turn off anti-alias while Safari doesn't
- SVG animated shapes
- Safari and Fx3 render and animate about the same [Safari has text and image clipping bugs]
- Flash version here is faster than both
- Large DOM, Filters and lots of Text
- Safari: ~2sec [note: Safari doesn't render the filter created drop shadows]
- Fx3: ~70sec [note: Fx3 went into a beachball state after finishing the load. I had to kill it]
- Kevin Lindsey has an SVG Life game sample. There is a simple SVG version, more intensive SVG version and a C# version (which is claimed to be much faster)
- MapView has several DOM heavy SVG mapping examples
- Sam Ruby has a SVG vs Canvas test. Safari is faster than Fx3 for SVG, but not for Canvas.
- SVG World Map loads slowly.
- OpenLayers mapping library uses SVG. This example is interactive. It loads a bit slow and zooming (using its controls) is a bit slow too.
- Neat animated anonymous 'voting' simulator. Fx3 and Safari are close on the motion, Safari has bugs on background.