Web Worker Pt. I

• Web Worker, js

Intro

At some point, every developer comes across so-called Workers, mostly referred to as Web Workers or Service Workers in the Front-End world.

Service Workers are probably more known these days because they are providing an easy way to include offline capabilities for a website or an app. They are often part of the Progressive Web App stack.

A Service Worker sits between the browser and the webserver and decides what to do with the in- and outgoing traffic. Data can be cached, manipulated, push notifications can be managed, and much more1.

Web Workers on the other side can do the work of Service Workers, and much more2.

If an expensive calculation is taking place in Java Script, the browser is blocked and in the worst-case freezes completely. That's because JavaScript is single-threaded (according to the internet). That means the script runs in one CPU core (many people say) and maybe block the user interaction.

Here is an experiment that illustrates the blocking: sorting an array without Web Worker blocks interaction with the button.

Now I have a complex form builder that drags down performance the larger the form becomes - I'm talking about 200 complex form objects that need to get saved on the server and then rendered, once the server comes back with additional information for the form.

I was looking for a way to offset that work and dug into Web Workers as a possible solution. What did I find out?

It's not that easy...

Only simple operations can be sent to the Web Worker.

Now how often does one need to sort a complex array in the browser or doing weird math experiments? Almost never.

The problem is Web Workers can receive messages, do their job, and send the result back in a message. Everything that can be encoded as JSON can be sent as a message to a Web Worker, so no methods, no DOM Nodes, just data structures.

Inside the Web Worker, you can import external scripts, but all in all the process is isolated from the window object of your main program.

Web Workers are often used for in-browser image manipulation, 3d rendering and that's almost all I could come up with. Maybe sort a large dataset and turn it into a CSV file or create a pdf. All things I don't need right now.

Use Cases

  • Encoding/decoding a large string
  • Complex mathematical calculations (e.g., Fibonacci, prime numbers, encryption, simulated annealing, etc.)
  • Sorting a large array
  • Network requests and resulting data processing
  • Calculations and data manipulation on local storage
  • Prefetching and/or caching data
  • Code syntax highlighting or other real-time text analysis (e.g., spell checking)
  • Image manipulation
  • Analyzing or processing video or audio data (including face and voice recognition)
  • Background I/O
  • Polling web services
  • Processing large arrays or huge JSON responses

This list was published in the very good article Introduction to Web Workers by Chidume Nnamdi. He's writing about the anatomy of a Web Worker and helped me to get the gist of it.

What's my Use Case?

Where I can see a potential use case is with background tasks, like sending a keep-alive message to the server or pre-fetch data that triggers the generation of a pdf file on the server, so it's already there when the user requests it.

Given, the latter is a good case for a cron job. But that's for a later challenge.

In part II of my Web Worker journey I'm going to get into the weeds, which means, I'm searching manically for Web Worker helpers, mini frameworks, and complete solutions for my special cases (not sorting an array!).

Link Collection

  1. ServiceWorker Cookbook ↩

  2. The Basics of Web Workers - HTML5 Rocks ↩