Multithread Demystified

Multithread Demystified @AtilaFassina

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!!!

3 years ago
808

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.

atila.io
atilafassina

	self.addEventListener(
	'message',
	function (event) {
	self.postMessage(runBigTask(event.data, 'vanilla-worker'))
	},
	false
	)

	self.addEventListener(
	'message',
	function (event) {
	self.postMessage(runBigTask(event.data, 'vanilla-worker'))
	},
	false
	)

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

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

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

	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)

Multithread Demystified

Conf42: Multi-Thread Demystified

More from Atila