Tweet
Tweet

Slide 1

Slide 1 text

WEB WORKER J O B B E H I N D T H E S C E N E :

Slide 2

Slide 2 text

VITALII BOBROV • Lead SW Engineer, 2.5 years at EPAM • 7 years as FE Engineer • @AngularWroclaw org and tech speaker @bobrov1989 https://bobrov.dev

Slide 3

Slide 3 text

A B O U T E PA M • Top tech companies projects • Continuous grow - trainings, webinars, conferences • Sandbox and “garage” projects

Slide 4

Slide 4 text

SINGLE THREAD W H AT I S T H E P R O B L E M ?

Slide 5

Slide 5 text

MAIN THREAD

Slide 6

Slide 6 text

D I S A P P O I N T E D U S E R

Slide 7

Slide 7 text

TO USE THE APPLICATION U S E R S H O U L D B E A B L E

Slide 8

Slide 8 text

WORKER THREAD

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

DON’T OPTIMISE BEFORE GETTING PERFORMANCE ISSUES D I S C L A I M E R

Slide 11

Slide 11 text

C A N C O M P L I C AT E T H E C O D E

Slide 12

Slide 12 text

WEB WORKER H O W T O U S E

Slide 13

Slide 13 text

CREATE A WEB WORKER INSTANCE const worker = new Worker('path/to/worker.js'); https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker

Slide 14

Slide 14 text

BROWSERS SUPPORT https://caniuse.com/#feat=webworkers

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

BUFFERS FOR DATA TRANSPORT MAIN THREAD WORKER THREAD

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

IN PARALLEL R U N M U LT I P L E W O R K E R S

Slide 20

Slide 20 text

WEB WORKERS POOL https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency

Slide 21

Slide 21 text

TO CPU CORE T H R E A D I S N O T E Q U A L

Slide 22

Slide 22 text

SHARED WORKER https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker MAIN THREAD WORKER THREAD

Slide 23

Slide 23 text

COMLINK H E L P E R L I B R A R I E S

Slide 24

Slide 24 text

COMLINK AS EASY TO USE ABSTRACTION https://github.com/GoogleChromeLabs/comlink MAIN THREAD WORKER THREAD

Slide 25

Slide 25 text

USE CASES R E A L A P P L I C AT I O N S

Slide 26

Slide 26 text

DATA MANIPULATION C A S E S T U D Y I

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

T I M E C O M P L E X I T Y — B I G O N O TAT I O N

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

EXTERNAL SORT PA R A L L E L C H U N K E D S O T I N G

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

MARKDOWN PARSER C A S E S T U D Y I I

Slide 35

Slide 35 text

R E Q U I R E M E N T S • Parse comments in Markdown • Comments are present in another tab

Slide 36

Slide 36 text

PARSER - MAIN THREAD

Slide 37

Slide 37 text

PARSER - WORKER THREAD

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

TUNER AUTOCORRELATION C A S E S T U D Y I I I

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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