Web workers for heavy computation in Angular - Step-by-Step Execution

Concept Flow - Web workers for heavy computation

Main Thread starts task

↓

Create Web Worker

↓

Send data to Worker

↓

Worker runs heavy computation

↓

Worker sends result back

↓

Main Thread receives result

↓

Update UI with result

↓

End

The main thread creates a web worker to run heavy tasks separately, sends data to it, waits for the result, then updates the UI without freezing.

Execution Sample

Angular

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = ({ data }) => {
  this.result = data;
};

Main thread creates a worker, sends data, and listens for the result to update the UI.

Execution Table

Step	Action	Main Thread State	Worker State	Message Passing	UI Update
1	Create Worker	Worker created, ready	Idle	No message yet	UI unchanged
2	Send data to Worker	Data sent to worker	Receives data	Main -> Worker: data	UI unchanged
3	Worker computes	Waiting for result	Computing heavy task	No message	UI unchanged
4	Worker sends result	Waiting for message	Sends result	Worker -> Main: result	UI unchanged
5	Main receives result	Result received	Idle	No message	UI updated with result
6	End	Task complete	Idle	No message	UI shows final result

💡 Execution stops after main thread receives result and updates UI

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
worker	undefined	Worker instance	Worker instance	Worker instance
data	input data	Sent to worker	Sent to worker	Sent to worker
result	undefined	undefined	Computed result	Computed result
UI state	Initial	Initial	Initial	Updated with result

Key Moments - 3 Insights

Why doesn't the UI freeze during heavy computation?

Because the heavy computation runs inside the web worker (see Step 3 in execution_table), the main thread stays free to update the UI.

How does the main thread get the result from the worker?

The worker sends a message back (Step 4), and the main thread listens with onmessage to receive it (Step 5).

What happens if the worker is not created properly?

The main thread cannot offload the task, so heavy computation blocks UI (not shown in table but implied at Step 1).

Visual Quiz - 3 Questions

Look at the execution_table, what is the worker state at Step 3?

A Idle

B Computing heavy task

C Sending result

D Waiting for data

💡 Hint

Check the 'Worker State' column at Step 3 in execution_table

At which step does the main thread update the UI?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Look at the 'UI Update' column in execution_table

If the worker never sends a message back, what happens to the main thread state after Step 4?

A Result received

B Worker instance destroyed

C Waiting for result

D UI updated

💡 Hint

Refer to 'Main Thread State' at Step 4 in execution_table

Concept Snapshot

Web workers run heavy tasks in background threads.
Main thread creates worker and sends data.
Worker computes and sends result back.
Main thread updates UI on receiving result.
Prevents UI freezing during heavy computation.

Full Transcript

Web workers allow Angular apps to run heavy computations without freezing the user interface. The main thread creates a worker and sends data to it. The worker runs the heavy task separately and sends the result back. The main thread listens for this result and updates the UI accordingly. This keeps the app responsive and smooth for users.