👷 Web Workers

If you have computation-heavy tasks in your app, you can offload them to a Web Worker (opens in a new tab). Workers are separate threads that runs in the background without blocking the UI, reducing jank in your canvas. You can for instance use Web Workers for pathfinding (opens in a new tab) or physics.

Web Workers rely on the postMessage and onmessage API to communicate with the main thread, which means you cannot wait for a particular message to be received and write code in a convenient async/await fashion. That's why some libraries have been created to help with the process:

• Stars
  NPM
  TS
  Maintained
• Comlink

  10k

  270k/w

  
  10k270k/w
  
  1 year
• workerpool

  2k

  5M/w

  

  – Supports pools, Node.js
  2k5M/w
  
• threads.js

  3k

  92k/w

  

  – Supports pools, observables, Webpack, Node.js
  3k92k/w
  
  3 years
• troika-worker-utils

  120k/w

  
  N/A120k/w
  
• workerize-loader

  2k

  15k/w

  

  – Webpack loader
  2k15k/w
  
• Workerize

  4k

  700/w

  
  4k700/w
  
  4 years
• comlink-loader

  600

  5k/w

  

  – Webpack loader
  6005k/w
  
  4 years
• Greenlet

  5k

  600/w

  
  5k600/w
  
  5 years

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

import.meta.url

Note that you can use import.meta.url (opens in a new tab) to reference a Web Worker file from your filesystem:

const worker = new Worker(new URL('./worker.ts', import.meta.url))