¡Hola!

Máxima Paint Performance

fantas-min;

Es invisible

10 cuadros por segundo

Ese gato no se mueve... son imágenes individuales

25 cuadros por segundo

Entiendo el movimiento

60 cuadros por segundo

la rehostia!

.box {
    animation: movebox 1s;
}

@keyframes movebox {
    from { left: 0 }
    to   { left: 100px }
}

60 Cuadros = 1 Segundo

1 Cuadro = 16 milisegundos

¿Cómo pinta el navegador mi código?

Demo

(Pupil Spectacles)

JS

Style

Layout

Paint

Composite

1 Cuadro

16ms x cuadro

upss

Partir el JS en varios cuadros

requestAnimationFrame(()=>{

// run in each frame

});

el.addEventListener('click', () => {
  // la rehostia de cosas
});

16ms x cuadro

el.addEventListener('click', () => {
  // la rehostia de cosas
});

el.addEventListener('click', () => {

  requestAnimationFrame(() => {
    // la rehostia de cosas
  });

});

16ms x cuadro

click event

my fn

16ms x cuadro

click event

my fn

el.addEventListener('click', () => {

  requestAnimationFrame(() => {
    // la rehostia de cosas
  });

});

el.addEventListener('click', () => {

  requestAnimationFrame(() => {
    requestAnimationFrame(fnRipple);
    requestAnimationFrame(fnExample);
    requestAnimationFrame(fnAnalytics);
  });

});

Prioriza lo que quieras ejecutar

Evento Click

Responde inmediatamente a la acción

Siguientes Cuadros

Tus movidas

Hilo de Ejecución Principal

Main Thread

.show {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}

element.classList.add('show');

// block the main thread for 3s just for fun
const t = performance.now();
while (performance.now() - t < 3000);

Hilo de Ejecución Principal

Main Thread

JS

Todo código JS se ejecuta en un hilo

¿Puedo abrir más hilos?

Sí, con WebWorkers

JS

CPU

GPU

JS

Main

GPU

JS

CPU

Es preciso, pero sólo puede hacer una cosa a la vez

JS

CPU

element.top = 
    window.scrollY + node.height;

JS

GPU

Especialista en pintar

JS

GPU

transform: 
    translateY(calc(100vh - 100%));

JS

zoom x 100

La GPU crea una capa de renderizado

Cómo habilitar la vista de capas

1. chrome://flags

2. Experimentos para desarrolladores

Demo

(Extraterrestre)

Cómo habilitar la vista de capas

1. chrome://flags

2. Experimentos para desarrolladores

3. Settings » Experiments

4. Layers Panel

JS

100px

100px

3 colores + alpha

100 x 100 x 4 = 40000 bytes

40KB

JS

40KB

4 bytes

.box {
  width: 1px;
  height: 1px;
  transform: scale(100, 100);
  will-change: transform;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.1);
  will-change: transform;
  width: 10vw;
  height: 10vh;
  transform: scale(10);
  transform-origin: left top;
}

En una resolución 1433 x 738 nos ahorramos...

4MB de memoria

JS

Style

1 Cuadro

Style

Calcula y relaciona los estilos del CSS con lo que debe pintar en pantalla

Style

<body>

<p>

<a>

<h1>

<span>

.newclass

<a>

JS

Style

Layout

1 Cuadro

Layout

Reflow

Layout

Cálculos geométricos

CPU

Por las dudas, calculo todo de nuevo

Layout

contain: layout;

Layout

CSS Containment Demo

Codepen

JS

Style

Layout

Paint

1 Cuadro

Paint

Calculo las zonas que se han modificado

Paint

CPU

GPU

JS

Style

Layout

Paint

Composite

1 Cuadro

Compositing

2d

Compositing

Demo

(GPU Layers)

Compositing

Ciertas propiedades promueven un elemento a nueva capa

Compositing

3D transforms: translate3d, scale, rotate, etc;
<video>, <canvas> and <iframe> elements;
animation of transform and opacity;
position: fixed;
will-change;
filter;

Compositing

left: 100px

transform:
  translateX(100px)

Use translateZ for everything!!!

~~Use translateZ for everything!!!~~

Compositing

Imaginaros que...

Animo con left
no se ha promovido a una nueva capa

La GPU promocionará a una nueva capa

Composición Implícita! agg

Compositing

Evitar la composición implícita

Un elemento está quieto.

No hay capas de composición.

hostia, que se mueve

Compositing

Evitar la composición implícita

La animación ha terminado.

Poner todo en su lugar.

ha terminao!

~~Use translateZ for everything!!!~~

will-change

CSS es declarativo: El navegador intentará optimizarlo antes de que se ejecute

JS es imperativo