Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

9.4 Web Workers

Web workers provide a way for us to offload complex processing to a worker thread to avoid blocking the main UI thread. In this lesson we’ll see how to use dedicated workers.

Key terms:

  • new Worker()
  • postMessage
  • onMessage
  • terminate

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


9.4 Web Workers

Hi, folks. In this lesson we're going to take a look at web workers. Web workers are a way to execute code in a different thread than the main UI thread. The idea is that if we want to do some heavy processing we can offload this to a different thread than the main UI thread to avoid blocking the user interface. When we create a new web worker, we specifile the file that contains the code for the web worker. Before we create one, let's add a new file that can be used as the worker. We can call it worker.js. So back in the main script now, let's create a worker and point it to this new file. So we create a new worker using the worker constructor. The constructor takes an argument, and that is the path to the file that we want to use as the worker. In this case, it's worker.js. In order to communicate with the worker we need to send it a message. And we do that using the postMessage interface. In this case we send a simple string message that just says hello from the main script. Inside the worker then, we need to add a message handler that will be executed whenever the worker receives a message from the main script. Inside a file opened as a web worker the onmessage property is globally available for us to assign a function to. This function will act as a handler and will be invoked whenever a message object is received. It will pass an event object to our handler and we can access any data sent from the main script using the data property of this event objects. We can also send messages back to the main script from the web worker. PostMessage is a globally available function inside files opened as workers. It works in the same way as the postMessage function that we used in the main script does. And again, we can just pass back a simple string message. So back in the main script now, we can also add message handlers to the worker objects in the main script. And we can access any data sent from the worker back to the main script in the same way. So we can see both of the log messages from the main script and the worker script. Once we finished with the web worker, we need to terminate it. We can do that with the terminate method. We need to use setTimeout because if we terminate the worker immediately none of the messages will get sent. The terminate method doesn't take any arguments and it immediately terminates the worker script so the worker will no longer be available to receive or send messages. This type of worker is a dedicated web worker. There are also shared workers which can be used by multiple separate pages at the same time. We aren't going to look at these in this lesson. So in this lesson we looked at web workers, which are a way for us to spawn new threads that are separate from the main UI thread. We saw that we can send data between the main script and the worker using postMessage and onMessage event handlers. This now brings us to the end of the practical side of the course. There are just a few closing words from me in the concluding lesson. Thanks for watching.

Back to the top
View on GitHub