Web Worker Pt. I
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.
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.
- 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!).
- Web Workers to improve UI performance | by Alberto De Agostini | THRON tech blog | Medium
- Web Workers API - Web APIs | MDN
- The Basics of Web Workers - HTML5 Rocks
- Web Workers Demystified. A web worker is a simple way to run… | by Liron Navon | Clockwork | Medium
- Introduction to Web Workers. A hands-on deep dive into web workers… | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces
- WebWorker — Creating an async task execution thread | by Lokesh Pathrabe | Medium
- 50K Array, HTML5 Web Worker Demo Highest Voted 'web-worker' Questions - Stack Overflow
- Get MD5 from Web Worker FileReader