The Importance Of (The Main Thread) Being Idle
Mandatory listening for this post.
The browser’s main thread is responsible for everything: running JavaScript, handling user input, laying out the page and painting the screen. It can only do one thing at a time. So when JavaScript keeps it busy everything else grinds to a halt.
Give the demo a try. Hit Work and see that most animations stop immediately, scrolling stops working (in some browsers), and all interactive elements (buttons, text fields, etc.) become unresponsive. The main thread is busy and has no time for you.
Now hit Work inside worker and see that all the animations keep running and the interactive elements keep being, well, interactive. It may seem like nothing is happening, but all the work is occurring inside a Web Worker – a separate thread with its own JavaScript runtime. The main thread doesn’t even notice and keeps running smoothly.
If you want to understand how Web Workers work, I encourage you to look at the code. It’s about 30 lines of JavaScript. The entire Web Worker API is quite simple: postMessage to send and a message event listener to receive.
I added logs so you can open your browser’s devtools and see the conversation between the two threads play out as you click each button. If you refresh the page, you’ll also see the main thread creating the worker and the worker announcing it’s ready.
As for the animations, the key point is that some animations keep running despite the main thread being blocked because their properties use hardware acceleration. The spinning square uses the transform property, which is GPU-accelerated. The fading square uses the opacity property, which is also GPU-accelerated. The moving square is incorrectly animated using the left and top properties, which are not GPU-accelerated. A correct animation should use the transform: translate(x, y) property instead.
The color-changing square uses a combination of the background-color property and a custom property (--hue), which I was expecting to be GPU-accelerated, but aparently it is not.
Reading How to create high-performance CSS animations should help you understand when an animation uses hardware acceleration. And CSS Triggers is a great resource for information on which properties trigger layout, paint and composite steps. But this is another topic.
Workers can’t touch the DOM, but they can do everything else: fetch data, crunch numbers, parse large files, run algorithms. Anything CPU-intensive that would otherwise jank your UI is a good candidate to move to a worker. Reserve the main thread for what only it can do: handling user input and rendering the UI.
Keep the main thread idle, and your page will feel fast and smooth.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@keyframes spinaround {
to { transform: rotate3d(0, 0, 1, 360deg); }
}
@keyframes changeopacity {
to { opacity: 0; }
}
/**
* This is extremely inefficient! Never animate left and top!
* Use transform: translate(x, y) instead.
*/
@keyframes movearound {
0% { left: 0%; top: 0%; }
25% { left: 50%; top: 0%; }
50% { left: 50%; top: 50%; }
75% { left: 0%; top: 50%; }
100% { left: 0%; top: 0%; }
}
@property --hue {
syntax: '<number>';
initial-value: 0;
inherits: true;
}
@keyframes changecolor {
to {
--hue: 360;
background-color: hsl(var(--hue) 50% 50%);
}
}
</style>
<link rel="stylesheet" href="./styles.css">
<body>
<main>
<div class="main-area">
<label class="interactive-el">Work duration: <input type="number" class="js-work-duration-input" min="1" max="15" value="5" /> seconds</label>
<div>
<button class="js-ui-work-button">Work</button>
<button class="js-worker-work-button">Work inside worker</button>
</div>
<div class="caption">Warning: Doing work in the main thread will lock your browser for the given duration.</div>
<div class="interactive-playground">
<header>Interactive Playground</header>
<button class="interactive-el" onclick="alert('you clicked me!')">Click me</button>
<label class="interactive-el"><input type="text" placeholder="Write something" /></label>
<label class="interactive-el">Toggle me <input type="checkbox" /></label>
<ol class="scrollable-area"><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li><li>Scroll me</li></ol>
</div>
</div>
<div class="squares">
<div class="square-container"><div class="square spinning"></div></div>
<div class="square-container"><div class="square fading"></div></div>
<div class="square-container"><div class="square moving"></div></div>
<div class="square-container"><div class="square coloring"></div></div>
</div>
</main>
</body>
<script type="module">
import { doWork } from './work.js'
let uiWorkButton = document.querySelector('.js-ui-work-button')
let workerWorkButton = document.querySelector('.js-worker-work-button')
let workDurationInput = document.querySelector('.js-work-duration-input')
uiWorkButton.addEventListener('click', () => {
const result = doWork(Number(workDurationInput.value), 'UI')
console.log(`[UI] Work result is ${result}`)
})
workerWorkButton.addEventListener('click', () => {
worker.postMessage({ workDuration: Number(workDurationInput.value)})
})
console.log('[UI] Creating Worker')
let worker = new Worker('./worker.js', { type: 'module' })
worker.addEventListener('message', (event) => {
console.log(`[UI] Worker says: "${event.data.message}"`)
})
console.log('[UI] Now listening to Worker')
</script>