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,093