¡Hola!

@aeroalquimia

Eduardo Sada

CSS Paint Performance

fantas-min;

Es invisible

3 imágenes en un segundo
=
3 fps

60 fps

.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

Todo lo demás

Hilo de Ejecución Principal

Main Thread

// 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

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

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 transition: all for everything!!!

Use transition: all 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 transition: all for everything!!!

transition: transform;

will-change: transform;

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!

¡Gracias!

@aeroalquimia

Eduardo Sada

Made with Slides.com