Handling JavaScript events with Web Workers

Alex MacArthur:

The advantages of Web Workers are many, but things really clicked for me when it came to the several DOM event listeners in any given application. These all necessarily live on the browser’s main thread, and if that thread is congested by a long-running process, the responsiveness of those listeners begins to suffer, stalling the entire application until the event loop is free to continue firing.

Here’s an example (first hit freeze, then try hitting the other button or resizing the textarea):

See the Pen
Event Blocking – No Worker
by Alex MacArthur (@alexmacarthur)
on CodePen.

In his post he lays out a way of offloading that long running task into a Web Worker.

For the Sake of Your Event Listeners, Use Web Workers →

💁‍♂️ Be sure to check out the mentioned workerize, as that’s easier to grasp when compared to the postMessage code.

let worker = workerize(`
	export function add(a, b) {
		// block for half a second to demonstrate asynchronicity
		let start = Date.now();
		while (Date.now()-start < 500);
		return a + b;

(async () => {
	console.log('3 + 9 = ', await worker.add(3, 9));
	console.log('1 + 2 = ', await worker.add(1, 2));

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.