Web Workers are awesome, but they don’t get used very often by web developers. I think this is mostly because a lot of web developers are not familiar with Web Workers. In this post I want to show you how simple it is to implement a Web Worker, and how great the benefit can be when you use them.

What is a Web Worker?

A script running in a background thread.

Why should I use them?

They have several benefits, but in my opinion the biggest benefit is that they don’t block the UI(since they run in a different thread).

Show me an example!

I’ve created a simple example that includes an animation and two buttons. One of the buttons will fire a heavy calculation without using a Web Worker, the other will use a Web Worker. The first one will block the animation because the calculation happens in the same thread, the latter won’t because it’s using a Web Worker in a different thread.

Demo: https://daviddt.github.io/

Code: https://github.com/daviddt/daviddt.github.io

What about browser support?