Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Job Behind the Scene: Web Worker

Job Behind the Scene: Web Worker

The Web initially designed to show documents, and JavaScript brought interactivity into it. Modern applications are doing a lot of extra work and computations in addition to UI updates. With those requirements and single-thread for UI, making web app performant and responsive to the user input becomes challenging. Web Worker is the API that provides a beautiful abstraction on top of threading in browsers, and I want to show a real why, when, and how to use it in Angular.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

August 04, 2020
Tweet

Transcript

  1. WEB WORKER J O B B E H I N

    D T H E S C E N E :
  2. VITALII BOBROV • Lead SW Engineer, 2.5 years at EPAM

    • 7 years as FE Engineer • @AngularWroclaw org and tech speaker @bobrov1989 https://bobrov.dev
  3. A B O U T E PA M • Top

    tech companies projects • Continuous grow - trainings, webinars, conferences • Sandbox and “garage” projects
  4. SINGLE THREAD W H AT I S T H E

    P R O B L E M ?
  5. MAIN THREAD

  6. D I S A P P O I N T

    E D U S E R
  7. TO USE THE APPLICATION U S E R S H

    O U L D B E A B L E
  8. WORKER THREAD

  9. W O R K E R S E C U

    R I T Y L I M I TAT I O N S • Makes a copy of data • Have no direct access to DOM and global functions • Communicates via messages
  10. DON’T OPTIMISE BEFORE GETTING PERFORMANCE ISSUES D I S C

    L A I M E R
  11. C A N C O M P L I C

    AT E T H E C O D E
  12. WEB WORKER H O W T O U S E

  13. CREATE A WEB WORKER INSTANCE const worker = new Worker('path/to/worker.js');

    https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker
  14. BROWSERS SUPPORT https://caniuse.com/#feat=webworkers

  15. SETUP COMMUNICATION CHANNEL MAIN THREAD worker.postMessage('data'); worker.addEventListener('message', (event: MessageEvent) =>

    { console.log(event.data); }); addEventListener('message', (event: MessageEvent) => { console.log(event.data); }); postMessage('response'); WORKER THREAD
  16. M I G H T C A U S E

    A H U G E M E M O RY U T I L I S AT I O N
  17. BUFFERS FOR DATA TRANSPORT MAIN THREAD WORKER THREAD

  18. SHARED ARRAY BUFFERS https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

  19. IN PARALLEL R U N M U LT I P

    L E W O R K E R S
  20. WEB WORKERS POOL https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency

  21. TO CPU CORE T H R E A D I

    S N O T E Q U A L
  22. SHARED WORKER https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker MAIN THREAD WORKER THREAD

  23. COMLINK H E L P E R L I B

    R A R I E S
  24. COMLINK AS EASY TO USE ABSTRACTION https://github.com/GoogleChromeLabs/comlink MAIN THREAD WORKER

    THREAD
  25. USE CASES R E A L A P P L

    I C AT I O N S
  26. DATA MANIPULATION C A S E S T U D

    Y I
  27. R E Q U I R E M E N

    T S • Sort a list of objects by different parameters • Handle a big lists — 100k+ items
  28. T I M E C O M P L E

    X I T Y — B I G O N O TAT I O N
  29. O(n*log(n)) M O S T P E R F O

    R M A N T S O RT I N G A L G O R I T H M S
  30. EXTERNAL SORT PA R A L L E L C

    H U N K E D S O T I N G
  31. EXTERNAL SORT - MAIN THREAD https://en.wikipedia.org/wiki/External_sorting

  32. EXTERNAL SORT - MAIN THREAD https://en.wikipedia.org/wiki/External_sorting

  33. F U T U R E I M P R

    O V E M E N T S • Optimise memory usage using ArrayBuffer • Add ability to use different sorting algorithm, ex. topological sort
  34. MARKDOWN PARSER C A S E S T U D

    Y I I
  35. R E Q U I R E M E N

    T S • Parse comments in Markdown • Comments are present in another tab
  36. PARSER - MAIN THREAD

  37. PARSER - WORKER THREAD

  38. F U T U R E I M P R

    O V E M E N T S • Simplify implementation using Comlink • Improve memory utilisation
  39. TUNER AUTOCORRELATION C A S E S T U D

    Y I I I
  40. R E Q U I R E M E N

    T S • Run autocorrelation on analysed audio data • Debounce audio data requests https://github.com/vitaliy-bobrov/js-rocks/tree/main/src/app/audio/effects/tuner
  41. F U T U R E I M P R

    O V E M E N T S • Implement autocorrelation with WASM (AssemblyScript) • Use Web Worker only for WASM initialisation
  42. THANK YOU U S E T H E W E

    B W O R K E R F O R B E T T E R U X @bobrov1989 https://bobrov.dev