Multithreaded JavaScript—Web Workers and Atomics

For better or worse, JavaScript is single-threaded by design. For over 50 years Moore’s Law has described persistent exponential growth in computational power, but physical limitations have slowed that trend. Advancement now comes through the use of multiple CPUs and cores. This is fine for languages featuring threads and task-based architectures. But what about JavaScript?

Thankfully, new paradigms handle parallelism over the web. Web Worker constructs allow long-running code to execute in the background without blocking the UI. Shared Memory and Atomic operations allow true sharing of data among worker processes. Learn to leverage these exciting features to responsibly improve the performance and responsiveness of your web applications!

Transcript

1. #multithreaded J AVA S C R I P T P A R A L L E L I S M @ j e f f r e y s t r a u ss
5. Intel 80286 25 MHZ CPU 1 MB RAM 3.5" & 5.25" FLOPPY 40 MB HDD
6. $1,500
9. 8x faster
10. moore's law
13. gate length: si atom: ~3 nm ~0.3 nm
20. concurrency vs parallelism
21. steak salad table
22. steak salad table
23. steak salad table
24. steak salad table
25. steak salad table
26. steak salad table
27. steak salad table parallelism
28. javascript concurrency CALLBACKS PROMISES ASYNC / AWAIT
29. event loop CALLBACKS PROMISES ASYNC / AWAIT
30. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP CALL STACK EXTERNAL API CALLBACK QUEUE
31. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() log('Start') CALL STACK EXTERNAL API CALLBACK QUEUE
32. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API CALLBACK QUEUE setTimeout(...)
33. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API 100ms timer CALLBACK QUEUE
34. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API 100ms timer log(2) CALLBACK QUEUE
35. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API log('Callback') CALLBACK QUEUE
36. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API log ('Callback') CALLBACK QUEUE
37. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API CALLBACK QUEUE log ('Callback') log('End')
38. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP log('Callback') CALL STACK EXTERNAL API CALLBACK QUEUE
39. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP CALL STACK EXTERNAL API CONSOLE OUTPUT Start 2 End Callback
40. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 0); let sum = 1 + 1; console.log(sum); console.log('End'); } EVENT LOOP CALL STACK EXTERNAL API CONSOLE OUTPUT Start 2 End Callback
42. function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let result = blockingCode(); console.log(result); console.log('End'); } EVENT LOOP demo() CALL STACK EXTERNAL API 100ms timer blockingCode() CALLBACK QUEUE
43. EVENT LOOP demo() CALL STACK EXTERNAL API blockingCode() CALLBACK QUEUE this blocks callback execution log ('Callback') function demo() { console.log('Start') setTimeout(() => { console.log('Callback'); }, 100); let result = blockingCode(); console.log(result); console.log('End'); }
44. demo
45. web workers
46. new Worker(<script.js>)
48. postMessage(<some_data>)
49. onmessage
50. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
51. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
52. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
53. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
54. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
55. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
56. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
57. Main says: Talk to me. // printed by worker Worker says: Here I am. // printed by main thread CONSOLE OUTPUT
58. use cases PREFETCHING DATA CALCULATIONS SPELL CHECK MASSIVE DATA IMAGE PROCESSING
59. considerations
60. cleanup
61. close()
62. worker.terminate()
63. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') close(); }; WORKER.JS
64. let w = new Worker(worker.js); w.onmessage = (e) => { console.log( `Worker says: ${e.data}` ); }; w.postMessage('Talk to me.'); w.terminate(); MAIN.JS onmessage = (e) => { console.log( `Main says: ${e.data}` ); postMessage('Here I am.') }; WORKER.JS
66. am i closed?
69. pick up after yourself
70. access limitations DOM GLOBAL SCOPE PARENT FUNCTIONS WINDOW
71. communication
72. sharing data
73. sharing data
74. copying sharing data
75. let w = new Worker(worker.js); let foo = { x: 1, y: 2 }; w.onmessage = (e) => { console.log( `My x is: ${foo.x} Worker x is: ${e.data.x}` ); }; w.postMessage(foo); MAIN.JS let foo; onmessage = (e) => { foo = e.data; foo.x = 42; postMessage(foo) }; WORKER.JS
76. let w = new Worker(worker.js); let foo = { x: 1, y: 2 }; w.onmessage = (e) => { console.log( `My x is: ${foo.x} Worker x is: ${e.data.x}` ); }; w.postMessage(foo); MAIN.JS let foo; onmessage = (e) => { foo = e.data; foo.x = 42; postMessage(foo) }; WORKER.JS
77. let w = new Worker(worker.js); let foo = { x: 1, y: 2 }; w.onmessage = (e) => { console.log( `My x is: ${foo.x} Worker x is: ${e.data.x}` ); }; w.postMessage(foo); MAIN.JS let foo; onmessage = (e) => { foo = e.data; foo.x = 42; postMessage(foo) }; WORKER.JS
78. let w = new Worker(worker.js); let foo = { x: 1, y: 2 }; w.onmessage = (e) => { console.log( `My x is: ${foo.x} Worker x is: ${e.data.x}` ); }; w.postMessage(foo); MAIN.JS let foo; onmessage = (e) => { foo = e.data; foo.x = 42; postMessage(foo) }; WORKER.JS
79. My x is: 1 // original object literal Worker x is: 42 // modified by worker code CONSOLE OUTPUT
80. structured clone algorithm
81. excludes ERROR & FUNCTION DOM NODES PROTOTYPE CHAIN DESCRIPTORS
82. transferring sharing data
83. postMessage(foo, [trans])
84. let arrBuff = new ArrayBuffer(1024) let foo = { key: 'foo_buffer', buffer: arrBuff }; let w = new Worker(worker.js); w.postMessage(foo, [arrBuff]); MAIN.JS
85. let arrBuff = new ArrayBuffer(1024) let foo = { key: 'foo_buffer', buffer: arrBuff }; let w = new Worker(worker.js); w.postMessage(foo, [arrBuff]); MAIN.JS
86. benefits MUCH FASTER LESS MEMORY
87. drawbacks ARRAY BUFFERS IMAGE BITMAPS
88. drawbacks ONE THREAD AT A TIME
89. broadcast channels
90. shared browser context
91. // could be any executing context let channel = new BroadcastChannel("foo"); // listens to message on channel 'foo' from anyone foo.onmessage = (e) => console.log(e.data); // posts message to anyone who is listening to 'foo' foo.postMesage('Is there anybody out there?'); MAIN.JS / WORKER.JS
92. // could be any executing context let channel = new BroadcastChannel("foo"); // listens to message on channel 'foo' from anyone foo.onmessage = (e) => console.log(e.data); // posts message to anyone who is listening to 'foo' foo.postMesage('Is there anybody out there?'); MAIN.JS / WORKER.JS
94. supports tabs & workers
95. same origin
96. e.data still a copy
97. shared memory
99. SharedArrayBuffer
100. // set aside 1KB of shared memory let sab = new SharedArrayBuffer(1024); // create a view on the shared memory with 256 Int32 let intArray = new Int32Array(sab); let w = new Worker(worker.js); w.postMessage(intArray); MAIN.JS
101. // set aside 1KB of shared memory let sab = new SharedArrayBuffer(1024); // create a view on the shared memory with 256 Int32 let intArray = new Int32Array(sab); let w = new Worker(worker.js); w.postMessage(intArray); MAIN.JS
102. // set aside 1KB of shared memory let sab = new SharedArrayBuffer(1024); // create a view on the shared memory with 256 Int32 let intArray = new Int32Array(sab); let w = new Worker(worker.js); w.postMessage(intArray); MAIN.JS
103. let workerIntArray; onmessage = (e) => { // same instance accessing the same memory workerIntArray = e.data; Atomics.store(workerIntArray, 42, 500); }; WORKER.JS
105. Atomics
106. Atomics .LOAD (ARR, INDEX) .STORE (ARR, IND, VAL) .SUB (ARR, IND, VAL) .AND / .OR / .XOR
107. Atomics .WAIT(ARR, IND, VAL) .WAKE(ARR, IND, NUM)
109. W H E R E T O G O F R O M H E R E experiment
110. identify
111. keep watch
112. #multithreaded jeffrey.s.strauss@gmail.com @ j e f f r e y s t r a u ss