The Pixel Pipeline
Frames
The difference
How much time do we have?
1s = 1000 ms
1000 ms / 60 ≈ 16 ms
but, browser has houskeeping to do
10ms
How is single frame rendered?
Document Object Model
DOM + CSS = Render Tree
span.first::after {
content: '';
}
Layout (aka Reflow)
<html> <body>
<div>
<p>
<span>
<span:after>
<span>
Vector to raster
Composite
Pipeline flows
Complete
No layout
No layout no paint
CSS Triggers
Forced Synchronous Layout
Example page
Layout thrashing
const paragraphs = document.querySelectorAll('p');
const greenBlock = document.querySelectorAll('block');
for (let p = 0; p < paragraphs.length; p++) {
const blockWidth = greenBlock.offsetWidth;
paragraphs[p].style.width = blockWidth + 'px';
}
The fix
const paragraphs = document.querySelectorAll('p');
const greenBlock = document.querySelectorAll('block');
const blockWidth = greenBlock.offsetWidth;
for (let p = 0; p < paragraphs.length; p++) {
paragraphs[p].style.width = blockWidth + 'px';
}
Q & A
Related resources:
Thank you!
Pixel pipeline
By Patryk Ziemkowski
Pixel pipeline
- 1,154