Multi-threading in JavaScript

Multi-threading in JavaScript

Deep dive into JavaScript multithreading using WebWorkers

012b2cb830f41375f267243428a4899c?s=128

Chinenye Onuegbu

November 09, 2019
Tweet

Transcript

  1. @xkizer Multi-threading in JavaScript Chinenye Onuegbu Senior Frontend Engineer, Yilu

    Tenerife | November 9, 2019
  2. @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?
  3. @xkizer Processes, threads, and coroutines Introductory concepts

  4. @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
  5. @xkizer Process Processes are completely isolated from each other Processes

    can only interact through system-provided IPC
  6. @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
  7. @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)
  8. @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
  9. @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
  10. @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
  11. @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
  12. @xkizer Concurrent vs parallel Introductory concepts

  13. @xkizer Concurrent vs parallel https://dev.to/luminousmen/concurrency-and-parallelism-are-two-different-things-lpg

  14. @xkizer Each CPU core can only do one thing at

    a time, that is “one thread” at a time Concurrent vs parallel
  15. @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
  16. @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
  17. @xkizer Thread Safety

  18. @xkizer Remember that threads share resources? Thread Safety

  19. @xkizer Also remember that they can be interrupted at any

    time? Thread Safety
  20. @xkizer Also remember that they can run in parallel? Thread

    Safety
  21. @xkizer Shared Resources Interruptions Concurrency Chaos Thread Safety

  22. @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
  23. @xkizer Multi-threading in JavaScript

  24. @xkizer “JavaScript is single-threaded” This is not entirely true Everything

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

    ➔ Worker Threads in Node.js Multi-threading in JavaScript
  26. @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]
  27. @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
  28. @xkizer Understanding Web Workers/Worker Threads

  29. @xkizer Creating a thread in Go Understanding Web Workers/Worker Threads

  30. @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://
  31. @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
  32. @xkizer Creating Web Workers

  33. @xkizer In the main thread... Creating Web Workers

  34. @xkizer In the worker file... Creating Web Workers

  35. @xkizer Sending a message to the worker... Creating Web Workers

  36. @xkizer Receiving message in the worker... Creating Web Workers

  37. @xkizer Sending message from the worker... Creating Web Workers

  38. @xkizer Receiving the message from the worker... Creating Web Workers

  39. @xkizer Transferring an object... Creating Web Workers

  40. @xkizer Using SharedArrayBuffer... Creating Web Workers

  41. @xkizer Using SharedArrayBuffer... Creating Web Workers

  42. @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
  43. @xkizer Safer SharedArrayBuffer with Atomics

  44. @xkizer Atomics enables safe concurrent operations on SharedArrayBuffer SharedArrayBuffer with

    Atomics
  45. @xkizer Atomics is Safe SharedArrayBuffer with Atomics Atomics ensures that

    operations happen atomically (in one CPU cycle)
  46. @xkizer Atomics is Fast SharedArrayBuffer with Atomics Atomics uses in-built

    hardware instructions
  47. @xkizer Using SharedArrayBuffer with Atomics... SharedArrayBuffer with Atomics

  48. @xkizer SharedArrayBuffer with Atomics Using SharedArrayBuffer with Atomics...

  49. @xkizer Let’s draw a Mandelbrot fractal

  50. @xkizer https://en.wikipedia.org/wiki/Mandelbrot_set

  51. @xkizer http://bit.ly/canarias-fractal

  52. @xkizer Let’s draw a Mandelbrot fractal Dividing our canvas into

    smaller pieces that can each be computed by different workers
  53. @xkizer Things to keep in mind

  54. @xkizer Get the number of available cores: Browser: Node.js: Things

    to keep in mind
  55. @xkizer Web Workers do not have access to the DOM

    Things to keep in mind
  56. @xkizer Alternatives to JS multi-threading

  57. @xkizer Coroutines (Generators)[1] Alternatives to multi-threading [1]https://github.com/balrogsoft/multitasking-js

  58. @xkizer requestIdleCallback[1] Alternatives to multi-threading [1]https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

  59. @xkizer child_process.fork()[1] Alternatives to multi-threading [1]https://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options

  60. @xkizer WebAssembly Alternatives to multi-threading

  61. @xkizer Thank You! yiluhub.com/careers