HTML5 Samples

When carrying out superior load-heavy functions in a web browser, both the web page it is run in as well as the web browser User interface turns into unresponsive till it’s completed. But, there’s a method to handle that with HTML5 Web Workers.

What HTML5 Web Workers do

Fundamentally, Web Workers provides you a chance to load a JavaScript file dynamically and then have it process scri[t in a background process, not affecting the user interface and its response level. You can continue to do whatever you want, selecting thing, clicking etc, while all Web Worker computation influences background.

Working with HTML5 Web Workers

First, you create a Worker object. Then you can certainly send text data to it with a postMessage method, it can send information back with its own postMessage and both of them have onmessage event handlers to receive data. For instance, here there is a simple example where you send in some data to a Web Worker, have it do 1 000 000 iterations in a loop, and continually post the current value back:

In the web page

// Creates a Web Worker
var worker = new Worker("worker.js");

// Posts a message to the Web Worker
worker.postMessage(0);

// Triggered by postMessage in the Web Worker
worker.onmessage = function (evt) {
	// evt.data is the values from the Web Worker
	alert(evt.data);
};

// If the Web Worker throws an error
worker.onerror = function (evt) {
	alert(evt.data);
};

In the Web Worker JavaScript file

// Triggered by postMessage in the page
onmessage = function (evt) {
	// evt.data will be 0 here from the above postMessage
	for (var i=evt.data, il=1000001; i<il; i++) {
		// Continually sends data back
		postMessage(i);
	};
};

In addition to the postMessage method and the onmessage event used above, there is a handy terminate method on the Worker object, to instantly stop all of its work.

This demo and complete code comes in the HTML5 Web Worker Demo page, which is part of my HTML5 – Information and samples for HTML5 and related APIs playground.

Web Browser support

So far, Web Workers are supported in Firefox 3.5 and Safari 4, and soon upcoming in Google Chrome.

Issues

This is quite nice for heavy operations. However, there are to main issues related to the terminate method:

Firefox and execution of terminate

As you have seen in the HTML5 Web Worker Demo, in Firefox, if you click on the “Stop Worker” button, it isn’t actually called till the previous ongoing operation is finished. To me, this practically renders it useless since the whole idea of the terminate method should really be instant, and which appears to be the idea according to the Mozilla Web Worker documentation for terminate():

So that you can immediately terminate a running worker, you can do so by calling the worker’s terminate() method… The worker thread is killed immediately without a chance to complete its operations or clean up after itself.

My take is that this is a bug, and I will talk to Mozilla about this.

Can’t restart a terminated Web Worker

In both Firefox and Safari, if you have called the terminate method on a Web Worker, there’s no way to get it started again by calling postMessage on it. Instead, you should reinstantiate the Worker with the new Worker(“filename.js”) again, which sort of defeats the idea of pausing/playing a Worker’s action. I don’t know if this describes due to design or implementation, but if you craft your code cleverly, you can work around this.

Spreading the load

Despite the issues I think Web Workers are great, and they could prove fantastic with regards to relieving the user interface from being frozen when having to do complex calculations and similar.

Incoming search terms:

• html5 web workers example
• html5 web worker example
• web worker html5 example
• web worker tutorial
• web workers preload images
• background worker html5
• webworker html5 サンプル　
• web worker preloading
• web worker image preloading
• preload images web workers