Das Steuerfeld „Zeitachse“ der Entwicklertools war schon immer die erste Anlaufstelle auf dem Weg zur Leistungsoptimierung. Diese zentrale Übersicht über die Aktivitäten Ihrer App hilft Ihnen zu analysieren, wo Zeit für Laden, Skripterstellung, Rendering und Painting aufgewendet wird. Vor Kurzem haben wir die Zeitachse mit mehr Instrumenten ausgestattet, damit du dir einen detaillierteren Überblick über die Leistung deiner App verschaffen kannst.
Wir haben die folgenden Funktionen hinzugefügt:
- integrierten JavaScript-Profiler (mit Flammendiagramm)
- Frame Viewer können Sie zusammengesetzte Ebenen visualisieren.
- paint Profiler für detaillierte Aufschlüsselungen der Painting-Aktivität im Browser.
Beachten Sie, dass die in diesem Artikel beschriebenen Aufnahmeoptionen von Paint zu Leistungseinbußen führen. Aktivieren Sie sie daher nur, wenn Sie sie verwenden möchten.
Integrierter JavaScript-Profiler
Wenn Sie sich schon mal im Bereich Profile angesehen haben, sind Sie wahrscheinlich mit dem JavaScript CPU-Profiler vertraut. Dieses Tool misst, wo die Ausführungszeit in Ihren JavaScript-Funktionen aufgewendet wird. Durch die Anzeige von JavaScript-Profilen mit dem Flame-Diagramm können Sie die JavaScript-Verarbeitung im Zeitverlauf visualisieren.
Jetzt können Sie diese detaillierte Aufschlüsselung Ihrer JavaScript-Ausführung im Steuerfeld Zeitachse abrufen. Wenn Sie die Erfassungsoption JS Profiler auswählen, können Sie Ihre JavaScript-Aufrufstacks zusammen mit anderen Browserereignissen auf der Zeitachse sehen. Wenn du diese Funktion zur Zeitachse hinzufügst, wird dein Workflow zur Fehlerbehebung optimiert. Darüber hinaus können Sie JavaScript-Code im Kontext betrachten und die Teile des Codes erkennen, die sich auf die Ladezeit und das Rendering der Seite auswirken.
Zusätzlich zum JavaScript-Profiler haben wir in das Steuerfeld Zeitachse auch eine Flame-Diagrammansicht integriert. Sie können sich die Aktivitäten Ihrer App jetzt entweder als klassische Vermittlungsabfolge oder als Flame-Diagramm ansehen. Mit dem Symbol Flame Chart können Sie zwischen diesen beiden Ansichten wechseln.
Frame-Viewer
Die Kunst des Layer-Compositing ist ein weiterer Aspekt des Browsers, der Entwicklern bisher größtenteils verborgen geblieben ist. Bei sorgsamer und sorgsamer Verwendung können Ebenen dazu beitragen, kostspielige Übermalungen zu vermeiden und die Leistung enorm zu steigern. Häufig ist es jedoch nicht offensichtlich, vorherzusagen, wie der Browser den Content zusammensetzt. Mit der neuen Erfassungsoption Paint auf der Zeitachse können Sie zusammengesetzte Ebenen für jeden Frame einer Aufnahme visualisieren.
Wenn Sie über dem Hauptthread eine graue Frameleiste auswählen, wird im Bereich Ebenen ein visuelles Modell der Ebenen Ihrer App angezeigt.
Sie können das Ebenenmodell zoomen, drehen und ziehen, um seinen Inhalt zu erkunden. Wenn Sie den Mauszeiger auf eine Ebene bewegen, wird ihre aktuelle Position auf der Seite angezeigt. Wenn Sie mit der rechten Maustaste auf eine Ebene klicken, können Sie im Steuerfeld Elemente zum entsprechenden Knoten springen. Diese Funktionen zeigen, was zu einer Ebene hochgestuft wurde. Wenn Sie eine Ebene auswählen, können Sie in der Zeile Gründe für die Zusammensetzung auch sehen, warum sie hochgestuft wurde.
Farbprofiler
Zu guter Letzt haben wir den Farbprofiler hinzugefügt, mit dem Sie Verzögerungen durch teure Farben identifizieren können. Durch diese Funktion wird die Zeitachse mit mehr Details zu der Arbeit angereichert, die Chrome bei Paint-Ereignissen ausführt.
Zunächst ist es jetzt einfacher, die visuellen Inhalte zu den einzelnen Farbereignissen zu erkennen. Wenn Sie auf der Zeitachse ein Green Paint-Ereignis auswählen, sehen Sie im Bereich Details eine Vorschau der Pixel, die tatsächlich gerendert wurden.
Wenn Sie wirklich loslegen möchten, wechseln Sie zum Bereich Paint Profiler. Dieser Profiler zeigt Ihnen die genauen Zeichenbefehle, die der Browser für den ausgewählten Paint ausgeführt hat. Damit Sie diese nativen Befehle mit tatsächlichen Inhalten in Ihrer App verbinden können, können Sie mit der rechten Maustaste auf einen draw*-Aufruf klicken und direkt zum entsprechenden Knoten im Bereich Elemente springen.
Anhand der Minizeitachse oben im Fenster können Sie den Painting-Prozess wiedergeben und sich ein Bild davon machen, welche Vorgänge für den Browser teuer sind. Zeichenvorgänge sind wie folgt farblich gekennzeichnet: Pink (Formen), Blau (Bitmap), Grün (Text) und Lila (Sonstiges). Die Balkenhöhe gibt die Anrufdauer an. Die Untersuchung der hohen Balken kann Ihnen also helfen, zu verstehen, was an einer bestimmten Farbe teuer war.
Profil und Gewinn!
Wenn es um die Leistungsoptimierung geht, können Kenntnisse über den Browser unglaublich leistungsstark sein. Mit diesen Updates der Zeitachse könnt ihr einen kleinen Einblick erhalten und die Beziehung zwischen eurem Code und den Rendering-Prozessen von Chrome verdeutlichen. Probieren Sie diese neuen Optionen in der Zeitachse aus und erfahren Sie, wie Sie mit den Chrome-Entwicklertools Ihren Workflow für die Suche nach Verzögerungen verbessern können.