Atila
I'm on a mission to make code simple. When not recording screencasts or courses, you may find me either writing and talking about jamstack, performance, or developer tooling.
Multithread Demystified
Atila Fassina
Lead Web Developer @ SAP
Hallo
multithreading
paralellism
≠
single thread
multi threads
vs
concurrency
parallelism
vs
concurrent threads
one at a time
from discord.com
paralell threads
simultaneous
from giphy.com
parallelism is
a special kind of
async
let’s talk about JavaScript
Concurrent JS APIs
⏰ setTimeout
⏱ setInterval
🙏 promise
🪃 fetch
async
await
what about paralell?!
web
workers
ℹ mdn.io/web-workers
UX 💛 Web-Workers
Web-Worker tasks do not interfere with the UI
👋 bye bye, Blocking Scripts
Web-Workers types
🎯 Dedicated Worker
🤝 Shared Worker
Dedicated to one main script
Shared by multiple main scripts
Scopes
🎯 Dedicated Worker
🤝 Shared Worker
🪟 Main Thread
`window`
`DedicatedWorkerGlobalScope`
`SharedWorkerGlobalScope`
`self`
SharedWorkers API removed from Webkit
caveats
🪤
data
📦
📫 transferred, not cloned
👾 serialized objects
`worker.postMessage()`
errors
💣
🪐 different runtime
📡 sends error event
`worker.onerror = () => {}`
Thread safety
🚔
👮 only threadsafe DOM components
🔒 data restrictions (only serialized objects)
❌ own execution context
CSP Header
🔐
99%
of cases
add on
`worker.js`
request
origin is
`UID`
(universally unique identifier)
1%
of cases
DOM
🖥
🪐 different runtime
👾 serialized objects
👮 only threadsafe DOM components
🚫 no DOM manipulation
React
cool, now gimme some
sync
Promise
Worker
self.addEventListener(
'message',
function (event) {
self.postMessage(runBigTask(event.data, 'vanilla-worker'))
},
false
)
worker.js
export const Button = () => (
<button
onClick={async () => {
setData('loading')
const worker = new Worker(
new URL('../utils/vanilla-worker', import.meta.url),
{
name: 'vanilla-worker',
type: 'module',
}
)
worker.postMessage(TASK_SIZE)
worker.addEventListener('message', function (evt) {
setData(evt.data)
})
}}
>
Run Vanilla-WebWorker
</button>
)
trigger Worker task
DX
better
please
Comlink
background-threads
like it’s main
📡
Proxy API
RPC → `postMessage`
import { expose } from 'comlink'
import { runBigTask } from './big-task'
const worker = {
runBigTask: async (int: number) => (
await runBigTask(int, 'comlink-worker')
),
}
export type ComlinkWorker = typeof worker
expose(worker)comlink.js
export const Button = () => (
<button
onClick={async () => {
setData('loading')
const worker = new Worker(
new URL('../utils/comlink-worker', import.meta.url),
{
name: 'runBigTaskWorker',
type: 'module',
}
)
const { runBigTask } = wrap<ComlinkWorker>(worker)
setData(await runBigTask(TASK_SIZE))
}}
>
Comlink WebWorker
</button>
)
trigger Worker task
what more?
🐝 subworkers
🧞♀️
🛰 and other types of workers
`importScripts()`
🎁
takeaway
🥡
getting ⚡️out ⚡️ of the main-thread is doable and cheap
thank you
Conf42: Multi-Thread Demystified
By Atila
Conf42: Multi-Thread Demystified
JavaScript is not single-threaded anymore. And it has been a while. But we are still leaving all the processing in the same thread that we render things. Let's have a look on how we can do it better. Unblock the main thread forever!!!
