Der Bereich „Zeitachse“ der Entwicklertools war schon immer der erste Anlaufpunkt auf dem Weg zur Leistungsoptimierung. Diese zentrale Übersicht über die Aktivitäten Ihrer App hilft Ihnen zu analysieren, wo Zeit für Laden, Erstellen von Skripts, Rendern und Painting aufgewendet wird. Vor Kurzem haben wir die Zeitachse mit mehr Instrumentierung ausgestattet, damit du dir einen genaueren Überblick über die Leistung deiner App verschaffen kannst.
Wir haben die folgenden Funktionen hinzugefügt:
- integrierten JavaScript-Profiler (Flame-Diagramm eingeschlossen!)
- Frame Viewer verwenden, um zusammengesetzte Ebenen zu visualisieren.
- paint Profiler, um detaillierte Aufschlüsselungen der Painting-Aktivität des Browsers zu erhalten.
Beachten Sie, dass die Verwendung der in diesem Artikel beschriebenen Paint-Erfassungsoptionen zu einem gewissen Leistungsaufwand führt. Aktivieren Sie sie daher nur, wenn Sie sie benötigen.
Integrierter JavaScript-Profiler
Wenn Sie sich schon einmal im Bereich Profile umgesehen 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 Ihre JavaScript-Verarbeitung im Zeitverlauf visualisieren.
Jetzt können Sie diese detaillierte Aufschlüsselung Ihrer JavaScript-Ausführung im Bereich Zeitachse sehen. Wenn Sie die Erfassungsoption JS Profiler auswählen, werden Ihre JavaScript-Aufrufstacks zusammen mit anderen Browserereignissen in der Zeitachse angezeigt. Wenn Sie diese Funktion zur Zeitachse hinzufügen, können Sie den Workflow zur Fehlerbehebung optimieren. Darüber hinaus können Sie Ihren JavaScript-Code im Kontext betrachten und die Teile Ihres Codes identifizieren, die sich auf die Ladezeit und das Rendern der Seite auswirken.
Neben dem JavaScript-Profiler haben wir auch eine Flame-Diagrammansicht in das Steuerfeld Zeitachse integriert. Sie können sich die Aktivitäten Ihrer App jetzt entweder als klassisches Wasserfalldiagramm oder als Flame-Diagramm ansehen. Mit dem Symbol für das Flame-Diagramm können Sie zwischen diesen beiden Ansichten wechseln.
Frame-Viewer
Die Kunst des Layer-Compositing ist ein weiterer Aspekt des Browsers, der den Entwicklern größtenteils verborgen bleibt. Bei sparsamer und sorgsamer Verwendung können Schichten dazu beitragen, kostspielige Neuanstriche zu vermeiden und die Leistung enorm zu steigern. Oft ist es jedoch nicht offensichtlich, wie der Browser die Inhalte zusammensetzen wird. Mit der neuen Aufnahmeoption Paint der Zeitachse können Sie zusammengesetzte Ebenen in jedem Frame einer Aufnahme visualisieren.
Wenn Sie eine graue Frameleiste über dem Haupt-Thread auswählen, bietet ihr Layers-Bereich ein visuelles Modell der Ebenen, aus denen sich Ihre App zusammensetzt.
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 zum entsprechenden Knoten im Steuerfeld Elemente springen. Diese Funktionen zeigen Ihnen, was in eine Ebene hochgestuft wurde. Wenn Sie eine Ebene auswählen, können Sie auch in der Zeile Kompositing-Gründe sehen, warum sie hochgestuft wurde.
Farbprofiler
Zu guter Letzt haben wir den Farbprofiler hinzugefügt, mit dem Sie Verzögerungen erkennen können, die durch teure Farben verursacht werden. Durch diese Funktion wird die Zeitachse mit weiteren Details zur Arbeit von Chrome bei Paint-Ereignissen angereichert.
Zunächst ist es jetzt einfacher, die visuellen Inhalte für jedes Paint-Ereignis zu identifizieren. Wenn Sie in der Zeitachse ein Ereignis vom Typ „Grüne Farbe“ auswählen, sehen Sie im Bereich Details eine Vorschau der tatsächlich gezeichneten Pixel.
Wenn Sie direkt ins Detail gehen 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. Um diese nativen Befehle mit dem tatsächlichen Inhalt in Ihrer App zu verbinden, können Sie mit der rechten Maustaste auf einen draw*-Aufruf klicken und springen Sie direkt zum entsprechenden Knoten im Bereich Elemente.
Anhand der Mini-Zeitachse oben im Fenster können Sie den Painting-Prozess wiedergeben und einen Eindruck davon erhalten, welche Vorgänge für den Browser teuer sind. Zeichenvorgänge sind wie folgt farbcodiert: pink (Formen), blue (Bitmap), green (Text) und lila (Sonstiges). Die Balkenhöhe gibt die Anrufdauer an. Die Untersuchung hoher Balken kann Ihnen also Aufschluss darüber geben, was an einer bestimmten Farbe teuer war.
Profil und Gewinn!
Bei der Leistungsoptimierung können Browserkenntnisse sehr hilfreich sein. Diese Aktualisierungen der Zeitachse geben Ihnen einen Einblick in die Funktionsweise der Zeitachse und verdeutlichen die Beziehung zwischen Ihrem Code und den Rendering-Prozessen von Chrome. Probiere diese neuen Optionen in der Zeitachse aus und sieh dir an, wie die Chrome-Entwicklertools deinen Workflow für die Jank-Suche verbessern können.