css - trucos - ¿Por qué Chrome no necesita volver a pintar toda la capa en un cambio?

javascript console chrome

Question

Estoy tratando de entender, en la práctica, cómo funciona la distribución → pintura → tubería compuesta de Chrome. Durante mis pruebas, me confundí sobre el comportamiento de Chrome en la siguiente situación. (Codepen)

var button = document.querySelector(''button'');
var red = document.querySelector(''.red'');
var blue = document.querySelector(''.blue'');
button.addEventListener(''click'', function() {
  red.classList.toggle(''test'');
})

.wrapper {
  height: 100%;
  width: 100%;
  background-color: teal;
  position: static;
}

.square {
  height: 200px;
  width: 200px;
  position: static;
  transition: transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;
}

.red {
  /* position: absolute; */
  background-color: red;
  top: 100px;
  left: 100px;
  /* will-change: transform; */
  opacity: 1;
}

.blue {
  background-color: blue;
  z-index: 3;
}

.test {
  /* transform: translate3d(50px, 50px, 0); */
  /* opacity: 0; */
  width: 60px;
  height: 60px;
  /* box-shadow: 0px 0px 0px 10px rgba(0,0,0,.5) */
}

button {
  position: fixed;
  right: 100px;
  top: 50px;
  z-index: 10000;
  font-weight: bold;
  background-color: yellow;
  padding: 5px 10px;
  /* will-change: transform; */
}

<div class="wrapper">
  <div class="red square"></div>
  <div class="blue square"></div>
</div>
<button>Click</button>

Reproducir.

• Utilice Chrome;
• active Resaltar las pinturas , en las herramientas de desarrollo;
• abre el panel Capas ;
• haga clic en el botón amarillo para alternar el tamaño del cuadrado rojo;
• ver qué se resalta como "repintado", así como las capas actuales;
• Intenta hacerlo después de cambiar la position del cuadrado rojo también.

Tenemos dos cuadrados, uno rojo y uno azul, dentro de un elemento de envoltura. En el panel Capas de Chrome, todo esto se muestra como una capa.

• Si ambos cuadrados tienen una posición static , cuando transiciono el ancho y el alto del rojo, puedo ver que toda la capa se vuelve a pintar, lo que, para mí, tiene sentido, ya que, si los 3 elementos están en la misma capa, cambiará Las dimensiones de uno cambian el resultado final de toda la capa, por lo que toda la capa debe ser repintada.

• Si configuro el cuadrado rojo en posición absolute (puede hacerlo al descomentar la línea en las reglas de estilo .red ), cuando cambio su ancho y alto, aunque las herramientas de desarrollo aún muestren una capa, solo el cuadrado rojo, dentro Esa capa, se muestra como repintada.

Pregunta.
El segundo escenario no tiene sentido para mí.

Si los dos cuadrados y el elemento de envoltura están todos en la misma capa, ¿no debería cambiar un elemento que afecte a toda la capa y hacer que la capa en su conjunto vuelva a pintarse, en lugar de solo el cuadrado rojo?

Preguntas adicionales.
¿Chrome, durante la fase de diseño (o la fase que determina las capas) separa algunos elementos en sus propias capas (debido a las propiedades de position , por ejemplo)? ¿Es por eso que es capaz de repintarlos por separado? Después de la fase de composición, ¿los vuelca, por lo que el desarrollador solo ve una capa en las herramientas de desarrollo?

Antecedentes relacionados.
Mi comprensión aproximada del proceso de pintura de los navegadores modernos es la siguiente:

• Durante la fase de diseño, el navegador combina CSS con información HTML para descubrir posiciones y dimensiones de los elementos visuales en la pantalla. También creo que este es el momento en el que determina cuántas capas de renderizado hay (debido a will-change de will-change por ejemplo).
• Durante la fase de pintura, el navegador crea un buffer de marco para cada capa, que contiene información sobre el color que debe mostrar cada píxel, según los datos de diseño.
• Durante la fase de composición, la GPU compone todas las capas juntas, en función de los datos generados durante la fase de pintura, y envía el resultado final a la pantalla.

Answer 1

Por lo tanto, lo confuso aquí fue el hecho de que el flash de pintura de las herramientas de desarrollo, solo destella la parte de la capa que se invalida del cuadro anterior (por lo tanto, si un cuadrado posicionado absolute comienza a reducirse, el área invalidada entre cuadros es una área con las dimensiones y coordenadas que el cuadrado tenía en el cuadro anterior)

Sin embargo, internamente toda la capa se vuelve a pintar, sin importar qué tan grandes o pequeñas sean las partes invalidadas entre los marcos.

Así, por ejemplo, un cursor parpadeante tendrá un aspecto pequeño en Paint Flashing , pero en realidad la capa completa debe volver a pintarse.

De hecho, si abrimos el panel Rendimiento y habilitamos la opción de Instrumentación de pintura avanzada , podemos ver que entre las transiciones cuadradas la capa completa se pinta en los dos escenarios descritos en la pregunta .

Fuentes

https://twitter.com/paul_irish/status/971196975013027840
https://twitter.com/paul_irish/status/971196996924030977
https://twitter.com/paul_irish/status/971197842713800704

Algunas observaciones

Si tuviéramos que minimizar los pasos de Disposición y Pintura para realizar la menor cantidad de operaciones posible, deberíamos separar el cuadrado rojo y el botón amarillo en sus propias capas de representación.

De esta manera, interactuar con el botón y cambiar el tamaño del cuadrado solo afectará a sus respectivas capas y no causará un repintado en la capa de fondo (que incluye el fondo y el cuadrado azul).