Short History
In modern web applications there are lots of cases when we need to do some stuff in the background. The only way to do it today in most of the modern browsers is by using Web Workers. Web Workers provide a standard way for browsers to run JavaScript in the background. It let you spawn multiple “threads” that all run at the same time. For more about multithreading this is a good place to start your reading.
Web Workers can do lots of things:
- Complex mathematical calculations
- Make network requests
- Access local storage
all while the main web page responds to the user actions (e.g. scrolling, typing some text or clicking around your app).
What is a Worker?
A ‘worker’ is a script that will be loaded and executed in the background. Web Workers provide a way to do this seamlessly, for example:
new Worker(“worker.js”);
The above will load the script, located at ‘worker.js’, and execute it in the background.
There are some big (very big) limitations (but please don’t worry, we will see how to solve them in the next post):
- Workers don’t have access to the DOM: No document, getElementById, etc. However, you can use setTimeout, setInterval, and XMLHttpRequest.
- Workers don’t have direct access to the ‘parent’ page.
Can We Use Web Workers?
In order to find out if we can use web workers we need to check if there is a Worker property on the global window object. If our browser doesn’t support the Web Worker API, the Worker property will be undefined.
isWorkersAvailable() {
return !!window.Worker;
}
Instead of writing this function yourself, you can use Modernizr to detect support for web workers (Pss… Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites by doing lots of work for you and saving you from reinventing the wheel again and again – Thank you @KuraFire @paul_irish and @SlexAxton )
if (Modernizr.webworkers) {
// window.Worker is available!
} else {
// no native support for web workers
}
Short Example
//
// A simple way to find prime numbers
//
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}
<!DOCTYPE HTML>
<html>
<head>
<title>Web Worker: The highest prime number</title>
</head>
<body>
<h1>Web Worker: The highest prime number</h1>
<article>The highest prime number discovered so far is:
<output id="result"></output>
</article>
var worker = new Worker('highPrime.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</body>
</html>
In the next post I’ll dive deeper on more interesting stuff you can do with workers. We will see how to communicate with one dedicated worker and how we can share workers (just for fun).
Here you can continue reading the second part of this series.
More (good) sources
Share only with good friends:
Another place to see which browser support what type of field is 
icon at the top of your browser window.
icon in the Apps section to open the Chrome Remote Desktop app.
Ido Green 