¡Hola!

¡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?

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

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

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

JS

Style

Layout

Paint

1 Cuadro

Paint

Paint

Calculo las zonas que se han modificado

Paint

CPU

GPU

JS

Style

Layout

Paint

Composite

1 Cuadro

Compositing

2d

Compositing

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

JS

Style

Layout

Paint

Composite

1 Cuadro

Optimizar es un trabajo artesanal

¡No hay atajos!

Yo, justificando mi sueldo ante mi jefe

@aeroalquimia

Eduardo Sada

Trabajo en Kairós

web components a tope!

¡Gracias!

@aeroalquimia

Eduardo Sada

Máxima Paint Performance

By Eduardo Sada

Máxima Paint Performance

  • 721

More from Eduardo Sada