In the last module, an overview of web workers was given. Web workers can improve input responsiveness by moving JavaScript off of the main thread to separate web worker threads, which can help improve your website's Interaction to Next Paint (INP) when you have work that doesn't need direct access to the main thread. However, an overview alone isn't sufficient, and in this module, a concrete use case for a web worker is offered.
One such use case could be a website that needs to strip Exif metadata from an image—this isn't such a far-fetched concept. In fact, websites like Flickr offer users a way to view Exif metadata in order to learn technical details about the images they host, such as the color depth, camera make and model, and other data.
However, the logic for fetching an image, converting it to an ArrayBuffer,
and extracting the Exif metadata could be potentially expensive if done entirely
on the main thread. Thankfully, the web worker scope allows for this work done
off of the main thread. Then, using the web worker's messaging pipeline, the
Exif metadata is transmitted back to the main thread as an HTML string, and
displayed to the user.
What the main thread looks like without a web worker
First, observe what the main thread looks like when we do this work without a web worker. To do this, perform the following steps:
- Open a new tab in Chrome, and open its DevTools.
- Open the performance panel.
- Navigate to https://chrome.dev/learn-performance-exif-worker/without-worker.html.
- In the performance panel, click Record at the upper right hand corner of the DevTools pane.
- Paste this image link—or another one of your choosing that contains Exif metadata—in the field and click the Get that JPEG! button.
- Once the interface populates with Exif metadata, click Record again to stop recording.
