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

Multi-threading in JavaScript

Multi-threading in JavaScript

Deep dive into JavaScript multithreading using WebWorkers

Chinenye Onuegbu

November 09, 2019
Tweet

More Decks by Chinenye Onuegbu

Other Decks in Programming

Transcript

  1. @xkizer ➔ Name: Chinenye Onuegbu ➔ From: Nigeria ➔ Works

    for: Yilu ➔ As...: Senior Frontend Engineer ➔ Where?: Berlin ➔ Dog or Cat?: Dog ➔ Space or Tab: Space ➔ Semicolon or no?: Semicolon Who am I?
  2. @xkizer Process Processes, threads, and coroutines A process is an

    instance of an application that is being executed CODE Heap Stack Open Files Network Connections etc Process
  3. @xkizer Process Processes are usually hierarchical Closing a process will

    usually close all child processes launchd git kernel node Google Chrome Slack Google Chrome Helper
  4. @xkizer Threads Processes, threads, and coroutines A thread is a

    sequence of instructions being executed by a process https://en.wikipedia.org/wiki/Thread_(computing)
  5. @xkizer Threads Processes, threads, and coroutines Threads share all resources

    owned by the process CODE Heap Stack Open Files Network Connections etc Process Thread 1 Thread 2 Thread 3
  6. @xkizer https://docs.zephyrproject.org/latest/reference/kernel/scheduling/index.html Threads can be interrupted by the operating system

    at any time, and without notice through what is called preemption or context-switch Threads
  7. @xkizer Coroutines Processes, threads, and coroutines Coroutines are subroutines that

    are able to pause and resume later Pauses here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators
  8. @xkizer Coroutines Processes, threads, and coroutines ➔ Unlike threads, are

    not managed by the operating system ➔ Cannot be “interrupted”, they have to give up control ➔ After pausing, they can resume in a different thread[1] ➔ Implemented in JavaScript as Generators [1] Depending on the implementation
  9. @xkizer Each CPU core can only do one thing at

    a time, that is “one thread” at a time Concurrent vs parallel
  10. @xkizer To manage multiple threads in one core, the computer

    must divide its time into “time slices” and schedule threads to run in each time slice Time slicing Time Slice 1 Kernel Slice 2 Kernel Slice 3 Kernel Slice 4 Kernel Thread 1 Thread 2 Thread 3 Thread 1 Single CPU Core Concurrent vs parallel
  11. @xkizer In multi-core systems, threads can run in parallel Parallel

    processing Concurrent vs parallel Time Slice 1 Kernel Thread 1 Core 1 Core 2 Core 3 Slice 2 Kernel Thread 4 Slice 3 Thread 1 Slice 1 Kernel Thread 2 Slice 2 Kernel Thread 1 Slice 3 Thread 3 Slice 1 Thread 3 Kernel Slice 2 Thread 2
  12. @xkizer Thread Safety https://www.h-schmidt.net/FloatConverter/IEEE754.html Data corruption in an 8-bit system

    x = 25.0 (stored as 0x41 c8 00 00) x = 290.0 (stored as 0x43 91 00 00) console.log(x) (prints 400.0, which is 0x43 c8 00 00) Interrupted after storing the first byte T 1 T 2
  13. @xkizer “JavaScript is single-threaded” This is not entirely true Everything

    runs on a different thread, except your JS code Multi-threading in JavaScript
  14. @xkizer Multi-threading is implemented as: ➔ Web Workers in browsers

    ➔ Worker Threads in Node.js Multi-threading in JavaScript
  15. @xkizer Multi-threading in JavaScript [1] https://developer.mozilla.org/en-US/docs/Web/API/Worker [2] https://caniuse.com/#feat=webworkers [3] https://github.com/nolanlawson/pseudo-worker

    Browser support for Web Workers[1] Web Workers is supported in 97.48% of all installed browsers[2] Polyfills available[3]
  16. @xkizer ➔ Blocking the main thread in JavaScript blocks user

    input and blocks repaint ➔ Blocking the user input for long will trigger the “Unresponsive script” alert in some browsers ➔ Performing tasks in parallel generally makes them complete faster Why would you use it? Multi-threading in JavaScript
  17. @xkizer Creating a thread in JavaScript Understanding Web Workers/Worker Threads

    “worker-file.js” is governed by CORS rules (and CSP rules if it’s a data:// or blob:// URI) Does not work for pages served using file://
  18. @xkizer Threads that behave like processes ➔ Worker threads behave

    like isolated processes ➔ Nothing is shared except ShareArrayBuffer[1] ➔ Communication only through engine-provided inter-thread communication ➔ ArrayBuffer, MessagePort, and Transferables can be transferred Understanding Web Workers/Worker Threads [1] SharedArrayBuffer is disabled in most browsers by default to prevent timing attacks
  19. @xkizer https://www.h-schmidt.net/FloatConverter/IEEE754.html x = 25.0 (stored as 0x41 c8 00

    00) x = 290.0 (stored as 0x43 91 00 00) console.log(x) (prints 400.0, which is 0x43 c8 00 00) Interrupted after storing the first byte T 1 T 2 SharedArrayBuffer can put you in this situation Remember this? Creating Web Workers
  20. @xkizer Atomics is Safe SharedArrayBuffer with Atomics Atomics ensures that

    operations happen atomically (in one CPU cycle)
  21. @xkizer Let’s draw a Mandelbrot fractal Dividing our canvas into

    smaller pieces that can each be computed by different workers