Avatar

Hola, I'm Julia.

Browser Web Workers

#javascript

2 min read

Following on from my post last week on the fundamentals of JavaScript, I thought I’d delve into Web Workers as a way of running parallel threads. If you haven’t read my previous post, a fundamental takeaway is that JavaScript is single threaded by default (the main thread). The main thread executes functions line by line. This means that if it comes across a task that takes a long time to complete, this will block anything else from being executed.

What is a Web Worker?

  • A Web Worker is a JavaScript process that runs in the background of a webpage.
  • It is a separate JavaScript thread, with an isolated JavaScript scope, that allows us to run work in parallel.
  • It can therefore be used to offload computationally expensive work that may block the main thread.
  • As a Web Worker has an isolated scope, they cannot make DOM manipulations or access variables and functions in the main script.

How does a Web Worker work?

  • To create a Web Worker, we instantiate a new Worker, passing in a path to a JavaScript script.
  • Passing data between the worker and the main thread is done via the postMessage API that effectively sends an event.
  • The corresponding event listener is onmessage.
  • Remember that the worker has its own scope, so the global object within a worker script is the worker. Any references to self refers to the worker.
// mainScript.js

const worker = new Worker('./worker.js')

const someInfo = {
  // some data
}

// pass data via postMessage
worker.postMessage(someInfo)

// set up an event listener which executes when postMessage is sent from the worker.js
worker.onmessage = function (result) {
  // access any data from the worker via result.data
}
// worker.js

// This will run when mainScript.js calls postMessage
onmessage = function (someInfo) {
  // run some computationally expensive function
  // once completed..send result
  const result = 'Computation done'
  postMessage(result)
}

Other Workers

  • Service Worker - this is similar to a Web Worker but used as a proxy server between web applications, the browser, and the network. A great use for them are for intercepting network requests, creating complex caching behaviour, thus enabling efficient offline experiences.
  • Worklet - lightweight version of a Web Worker that provide access to low level parts of the rendering pipeline e.g. audio and graphics.

Web Mentions

Tweet about this post and have it show up here!

© 2016-2022 Julia Tan · Powered by Next JS.