google chrome devtools - page - En la línea de tiempo de las herramientas dev, ¿cuáles son los rectángulos verdes vacíos?

inspector google chrome

Question

En la línea de tiempo de las herramientas de desarrollo de Chrome, ¿cuál es la diferencia entre los rectángulos verdes rellenos (que representan operaciones de pintura) y los rectángulos verdes vacíos (que aparentemente también representan algo sobre las operaciones de pintura ...)?

Answer 1

Pintar es en realidad dos tareas: dibujar llamadas y rasterizar.

• Dibuja llamadas . Esta es una lista de cosas que le gustaría dibujar, y se deriva del CSS aplicado a sus elementos. En última instancia, hay una lista de llamadas de sorteo que no se parecen a las del elemento Canvas: moveTo, lineTo, fillRect (aunque tienen nombres ligeramente diferentes en Skia, el backend de pintura de Chrome, es un concepto similar).
• Rasterización . El proceso de pasar por esas llamadas de dibujo y completar los píxeles reales en buffers que se pueden cargar en la GPU para la composición.

Entonces, con ese trasfondo, aquí vamos:

• Los bloques verdes sólidos son las llamadas de sorteo que Chrome graba. Estos se realizan en el hilo principal junto con JavaScript, cálculos de estilo y diseño. Estas llamadas de sorteo se agrupan como una estructura de datos y se pasan al hilo del compositor.
• Los bloques verdes vacíos son la rasterización. Estos son manejados por un subproceso de trabajo generado por el compositor.

Esencialmente, entonces, ambos son pintados, solo representan diferentes sub-tareas del trabajo en general. Si tiene problemas de rendimiento (y por el aspecto que tiene, siempre que parezca que está vinculado a la pintura), es posible que deba examinar qué propiedades está cambiando a través de CSS o JavaScript y ver si existe una forma exclusiva de composición. los mismos fines Los activadores de CSS probablemente pueden ayudar aquí.