¡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
CSS Containment Demo
Codepen
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
Introducción CSS Paint Performance
By Eduardo Sada
