Download to read offline
Uploaded byAdrian Caetano
Workers
The document outlines the concepts of web workers and service workers in JavaScript, explaining their roles in executing tasks in the background and enhancing user interaction without blocking the main thread. It highlights the advantages of using web workers for long-running tasks and provides code snippets for implementing them. Additionally, it describes service workers as programmable proxies that manage requests and enable features like caching and push notifications.
More Related Content
Workers
- 1.
- 2.
- 3. JavaScript is ________________ a)Asynchronous b) Single Thread c) Both d) Confused
- 4.
- 5. Single Thread “Every lineof front end JS you've ever written has (momentarily) stopped your page from working”. Nor Churchill - Neither Mark Twain
- 6. 60 frames /second ❏ The users expected pages more simple and interactive ❏ interactions must be fluid ❏ The current devices refresh the view 60 times per second ❏ 1 second == 1000ms 60 frames == x ❏ Each frame has only 16ms to execute ❏ We should worry about what execute and not block the main thread
- 7. Workers ❏ A workeris an object created using a constructor that runs a named JavaScript file in the background. ❏ Has its own global execution context, self !== window ❏ Communicate to the main thread via the postMessage API ❏ Web Worker (parallelism) x Service Worker (offline) x Worklets (Browser render journey)
- 8.
- 9. Web Workers ❏ TheW3C published a first draft of the web workers standard in 2009 ❏ Web workers is an asynchronous system, or protocol, for web pages to execute tasks in the background, independently from the main thread and website UI ❏ Best suited to execute long-running or demand computation tasks ❏ Helps to free main thread to user interactions ❏ Angular 8 has built-in support Main Thread Web Worker PostMessage
- 10. ❏ Using aweb worker: const myWorker = new Worker('worker.js'); ❏ Sending a message to worker myWorker.postMessage('Hello!'); ❏ Receiving result from worker myWorker.onmessage = function(e) { console.log(e.data); } main.js
- 11. ❏ Receiving messagefrom main.js self.onmessage = function(e) { console.log(e.data); // Send message to main file self.postMessage(workerResult); } worker.js
- 12. ❏ Navigator object(browser infos) ❏ Location object (Read Only) ❏ XMLHttpRequest (Service worker uses Fetch) ❏ setTimeout()/clearTimeout() and setInterval()/clearInterval() ❏ The application cache ❏ Parsing data ❏ Virtual DOM ❏ File Reader, blob, ArrayBuffer ❏ importScripts() method to import other scripts ❏ Spawning other workers ❏ Not available DOM and Window objects What we can do
- 13. ❏ It’s notpossible to specify if a web worker should run on a specific core ❏ Web workers on a single core will not run in parallel but will not block the main UI thread ❏ On a multicore CPU Web Workers can truly run in parallel if the SO decides to Web Workers and Cores
- 14.
- 17. What is serviceworker? ❏ Service worker is a programmable proxy, allowing you to control how the requests from your page is handled ❏ Runs in background ❏ Enable cache (requests, image, etc) ❏ Enable push notification ❏ Background sync
- 18. What is serviceworker?
- 19.