Summary - Web Workers

Build an app that sorts a large array in the background with a worker.

Summary - Web Workers

In this group you learned to create a worker, exchange messages, receive replies and transfer large data. Now we will combine everything into an app that sorts an array in the background.

The flow: the main thread sends a large array of numbers to the worker; the worker sorts it and sends the result back; the main thread catches it with onmessage. For large data, we use an ArrayBuffer to skip the copy cost.

Exercise Start the sorter worker and send an array

Create a worker from 'sorter.js'. Then send { numbers: [9, 3, 7] } with worker.postMessage.

Show example solution

const worker = new Worker('sorter.js');
worker.postMessage({ numbers: [9, 3, 7] });

Exercise Transfer a large buffer

Create an ArrayBuffer named buffer of 1024 bytes. Then send it with ownership transferred via worker.postMessage(buffer, [buffer]).

Show example solution

const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);

Test yourself

What is the flow in a sorting worker?
- The worker fetches the data, then sorts it
- The main thread sorts, the worker displays it
- The main thread sends, the worker sorts and replies
- The worker writes to a file, the main thread reads it
Show answer

The main thread sends, the worker sorts and replies — Correct! The main thread sends, the worker sorts and replies.

Catch the result

worker.____ = function(event) {
  console.log(event.data);
};

Show answer

worker.onmessage = function(event) {
  console.log(event.data);
};

Next lesson: What is XSS?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies