Chrome DevTools Timeline: Neue Diagramme

8

In der aktuellen Chrome-Version (46) enthält die DevTools-Timeline eine Reihe neuer Charts. Die Bedeutung der meisten dieser Charts ist für mich nicht offensichtlich. Leider konnte ich auch keine Dokumentation über sie finden. Kann jemand die Bedeutung dieser Diagramme erklären?

    
BigLuckyMan 16.11.2015, 11:27
quelle

1 Antwort

4

Dies ist die Übersichtsleiste im Chrome DevTools-Schnittfenster.

Von oben nach unten:

  • gelbe / grüne Ticks sind eine Eingabeaktivität, z.B. Maus bewegt / klickt, Taste drücken. Jeder hat seine eigene Farbe. Btw müssen Sie ein Chrome DevTools-Experiment aktivieren, um diese Leiste zu sehen.
  • rote Streifenleiste ist der Seitenansprechbarkeitsindikator. Wenn Sie zu einem bestimmten Zeitpunkt ein bestimmtes Problem haben, werden rote Balken angezeigt. Zu den festgestellten Problemen gehören lange Bilder, übermäßige oder erzwungene Layouts usw.
  • grünes Diagramm ist die aktuelle Bildrate. Je höher desto besser. Max ist 60 Bilder pro Sekunde.
  • nächste Leiste ist die CPU-Auslastung. Die volle Balkenhöhe bedeutet 100% CPU ist beschäftigt. Farben entsprechen der Art der Aktivität: Gelb ist JavaScript, Lila ist Stil rekalc oder Seitenlayout, grün ist Rendering / Malerei, blau ist HTML-Parsing oder Netzwerkinteraktionen blockieren.
  • dünne Streifen unter der CPU sind Netzwerkanfragen, die sich gerade im Flug befinden. Farben zeigen den Inhaltstyp: Blau ist HTML, Grün ist Medien (Bilder, Schriftarten usw.), Lila ist CSS, Gelb ist JavaScript, Grau ist für alle anderen.     
    • alph 02.02.2016, 18:47
    quelle

    Tags und Links

    Django: Verwenden von Annotate, Count und Distinct in einem Queryset Azure-Dienst-Fabric-Akteure - nicht behandelte Ausnahmen?