After experimenting the Mandelbrot algorithm inside a Razor web application, I decided to port my code to a standalone Javascript+HTML5 page (i.e. the one you are just reading now).

As far as I'm concerned, the most interesting part about this post is loading this page with different browsers and comparing how fast are the various javascript engine implementations. For instance, on my PC, generating the first picture of the Mandelbrot set (i.e. the one you're gonna see after clicking the GO button) takes:

• about half a second (511ms) on Chrome 10.0.648.204,
• one third of a second (312ms) on Firefox 4.0
• ... and more than eleven (!!) seconds on Internet Explorer 9.0.

It'll be fine if you comment this post and write how much time your browser takes to generate the very first picture (zooming times are not comparable since they depends on how much «inner» fractal points are computated).

Enough chatting... Just click the GO button and enjoy the beauty of the Mandelbrot set... If you can’t see any fractal, either your browser doesn’t support HTML5, or my code is buggy enough not to run on you client (LOL).

Update: now you can click the picture to zoom into the fractal.

Happy programming!

I executed a simple benchmark to test the speed of the algorithms used by X2ml to build an inner representation of an XML document and to convert the DOM into a standard System.String. In order to have a solid term of comparison, I executed a similar benchmark against the XElement class.

I ran both benchmarks inside the LINQPad4 environment.

Benchmark code for X2ml

//Building a 1000-nested levels XML with X2ml
var t = new double[10,2];
var s = new Stopwatch();
for(int j=0; j<10; j++) {
  s.Reset();
  s.Start();

  var p = X2ml.X.X2ml["_0"];
  var x=p;
  var p0=p;

  for (var i=1; i<1000; i++)
  {
    p = x / ("_"+i.ToString());
    x = p;
  }

  t[j,0]=s.Elapsed.TotalMilliseconds;

  var str = p0.ToXmlString();
  t[j,1]=s.Elapsed.TotalMilliseconds;
}
t.Dump();

Benchmark code for XElement

//Building a 1000-nested levels XML with XElement
var t = new double[10,2];
var s = new Stopwatch();
for(int j=0; j<10; j++) {
  s.Reset();
  s.Start();

  XElement p = new XElement("_0"), x, p0=p;

  for (var i=1; i<1000; i++)
  {
    x=p;
    x.Add(p=new XElement("_"+i.ToString()));
  }

  t[j,0]=s.Elapsed.TotalMilliseconds;

  var str = p0.ToString();
  t[j,1]=s.Elapsed.TotalMilliseconds;
}
t.Dump();

As you can see, both programs do the same operations:

1. Instanciating a 2D array of doubles. The array is meant to contain the stats taken after 10 repetitions of each benchmark
2. Preparing a StopWatch and starting it
3. Repeating 10 times the following steps:
• Creating a root element called <_0>
• Creating 1000 nested elements (each one will be a child of the previous one). For instance, after 3 cycles, DOM will be <_0><_1><_2><_3/></_2></_1><_0>.
• Recording the elapsed time since the StopWatch started
• Converting the nested structure (X2ml or XElement) into a System.String
• Recording the elapsed time
4. Dumping the 2D array to screen thanks to the Dump() extension method (provided by the LINQPad API).

You can read the stats collected by both the programs in the following tables. The result is quite is somewhat interesting, if not impressive:

• X2ml is 1 order of magnitude faster than XElement during the DOM-building process
• X2ml is 2 orders of magnitudes faster than XElement in converting the DOM to a System.String.

Benchmark #1: using X2ml

Benchmark #2: using XElement