Multi-threading in JavaScript

@xkizer Multi-threading in JavaScript Chinenye Onuegbu Senior Frontend Engineer, Yilu
Tenerife | November 9, 2019

@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?

@xkizer Processes, threads, and coroutines Introductory concepts

@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

@xkizer Process Processes are completely isolated from each other Processes
can only interact through system-provided IPC

@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

@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)

@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

@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

@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

@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

@xkizer Concurrent vs parallel Introductory concepts

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

@xkizer Each CPU core can only do one thing at
a time, that is “one thread” at a time Concurrent vs parallel

@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

@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

@xkizer Thread Safety

@xkizer Remember that threads share resources? Thread Safety

@xkizer Also remember that they can be interrupted at any
time? Thread Safety

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

@xkizer Shared Resources Interruptions Concurrency Chaos Thread Safety

@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

@xkizer Multi-threading in JavaScript

@xkizer “JavaScript is single-threaded” This is not entirely true Everything
runs on a different thread, except your JS code Multi-threading in JavaScript

@xkizer Multi-threading is implemented as: ➔ Web Workers in browsers
➔ Worker Threads in Node.js Multi-threading in JavaScript

@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] Polyﬁlls available[3]

@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

@xkizer Understanding Web Workers/Worker Threads

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

@xkizer Creating a thread in JavaScript Understanding Web Workers/Worker Threads
“worker-ﬁle.js” is governed by CORS rules (and CSP rules if it’s a data:// or blob:// URI) Does not work for pages served using ﬁle://

@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

@xkizer Creating Web Workers

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

@xkizer In the worker ﬁle... Creating Web Workers

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

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

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

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

@xkizer Transferring an object... Creating Web Workers

@xkizer Using SharedArrayBuffer... Creating Web Workers

@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

@xkizer Safer SharedArrayBuffer with Atomics

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

@xkizer Atomics is Safe SharedArrayBuffer with Atomics Atomics ensures that
operations happen atomically (in one CPU cycle)

@xkizer Atomics is Fast SharedArrayBuffer with Atomics Atomics uses in-built
hardware instructions

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

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

@xkizer Let’s draw a Mandelbrot fractal

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

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

@xkizer Let’s draw a Mandelbrot fractal Dividing our canvas into
smaller pieces that can each be computed by different workers

@xkizer Things to keep in mind

@xkizer Get the number of available cores: Browser: Node.js: Things
to keep in mind

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

@xkizer Alternatives to JS multi-threading

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

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

@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

@xkizer WebAssembly Alternatives to multi-threading

@xkizer Thank You! yiluhub.com/careers

Multi-threading in JavaScript

Multi-threading in JavaScript

More Decks by Chinenye Onuegbu

Other Decks in Programming

Featured

Transcript