Web Workers for parallel processing in Deno - Step-by-Step Execution

Concept Flow - Web Workers for parallel processing

Main script starts

↓

Create Worker

↓

Send message to Worker

↓

Worker receives message

↓

Worker processes data

↓

Worker sends result back

↓

Main script receives result

↓

Use result in main script

↓

End

The main script creates a worker, sends data to it, the worker processes it in parallel, sends back the result, and the main script uses that result.

Execution Sample

Deno

const worker = new Worker(new URL("./worker.ts", import.meta.url).href, { type: "module" });
worker.postMessage(10);
worker.onmessage = (e) => {
  console.log("Result:", e.data);
  worker.terminate();
};

Main script creates a worker, sends number 10, waits for result, logs it, then stops the worker.

Execution Table

Step	Action	Main Thread State	Worker Thread State	Message Passing	Output
1	Main creates Worker	Worker created, idle	Worker script loaded, idle	None	None
2	Main sends message 10	Waiting for response	Received message 10	10 sent to Worker	None
3	Worker processes 10	Waiting for response	Processing 10 (e.g. square)	None	None
4	Worker sends result 100	Waiting for response	Result ready 100	100 sent to Main	None
5	Main receives result	Received 100	Idle	None	Console logs: Result: 100
6	Main terminates Worker	Worker terminated	Worker stopped	None	None
7	End	No active Worker	No active Worker	None	Result used in main script

💡 Worker terminated after sending result; main script ends processing.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
worker	undefined	Worker instance created	Worker processing message	Worker ready with result	Worker idle	Worker terminated
message	undefined	10 sent	10 received	100 sent	100 received	none
result	undefined	undefined	undefined	100 ready	100 logged	100 used

Key Moments - 3 Insights

Why does the main script not block when the worker processes data?

Because the worker runs in a separate thread, the main script continues running and waits for the worker's message event (see execution_table step 3 and 4).

How does data move between main script and worker?

Data is passed via messages using postMessage and onmessage events, as shown in execution_table steps 2 and 4.

What happens if we forget to terminate the worker?

The worker keeps running and consumes resources; terminating it stops the worker thread (see execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the worker's state after step 3?

A Processing message 10

B Terminated

C Idle, waiting for message

D Sending result to main

💡 Hint

Check the 'Worker Thread State' column at step 3 in the execution_table.

At which step does the main thread receive the result from the worker?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look for 'Main receives result' in the 'Action' column of execution_table.

If the main script never calls worker.terminate(), what changes in the execution table?

A Worker would never send the result

B Step 6 would be missing and worker remains idle

C Main script would block at step 2

D Worker would crash immediately

💡 Hint

Refer to step 6 about terminating the worker in the execution_table.

Concept Snapshot

Web Workers run code in parallel threads.
Main script creates a Worker with a script URL.
Use postMessage to send data to Worker.
Worker uses onmessage to receive data and postMessage to send back.
Main script listens onmessage for results.
Terminate worker to free resources.

Full Transcript

Web Workers allow running code in parallel to the main script. The main script creates a worker by specifying a separate script file. It sends data to the worker using postMessage. The worker receives this data in its onmessage handler, processes it independently, and sends results back with postMessage. The main script listens for these messages and uses the results. Finally, the main script should terminate the worker to stop its thread and free resources. This process avoids blocking the main thread and improves performance for heavy tasks.

Practice

1. What is the main purpose of using Web Workers in Deno?

easy

A. To create a new HTTP server

B. To run tasks in parallel without blocking the main thread

C. To manage file system permissions

D. To handle database connections

Solution

1. Step 1: Understand Web Workers role

   Web Workers allow running scripts in background threads separate from the main thread.

2. Step 2: Identify the benefit

   This prevents the main thread from freezing during heavy tasks, enabling parallel processing.

3. Final Answer:

   To run tasks in parallel without blocking the main thread -> Option B

4. Quick Check:

   Web Workers = Parallel tasks without blocking [OK]

Hint: Web Workers run code in background threads [OK]

Common Mistakes:

• Thinking Web Workers handle HTTP or database tasks directly
• Confusing Web Workers with main thread code
• Assuming Web Workers manage permissions

2. Which of the following is the correct way to send a message from the main thread to a Web Worker in Deno?

easy

A. worker.postMessage('Hello')

B. worker.emit('Hello')

C. worker.send('Hello')

D. worker.message('Hello')

Solution

1. Step 1: Recall message sending method

   In Web Workers, the method to send data to the worker is postMessage.

2. Step 2: Match correct syntax

   Among the options, only worker.postMessage('Hello') is valid and recognized.

3. Final Answer:

   worker.postMessage('Hello') -> Option A

4. Quick Check:

   Send message = postMessage [OK]

Hint: Use postMessage to send data to workers [OK]

Common Mistakes:

• Using send() instead of postMessage()
• Confusing emit() with event emitters
• Trying to call message() which doesn't exist

3. Consider this Deno Web Worker code snippet:

const worker = new Worker(new URL('./worker.ts', import.meta.url).href, { type: 'module' });
worker.onmessage = (e) => console.log('Result:', e.data);
worker.postMessage(5);

And the worker.ts contains:

self.onmessage = (e) => {
  const num = e.data;
  self.postMessage(num * 2);
};

What will be printed in the console?

medium

A. Result: 10

B. Result: 5

C. Result: undefined

D. No output, error occurs

Solution

1. Step 1: Understand message flow

   The main thread sends 5 to the worker. The worker receives it as num.

2. Step 2: Calculate worker response

   The worker multiplies 5 by 2 and sends back 10. The main thread logs 'Result: 10'.

3. Final Answer:

   Result: 10 -> Option A

4. Quick Check:

   5 * 2 = 10 output [OK]

Hint: Worker doubles input and sends back result [OK]

Common Mistakes:

• Assuming worker returns original number
• Confusing onmessage event usage
• Expecting error due to URL usage

4. What is wrong with this Deno Web Worker code snippet?

const worker = new Worker('./worker.ts', { type: 'module' });
worker.postMessage('start');
worker.onmessage = (e) => console.log(e.data);
worker.terminate();

medium

A. Worker path './worker.ts' is invalid in Deno

B. postMessage is called before onmessage, causing error

C. Worker is terminated immediately, so no message is received

D. Missing event listener for error events

Solution

1. Step 1: Analyze termination timing

   The worker is terminated right after sending the message, likely before it can respond.

2. Step 2: Effect on message reception

   Because of immediate termination, the onmessage handler never receives data.

3. Final Answer:

   Worker is terminated immediately, so no message is received -> Option C

4. Quick Check:

   Terminate too soon = no response [OK]

Hint: Terminate workers only after receiving messages [OK]

Common Mistakes:

• Thinking postMessage order causes error
• Ignoring worker path resolution rules
• Forgetting to handle errors but not critical here

5. You want to process a large array of numbers in parallel using Deno Web Workers. Which approach correctly splits the work and collects results efficiently?

hard

A. Process the array in the main thread without workers for simplicity

B. Create one worker and send the entire array repeatedly for each number

C. Use a single worker and process numbers sequentially inside it

D. Create multiple workers, send each a slice of the array, collect partial results, then combine them

Solution

1. Step 1: Understand parallel processing strategy

   Splitting the array into parts and assigning each to a separate worker allows true parallelism.

2. Step 2: Collect and combine results

   Each worker returns partial results; the main thread combines them for the final output.

3. Final Answer:

   Create multiple workers, send each a slice of the array, collect partial results, then combine them -> Option D

4. Quick Check:

   Split work + combine results = efficient parallelism [OK]

Hint: Split data among workers, then merge results [OK]

Common Mistakes:

• Sending full array multiple times wastes resources
• Using one worker loses parallel benefit
• Ignoring main thread processing slows app