Nella timeline degli strumenti dev, quali sono i rettangoli verdi vuoti?

Question

Nella cronologia degli strumenti di sviluppo di Chrome, qual è la differenza tra i rettangoli pieni, verdi (che rappresentano le operazioni di pittura) e i rettangoli verdi vuoti (che a quanto pare rappresentano anche qualcosa sulle operazioni di pittura ...)?

Answer 1

pittura è in realtà due compiti: disegnare chiamate e rasterizzazione.

• Estrarre chiamate. Questa è una lista di cose che ti piacerebbe disegnare e deriva dal CSS applicato ai tuoi elementi. In definitiva c'è una lista di chiamate disegnate non dissimili dall'elemento Canvas: moveTo, lineTo, fillRect (sebbene abbiano nomi leggermente diversi in Skia, backend di pittura di Chrome, è un concetto simile.)
• Rasterizzazione. Il processo di passaggio attraverso quelle chiamate di richiamo e la compilazione di pixel effettivi in ​​buffer che possono essere caricati nella GPU per il compositing.

Così, con queste premesse, qui andiamo:

• I solidi blocchi verdi sono chiamate in corso di registrazione da Chrome il sorteggio. Questi sono fatti sul thread principale insieme a JavaScript, calcoli di stile e layout. Queste chiamate di disegno sono raggruppate come una struttura di dati e passate al thread di composizione.
• I blocchi verdi vuoti sono la rasterizzazione. Questi sono gestiti da un thread di lavoro generato dal compositore.

In sostanza, quindi, entrambi sono colori, rappresentano solo diversi sotto-compiti del lavoro complessivo. Se stai riscontrando problemi di prestazioni (e dalla cattura che hai fornito ti sembra di essere vincolato alla vernice), allora potresti dover esaminare quali proprietà stai modificando tramite CSS o JavaScript e vedere se c'è un modo per comporre solo gli stessi fini. CSS Triggers può probabilmente aiutare qui.