Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Web workers and service workers
Ähnlich wie Web workers and service workers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Web workers and service workers
- 1. Web workers Service workers
- 2. > whoami Nitish Phanse Senior developer KyePot @nitish24p
- 3. QUIZ
- 4. Javascript is __________________ (+3, -1)
- 5. Javascript is __________________ a) Asynchronous b) Single threaded c) Both d) Confusing (+3, -1) 🤔
- 7. Every line of front end JS you've ever written has (momentarily) stopped your page from working. - Nor Churchill - Neither Mark Twain
- 9. Demo
- 11. 60 frames / second
- 12. 60 frames / second 1 frame ~ 16.67 milli seconds
- 13. Parallelism in the browser ?? 🤔
- 14. Web workers
- 15. What is a web worker?
- 16. What is a web worker? A worker is an object created using a constructor that runs a named JavaScript file in the background.
- 17. What is a web worker? A worker is an object created using a constructor that runs a named JavaScript file in the background. Browser spawns a new dedicated worker thread for the web worker
- 18. What is a web worker? A worker is an object created using a constructor that runs a named JavaScript file in the background. Browser spawns a new dedicated worker thread for the web worker Has its own global execution context, i.e self !== window
- 19. What is a web worker? A worker is an object created using a constructor that runs a named JavaScript file in the background. Browser spawns a new dedicated worker thread for the web worker Has its own global execution context, i.e self !== window Communicate to the main thread via the postMessage API
- 22. Main UI Thread Spawn a Web worker
- 24. Main UI Thread Web Worker Hey, I'm sending you some data, handle it please window.postMessage(data)
- 25. Main UI Thread Web Worker Hey, I'm sending you some data, handle it please Okay Let me see what i can do
- 26. Main UI Thread Web Worker click scroll drag ajax call
- 27. Main UI Thread Web Worker Hmm… this is taking longer than usual hmmm..
- 28. Main UI Thread Web Worker processed your data self.postMessage(newData)
- 29. What can web workers do?
- 30. What can web workers do? Regular javascript operations
- 31. What can web workers do? Regular javascript operations JSON parsing / stringify
- 32. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB
- 33. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB fetch / Ajax
- 34. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB fetch / Ajax Virtual DOM
- 35. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB fetch / Ajax Virtual DOM FileReader, Blob, ArrayBuffer
- 36. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB fetch / Ajax Virtual DOM FileReader, Blob, ArrayBuffer btoa(), atob()
- 37. What can web workers do? Regular javascript operations JSON parsing / stringify indexDB fetch / Ajax Virtual DOM NO ACCESS TO MAIN DOM FileReader, Blob, ArrayBuffer btoa(), atob()
- 39. < ImageWorker />
- 43. Service Workers
- 44. What is a service worker?
- 45. Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. What is a service worker?
- 46. Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. What is a service worker? Has is own global execution context, i.e self !== window
- 47. Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. What is a service worker? Has is own global execution context, i.e self !== window Runs in the background
- 49. index.js
- 50. sw.js
- 51. sw.js (…contd)
- 52. What service workers can do? Service worker cookbook
- 53. What service workers can do? Service worker cookbook caching mechanism self.addEventListener('install', (event) => fn)
- 54. What service workers can do? Service worker cookbook caching mechanism fetch request listening self.addEventListener('install', (event) => fn) self.addEventListener('fetch', (event) => fn)
- 55. What service workers can do? Service worker cookbook caching mechanism fetch request listening enable push notifications self.addEventListener('install', (event) => fn) self.addEventListener('fetch', (event) => fn) self.addEventListener('push', (event) => fn)
- 56. What service workers can do? Service worker cookbook caching mechanism fetch request listening enable push notifications background sync self.addEventListener('install', (event) => fn) self.addEventListener('fetch', (event) => fn) self.addEventListener('push', (event) => fn) self.addEventListener('sync', (event) => fn)
- 59. Major Differences Web workers Service Workers Tab control Many per tab One per domain Life span Same as tab Independant Use case Parallelism Offline caching
- 60. Thank you