Scribd
Upload
75 views17 pages

Microsoft Official Course: Performing Background Processing by Using Web Workers

This document provides an overview of using web workers to perform background processing and asynchronous tasks in a web application. It discusses: - What web workers are and why they are used to move long-running JavaScript code to a parallel execution environment to keep the browser responsive. - How to create dedicated and shared web workers, communicate with them by sending and receiving messages, and structure the code inside web workers using a message loop and command pattern. - An example lab scenario that demonstrates using a web worker to convert images to grayscale in the background instead of blocking the browser UI thread.

Uploaded by

Richie Poo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
75 views17 pages

Microsoft Official Course: Performing Background Processing by Using Web Workers

This document provides an overview of using web workers to perform background processing and asynchronous tasks in a web application. It discusses: - What web workers are and why they are used to move long-running JavaScript code to a parallel execution environment to keep the browser responsive. - How to create dedicated and shared web workers, communicate with them by sending and receiving messages, and structure the code inside web workers using a message loop and command pattern. - An example lab scenario that demonstrates using a web worker to convert images to grayscale in the background instead of blocking the browser UI thread.

Uploaded by

Richie Poo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Microsoft Official Course

Module 14

Performing Background Processing


by Using Web Workers
Module Overview

Understanding Web Workers


• Performing Asynchronous Processing by Using
Web Workers
Lesson 1: Understanding Web Workers

What is a Web Worker?


Why Use a Web Worker?
Web Worker Isolation
• Dedicated and Shared Web Workers
What is a Web Worker?

• JavaScript code running in a web page is single-threaded


• Long-running functions can cause the browser to become
unresponsive
• Web workers enable a web page to move code to a
parallel execution environment, enabling the browser to
remain responsive
• Code in the web page communicates with the web worker by
passing messages
Why Use a Web Worker?

• Performing slow I/O operations:

• Performing computationally-intensive calculations:

• Implementing multitasking:
Web Worker Isolation

• A web worker runs isolated from the web page


and other web workers
• It cannot access the document of the web page
• It cannot access data or JavaScript code in the web page

• A web worker has access to a limit subset of


JavaScript functionality
• A web page communicates with a web worker by
sending and receiving messages:
• Send messages by using the postMessage() function
• Receive messages by handling the message event
Dedicated and Shared Web Workers

• Dedicated web workers:


• Belong to a single page
• Can only communicate with that page
• Stop when the page is closed

• Shared web workers:


• Can be accessed by all pages in a web application
• Can communicate with any page in the web application
• Stop when the web application finishes
Lesson 2: Performing Asynchronous Processing by
Using Web Workers

Creating and Terminating a Dedicated Web Worker


Communicating With A Dedicated Web Worker
The Structure of a Web Worker
Creating a Shared Web Worker
• Demonstration: Creating a Web Worker Process
Creating and Terminating a Dedicated Web Worker

• Starting a web worker:


var webWorker;
if( typeof(Worker)!== "undefined") {
webWorker = new Worker("processScript.js");
}

• Terminating a web worker from the web page:


webWorker.terminate();

• Terminating a web worker from inside the web worker:

self.close();
Communicating With A Dedicated Web Worker

• The web page sends messages to the web worker


by using the postMessage() function
webWorker.postMessage("Here is some data");}

• The web worker receives messages by handling


the message event
function messageHandler(event) { ... }
self.addEventListener("message", messageHandler, false);

• The web worker sends a reply by using


postMessage, and the web page receives the
reply by catching the message event
• If the web worker fails with an error, it sends the
error event and terminates
The Structure of a Web Worker

• Web workers often implement a message loop


and the Command pattern:
function messageHandler(event) {
var data = event.data;
switch (data.command) {
case "DOWORK": // process the DOWORK command
...
break;
case "DOMOREWORK": // process the DOMOREWORK command
...
break;
case "FINISH": // tidy up and shut down
...
self.postMessage("Shutting down");
self.close();
}
}

• Web workers can import scripts and access some


global objects and functions
Creating a Shared Web Worker

• Use the SharedWorker constructor to create a


shared web worker
• Each web page communicates with a shared web worker
by using its own port
function replyHandler(event) { ... }
var sharedWebWorker = new SharedWorker("sharedProcessScript.js");
sharedWebWorker.port.addEventListener("message", replyHandler, false);
sharedWebWorker.port.start();
...
var data = ...;
sharedWebWorker.port.postMessage(data);

• The connect event in a shared web worker fires


when a new port is opened
Demonstration: Creating a Web Worker Process

In this demonstration, you will learn about the tasks


that you will perform in the lab for this module.
Lab: Creating a Web Worker Process

• Exercise 1: Improving Responsiveness by Using a


Web Worker

Logon Information
• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
• User Name: Student
• Password: Pa$$w0rd

Estimated Time: 60 minutes


Lab Scenario

• When a speaker creates a conference badge, the speaker drags and


drops an image containing a photograph onto the web page. This
photograph may be a color image. However, the conference speaker
badges will be printed in grayscale. Therefore, the web page that
creates the badges should render the speaker photograph in grayscale
in order to give an accurate representation of the printed output.

• An image file may be many megabytes in size. To avoid uploading


large files to a server for processing, you have decided to convert the
photos to grayscale by using JavaScript code running in the web
browser.

• However, processing large images will cause the web browser to


become unresponsive while it performs this processing. You therefore
decide to use a web worker to move the image conversion to a
background process, enabling the web browser to remain responsive.
Module Review and Takeaways

• Review Question(s)
Course Evaluation

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy