User:MarkFinkle/ExtremeSVG

From MozillaWiki
Jump to: navigation, search

Purpose

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.

Any benchmarking data was made on a MBP with 2GB of ram. Load times were made after refreshing several times to get as much into cache as possible. Animation speed was taking after allowing the page to "ramp up." SVG animations are not entirely SVG performance as JavaScript is used to animate the shapes.

Simple Benchmarked Testcases

  • 3D SVG animated shapes
    • Animation
    • 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
    • Animation
    • Safari and Fx3 render and animate about the same [Safari has text and image clipping bugs]
    • Flash version here is faster than both
  • John Resig's World of JavaScript
    • 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]

More Testcases

  • 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.