Chrome DevTools: icona di avviso triangolare nella visualizzazione Timeline, che cos'è?

Question

Qualcuno sa cosa rappresenta l'icona di avviso triangolare nella vista Timeline di Google Chrome Developer Tools? Quando passo il mouse sopra di esso, fai clic su di esso ecc. Non sono fornite informazioni diverse rispetto a qualsiasi altro evento. L'evento in sé non sembra neanche essere lungo, non riesco a capire cosa mi mette in guardia.

Grazie.

segno

Answer 1

Questo avviso significa che un certo codice (ad esempio element.offsetHeight o document.width) ha innescato un evento layout sincrono, che possono influenzare negativamente le prestazioni in alcuni casi. Dovresti essere in grado di vedere la traccia dello stack associata se espandi la struttura ad albero degli eventi.

Una spiegazione completa di questo triangolo e che cosa significa è nella documentazione DevTools: https://developer.chrome.com/devtools/docs/timeline#locating-forced-synchronous-layouts

Esso comprende una Forced Synchronous Layout demo per capire meglio.