Internet Programming Week 10. Instructor: Paulo Fernandes Applied Computer Science University of Winnipeg

Size: px

Start display at page:

Download "Internet Programming Week 10. Instructor: Paulo Fernandes Applied Computer Science University of Winnipeg"

Candice Cox
5 years ago
Views:

1 Internet Programming Week 10 Instructor: Paulo Fernandes Applied Computer Science University of Winnipeg

2 Web Workers Slides only

3 Threading Ever get a slow script message? Q) How could a script be slow running with a multicore processors in your machine? A) JavaScript can only do one thing at a time

4 Single Threaded JavaScript only does 1 thing at a time Called single threaded Based on the idea of processes and threads Improves program performance Writing programs with multiple threads can be challenging Disadvantage: Tasks with high computational complexity can hijack your web application i.e. complex tasks can leave your UI unresponsive

5 Single Threaded Problems Running an init function Handling a user click Process an array of data Handling another user click Updating the DOM Fetching form data Validating user input

6 Multi-threaded Solution Running an init function Handling a user click Create a web worker Web Worker Thread Handling another user click Updating the DOM Fetching form data Process an array of data Validating user input Use array A timer just went off Handling a Submit

7 Single Threaded How can JavaScript be single threaded? What happens when a timer goes off? When an event occurs, that event is added to a queue The JavaScript engine does not get to it until it is finished with its current task We need a way to offload the computationally complex operations to another thread

8 Web Workers Multi-Threaded JavaScript

9 Web Workers Browser creates one or more workers Each worker is defined with its own JavaScript file Contains all the code, or references to the code Workers are very restricted They don t have access to many of the runtime objects available to the browser n e.g. The DOM or any variables or functions in your main code

10 Web Workers Browser sends a message to the worker to start it working Worker code: Receives the message Looks to see if there are any special instructions Starts working Worker sends a message to indicate it has finished its task Contains the final results Main browser incorporates results into page

11 Web Workers Why not allow workers to access the DOM? JavaScript engines highly optimize DOM operations based on the assumption that only one thread has access to the DOM Otherwise, race conditions can occur n Seriously impact performance

12 Web Workers We must set up the main thread to receive the output of a worker We need to define a handler to receive a message from a web worker In other words, define a function that will get called when a message is received from a worker

13 The Code

14 Constructor Worker Represents other threads Constructor takes in a string n Represents another script file Implements the EventTarget object n Therefore, has support for adding event handlers let worker = new Worker( worker.js );

15 message event message gets fired whenever the web worker posts a message back Receives an event object, which contains a data property This contains the content sent from the web worker script worker.addeventlistener( message, (e) => { }); console.log( Worker says :, e.data);

16 postmessage Method that sends a message to the Web Worker. Accepts any data type. worker.postmessage( Hello World );

17 Worker Script The worker script is a separate file which sets it s own event listener. Specific convention must be used. Event handler is given an event object (as always)

18 Worker Script The script that is used by the web worker must follow specific conventions It has its own event listener, also looking for a message It also uses postmessage to reply back to the main thread.

19 Worker Script The worker script often refers to self which helps avoid confusion. Messages go BOTH WAYS Two listeners self.addeventlistener('message', function(e) { // do something with e.data self.postmessage( hi back ); });

20 Local and Security Restrictions To execute scripts, MUST use a server n User http-server or live-server Chrome will not let you run Web Workers on your local Use FireFox for testing purposes

21 Terminating Workers Workers take up memory in the browser They should be terminated once they are done their task and no longer necessary The worker script will abort if the worker still happens to be running worker.addeventlistener( message, (e) => { console.log( Worker says :, e.data); let worker = e.target; worker.terminate(); // destroys the worker });

22 Prime Numbers Example

Browser code isolation

CS 155 Spring 2016 Browser code isolation John Mitchell Acknowledgments: Lecture slides are from the Computer Security course taught by Dan Boneh and John Mitchell at Stanford University. When slides are