Come capire correttamente la timeline di devtools?

Question

La mia domanda riguarda Chrome DevTools, in particolare ho una domanda sulla scheda Timeline. Così come ho letto numerose volte, il mio browser deve avere una velocità di 60 fps per il rendering dei miei pixel. A volte però ha un pesante esecuzione di JS e impedisce il verificarsi di 60fps. Inoltre, se ho alcuni CSS e JS che causano il ricalcolo e la ridipintura dell'albero DOM (albero intero o completo), potrebbero anche essere necessari più di ~ 16 ms per un fotogramma. Qui è l'immagine di una lunga struttura quale dalla nostra app:

Ok, qui posso vedere chiaramente, che due richieste prendono così tanto tempo (192ms + 14ms), che il browser non può dipingere 60fps e non si avvicina nemmeno lì.

Anche se qui è un'altra immagine:

quindi è molto meglio ora. Ora è ~ 42fps. Ma ora non riesco a capire perché ..

Ho un paio di occasioni "aggiornamento livello albero" e "pittura". Alcuni eventi del mouse, ma tutti sono < = 1ms qui.

Ci sono 12 di questi "eventi" durante questo frame. 10 di questi sono ancora meno di 0.30ms, quindi se li sommi tutti saranno sicuramente meno di 16ms (3.57, se conto correttamente), ma Chrome dice che questo frame è 23.9ms.

Perché la cronologia dice che ho una cianfrusaglia qui? Cosa dovrei fare per sbarazzarmene e sapere dove si trova il collo di bottiglia?

Sono un po 'confuso qui, perché mi manca sicuramente qualcosa nell'esaminare la timeline .. Quindi per favore, dammi qualche spiegazione dettagliata o alcuni tutorial dettagliati su come sbarazzarsi di tali "giunche" e come rilevarle . Anche se ho già letto paio di articoli e quasi finito naturalmente Udemy sulle prestazioni, sono ancora confuso ..

Grazie

Answer 1

Ho il sospetto che ci sia codice "nativo" esecuzione in quello spazio aperto che la la cronologia non riporta.

Si potrebbe voler provare a utilizzare la scheda "Profili" negli strumenti di sviluppo per prendere invece un profilo CPU. Questo mostrerà una barra per "(Programma)" che è il codice nativo di Chrome in esecuzione. Potrebbe essere almeno un inizio per capire cosa sta succedendo.

Timeline mostra spazio bianco sul lato destro:

Profiler mostra che (Programma) e una garbage collection "(g ... r)" accadono ci

Se c'è un grosso blocco di "(Programma)" lì, quindi penso che tu possa usare la scheda chrome: // tracing che mostrerà tutto il materiale nativo/interno in corso: