Che cosa fa sì che Chrome Timeline Frame abbia così tanto spazio bianco vuoto

Question

A volte, quando controllo Ispezionare elementi in Google Chrome, trovo che ho alcuni fotogrammi grandi, ma sono pieni di spazio bianco. Qualcuno sa cosa provoca spesso una tale quantità di spazio vuoto? Ho visto i timer causare problemi con l'estensione della lunghezza dei frame, ma nell'esempio qui sotto non sono sicuro perché un frame sarebbe così grande.

amerebbe un certo aiuto al minimo questi

Answer 1

Questo è documentato here, vedere la 'trasparente o grigio chiaro sui frame' sezione. Le 'cornici chiare' in questione sono descritte qui come

Tempo di inattività tra i cicli di aggiornamento del display.

Secondo this video, la barra chiara indica il browser in attesa di una CPU o una GPU. Non c'è nulla che lo sviluppatore possa fare per risolvere questo problema quando si lavora su un sito web "standard".

Answer 2

ho trovato alcune relazioni interessanti e spero che farà risparmiare tempo per qualcuno (ho speso molto tempo prima di capire tutte questo)

1. cosa più importante - devtools cromati costano un sacco. MOLTO significa MOLTO, anche se non dice nulla al riguardo. Ad esempio:
2. "Screenshot" nel monitor delle prestazioni aumenta frametime da 16 ms a 66 ms nel mio caso e lo riempie solo con lo spazio vuoto nella timeline - without screenshots e with screenshots. (Ora vedo lunghe operazioni su GPU con schermate, ma non ci sono informazioni su cosa esattamente ha fatto l'operazione particolare)
3. Le cose con strumenti di "rendering" come "paint flashing" o "fps meter" aumentano enormemente il tempo delle operazioni di pittura. Assicurati di aver disattivato tutto questo prima di analizzare le prestazioni!
4. Le cose molto strane si verificano con il segmento "altro" (colore grigio sulla timeline). Supponiamo che gli sviluppatori si costi da solo, ma a volte può essere casualmente intorno allo zero con molti calcoli o essere al minimo al 100% inattivo. Il mio consiglio: c'è un nuovo strumento "Performance Monitor" in nuove versioni di Chrome (non semplici "prestazioni"). È meglio accenderlo e tenere d'occhio la timeline "Utilizzo CPU". Se vedi un comportamento inaspettato della curva grigia, ricarica la pagina o tutto il cromo - potrebbe farti risparmiare molto tempo.
5. Alcune estensioni possono causare effetti casuali sulla timeline. È meglio disabilitarlo anche tu.
6. In realtà qualsiasi cosa in strumenti o estensioni può rovinare la tua misurazione. Alterna tutto questo prima di avviare la ricerca le questioni in voi codice, dom, o stili