A Web Worker makes it possible to run Javascript code without blocking the user interface. That is, computations can be made in the background without locking the user interface.

A Web Worker is created as follows

// Main script
var worker = new WebWorder( url );

where url must point to a Javascript file. The script is started immediately. This article describes the ‘standard’ Web Worker, not the ‘shared’ Web Worker.

Web Workers are not threads as known from C#, Java or the like. The Web Worker does not share memory with the script that initiates it (as in C# and Java). In stead, communication is done through messages. Thus, it compares more to processes with some kind of inter-process communication. In order to receive a message from a Web Worker you attach to the onmessage event.

// Main script
worker.onmessage = function( eventData ) {
};

Similarly a worker can recieve messages with the onmessage event in its global scope

// Worker script
onmessage = function( eventData ) {
};

In order to send messages the method postMessage is used. For the Web Worker the function exist on the global scope, that is,

// Worker script
postMessage( data );

The main script uses the postMessage method on the worker object, that is,

// Main script
worker.postMessage( data );

The data transfered between worker and main script (in either direction) are only json like objects.

My example uses Web Workers to compute rows of fractals in the complex plane. A (variable) number of workers are initialized with the dimensions of the complex plane and the coresponding height and width of a canvas. The main script then sends messages to each worker asking it to compute a row. When a row has been computed a message is posted to the main script, which then updates the image. If more rows remains the worker is put to work again.

Mandelbrot and Julia fractals

Both the Mandelbrot and the Julia fractals are defined for the complex plane. They are computed using the formula $$v_{i+1} = v_i^2 + p$$. The difference between the Mandelbrot and Julia fractals lie in the initialization of the formula. The Mandelbrot has \(v_0 = 0\) and \(p\) is the point on the complex plane under investigation. The Julia set uses \(v\) as the point in the complex plane under investigation while \(p\) is some point in the complex plane. That is there is a Julia fractal for each point in the complex plane. More detailed explanations are available at Wikipedia Mandelbrot set, Julia set. Another option is at Mathworld, Mandelbrot set and Julia set

Enough talk and code - let’s see some pictures!

Number of workers to use during computations

This feature needs canvas support!

Duration of last Mandelbrot set computation ms

Each point of complex plane has a Julia set associated. Click on a point on the above Mandelbrot set and the corresponding Julia set will be drawn on the canvas below. The most interesting examples are found along the edge of the Mandelbrot set.

This feature needs canvas support!

Duration of last Julia set computation ms

A Couple of Words on Performance

I’ve tested the code in three browsers

• Chrome 18.0.1025.33 beta-m
• Firefox 10.0.2
• Opera 11.61

with different numbers of Web Workers. I did not have the patience to do a actual benchmark comparing runtimes. However, Chrome is much faster than the other two. Furthermore, it seems that Opera does not benefit from using more Web Workers.

Source Code

The source code is available for browsing, and forking at my GitHub ‘fractal’ repos page