Qual è lo spazio vuoto nella nuova timeline verticale di Chrome?
Sto eseguendo una semplice animazione di visualizzazione in raphael utilizzando requestAnimationFrame in chrome. Sto notando che tutte le attività di scripting e rendering sono completate, ma vedo ancora ovunque tra 30 e 60 ms di "spazio morto" in cui sembra che il browser sia seduto lì senza fare nulla. Qualche idea in questo?
Sono andato su questa domanda cercando la stessa risposta e come sembra nessuno ha fornito una risposta, ecco cosa ho trovato.
In base allo the Chrome DevTools documentation about the Clear and Light Grey Frame, lo spazio vuoto corrisponde al momento in cui il browser è rimasto inattivo.
Perché è inattivo?
La versione breve è che una struttura cava significa una delle due cose: il tuo thread principale javascript era occupato a fare altre cose che il Dev Team Chrome dimenticato di mostrare in DevTools oppure è stato un collo di bottiglia alla vostra GPU.
Per distinguere, è possibile abilitare "Linea temporale: Mostra attività CPU sul righello" all'interno delle impostazioni di DevTools (si sa, l'ingranaggio nell'angolo in basso a destra).
Vi ritroverete con qualcosa di simile:
vedere i piccoli blocchi di colore grigio scuro sulla riga "Records"? Quelli sono scuri quando il thread di rendering era occupato. Se il thread di rendering è in gran parte inattivo, ad es. nessun blocco oscuro, come nel caso dello screenshot che ho strappato per questo post, è un segnale molto buono che si è vincolati alla GPU.
Se il suo grigio scuro come nella foto che hai fornito è un modo per scoprire di cosa si tratta? – Yamiko
Ecco la spiegazione completa dell'ingegnere di Chrome Nat Duca.
Hai avuto fortuna per capire cosa ha causato lo spazio vuoto? Vedo qualcosa di simile ma le barre delle attività iniziano anche in parte attraverso un fotogramma con spazio vuoto all'inizio. – Stuart