Detaillierte Einführung in die Chrome-Entwicklertools - Zeitleiste

1. Übersicht

Benutzer erwarten, dass die Webanwendungen, auf die sie zugreifen, interaktiv sind und reibungslos funktionieren. Deshalb sollten Sie als Webentwickler auch hierfür mehr Zeit aufwenden. Die von uns erstellten Seiten sollten nicht nur schnell geladen werden, sondern auch reibungslos laufen: Das Scrollen der Seite sollte schnell auf die Bewegungen des Fingers reagieren und die Animation und interaktiven Effekte sollten reibungslos wie Seide erfolgen.

Wenn Sie leistungsstarke Websites schreiben möchten, müssen Sie vollständig verstehen, wie Browser HTML/JS/CSS verarbeiten, um sicherzustellen, dass der Code effizient ist.

2. Die Notwendigkeit von FPS und Leistungsoptimierung

FPS ist die Bildwiederholrate pro Sekunde. Derzeit beträgt die Bildschirmaktualisierungsrate der meisten Geräte 60 Mal pro Sekunde. Wenn die Seite eine Animation oder einen Farbverlaufseffekt enthält oder der Benutzer über die Seite gleitet, muss der Browser jedes Bild der Animation oder Seite innerhalb von 16 Millisekunden rendern (1 Sekunde / 60 = 16,66 Millisekunden).

1. Seiten-Rendering-Prozess

Tatsächlich muss der Browser beim Rendern eines Frames jedoch zusätzliche Arbeit erledigen (z. B. die Verwaltung der Rendering-Warteschlange, das Wechseln zwischen dem Rendering-Thread und anderen Threads usw.). Daher müssen einfache Rendering-Arbeiten im Allgemeinen innerhalb von 10 Millisekunden abgeschlossen sein, um einen flüssigen visuellen Effekt zu erzielen. Wird dieses Zeitlimit überschritten, bleibt die Darstellung der Seite hängen (gemeinhin als „Jank“ bezeichnet), was eine sehr schlechte Benutzererfahrung darstellt.

Die Umwandlung einer Seite in Pixel auf dem Bildschirm durchläuft im Allgemeinen die folgenden fünf Schritte:

Von links nach rechts handelt es sich dabei um die Zusammenführung der Ebenen JS, Stil, Layout, Zeichnung und Rendering.

a. Zeichnen: Dabei handelt es sich im Wesentlichen um den Vorgang des Füllens von Pixeln. Der erste Schritt besteht darin, eine Reihe von Zeichenaufrufen zu erstellen; der zweite Schritt besteht darin, die Pixel auszufüllen (auch als Rasterung bezeichnet).

b Zusammenführen von Rendering-Ebenen: Der Browser führt alle Ebenen in einer sinnvollen Reihenfolge zu einer Ebene zusammen und zeigt sie dann auf dem Bildschirm an.

3. Methoden zur Leistungsoptimierung und -verbesserung

1. Optimieren Sie die Ausführungseffizienz von JavaScript

1.1 Vermeiden Sie für Animationseffekte die Verwendung von setTimeout oder setInterval. Verwenden Sie stattdessen requestAnimationFrame

/**

Funktion updateScreen(Zeit) {

  // Nehmen Sie hier visuelle Aktualisierungen vor.

}

AnfrageAnimationFrame(Bildschirm aktualisieren);

1.2 Fügen Sie den zeitaufwändigen JavaScript-Code in Web Worker ein

1.3 Teilen Sie die Aktualisierung von DOM-Elementen in mehrere kleine Aufgaben auf und führen Sie sie in mehreren Frames aus

1.4 Verwenden Sie die Timeline und den JavaScript Profiler von Chrome DevTools, um die JavaScript-Leistung zu analysieren

2. Reduzieren Sie den Umfang und die Komplexität von Stilberechnungen

Im schlimmsten Fall ist der Umfang der Stilberechnung = Anzahl der Elemente x Anzahl der Stilselektoren. Denn für jedes Element muss mindestens einmal geprüft werden, ob alle Stile übereinstimmen.

2.1 Reduzieren Sie die Komplexität von Stilselektoren; verwenden Sie klassenbasierte Ansätze wie BEM

2.2 Reduzieren Sie die Anzahl der Elemente, die Stilberechnungen durchführen müssen

2.3 Wählen Sie mit DevTools die Registerkarte Timeline und klicken Sie auf die rote Aufnahmeschaltfläche in der oberen linken Ecke

3. Vermeiden Sie großflächige und komplexe Layouts

Unter Layout versteht man den Vorgang, bei dem der Browser die Geometrie von DOM-Elementen berechnet: ihre Größe und Position innerhalb der Seite. Der Zeitaufwand für das Layout hängt hauptsächlich von der Anzahl der DOM-Elemente ab, die angeordnet werden müssen, und der Komplexität des Layoutprozesses.

3.1 Das Auslösen des Layouts sollte so weit wie möglich vermieden werden: Änderungen an den geometrischen Eigenschaften von DOM-Elementen erfordern ein erneutes Layout

4. Vereinfachen Sie die Komplexität des Zeichnens und reduzieren Sie den Zeichenbereich

5. Verwenden Sie vorrangig die Eigenschaften zum Zusammenführen von Renderebenen und steuern Sie die Anzahl der Ebenen

6. Verarbeitung der Benutzereingabezeit

4. Chrome-Konsolentool

Die Konsole, auch als Entwicklertool bekannt, ist ein Debugging-Tool, das mit dem Browser geliefert wird. Die aktuellen Mainstream-Konsolen sind: Firebug für Firefox, Chrome-Entwicklungstools und Debugging-Tools für Safari.

Öffnen Sie im Chrome-Browser eine beliebige Webseite, drücken Sie F12 oder klicken Sie mit der rechten Maustaste und wählen Sie „Element untersuchen“, um die Konsole zu öffnen. In diesem Artikel wird die 500-Hauptstation als Beispiel verwendet. Klicken Sie auf F12, um die Konsole wie unten gezeigt anzuzeigen:

Insgesamt können acht Tools angezeigt werden: Elemente, Ressourcen, Netzwerk, Quellen, Zeitleiste, Profil, Audit und Konsole. Sie können die Tastenkombinationen Strg + [ und Strg + ] verwenden, um zwischen den Bedienfeldern zu wechseln.

Jedes Chrome-Modul und seine Hauptfunktionen sind:

Element: Wird zum Anzeigen und Bearbeiten von HTML- und CSS-Elementen auf der aktuellen Seite verwendet.

Netzwerk: Wird verwendet, um detaillierte Informationen zu HTTP-Anfragen anzuzeigen, z. B. Anforderungsheader, Antwortheader und zurückgegebene Inhalte.

Quelle: Wird zum Anzeigen und Debuggen der Quelldateien von Skripts verwendet, die von der aktuellen Seite geladen wurden.

Zeitleiste: Wird verwendet, um die Ausführungszeit des Skripts, die Renderzeit der Seitenelemente und andere Informationen anzuzeigen.

Profile: Werden verwendet, um Informationen wie CPU-Ausführungszeit und Speichernutzung anzuzeigen.

Ressource: Wird verwendet, um die von der aktuellen Seite angeforderten Ressourcendateien anzuzeigen, z. B. HTML, CSS-Style-Dateien usw.

Audits: werden verwendet, um Front-End-Seiten zu optimieren, das Laden von Webseiten zu beschleunigen usw.

Konsole: Wird verwendet, um die Ausgabe von Debuginformationen im Skript anzuzeigen oder Testskripte auszuführen usw.

In diesem Artikel geht es hauptsächlich um die Zeitleiste

Zeitleiste

Jede in die Seite geschriebene Ressource hat ihre eigenen Rendering- und Malergebnisse und präsentiert sich daher in unseren Augen als schöne Webseite. Es verbraucht aber auch unsere Ressourcen wie Bandbreite, CPU oder Zeit. Der Zyklus wird bei der Generierung der Ressource festgelegt. Die Hauptphasen des Anforderungsdeklarationszyklus sind in der folgenden Abbildung dargestellt:

Die Timeline kann alle Aktivitäten der Analyseanwendung aufzeichnen und ausführen. Um die Seiteninteraktionen aufzuzeichnen, öffnen Sie das Timeline-Fenster und drücken Sie die Aufnahmetaste ( ), um die Aufzeichnung zu starten, oder geben Sie die Tastenkombination Cmd + E (Mac) oder Strg + E (Windows/Linux) ein. Die Farbe der Aufnahmeschaltfläche ändert sich von Grau zu Rot und Timeline beginnt mit dem Abrufen der Timeline von Ihrer Seite. Nachdem Sie einige Vorgänge in Ihrer App abgeschlossen und einige Daten aufgezeichnet haben, klicken Sie erneut auf die Schaltfläche, um die Aufzeichnung zu beenden.

Bitte beachten Sie: Ihre bestehende Aufnahmesitzung wird gelöscht, damit eine neue Sitzung gestartet werden kann. Erzwingt, dass V8 eine Runde der Garbage Collection durchführt, was beim Debuggen nützlich ist. Die angezeigten Details werden gefiltert, um nur die Datensätze anzuzeigen, deren Fertigstellung länger als 15 ms gedauert hat

Schauen Sie sich zunächst das Hauptverzeichnis der Timeline an:

Der rote Punkt daneben ist der gelöschte Datensatz. Mit den folgenden Optionen können Sie die Elemente auswählen, die erfasst werden müssen. Dies sind Netzwerk, JS-Einführung, Screenshot, Speicher und Beschreibung.

Es gibt zwei Anzeigemodi: Frame-Modus links und Event-Modus rechts. Der Frame-Modus kann tief in die internen Details jeder Frame-Generierung eintauchen. Ereignismuster bieten Einblick in die Priorisierung von Kostenfaktoren, die sich auf die Leistung auswirken.

Die folgende Abbildung zeigt eine Zeitleiste zum Öffnen einer optionalen Webseite:

Die erste Box ist die Übersicht, in der Sie die Leistung der Seite grob erkennen können.

Das zweite Feld ist „Ereignis“, also die Ereignisüberwachung. Hier ist eine Visualisierung des Stapeltraces für die CPU, wobei Grün die Medienzeit, Rot Ladeereignisse und Blau DOM-Ereignisse darstellt.

Das dritte Feld gibt den Speicher an

Das vierte Feld enthält die Details, in denen die ausführlichen Informationen zum Ereignis angezeigt werden.

In diesem Modus werden in der Übersichtsansicht (oben in der Zeitleiste) horizontale Balken angezeigt, die Netzwerk- und HTML-Parsing (blau), JavaScript (gelb), Stilneuberechnung und Layout (lila) sowie Mal- und Compositing-Ereignisse (grün) auf der Seite darstellen. „Repaint“ ist ein Browserereignis, das als Reaktion auf visuelle Änderungen wie die Größenänderung eines Fensters oder das Scrollen aufgerufen wird.

Unterhalb der Zusammenfassungsansicht befindet sich die Detailansicht, die die Details der Datensätze der relevanten Kategorien nach der Aufzeichnung einer Sitzung enthält.

Jeder Datensatz hat links einen beschreibenden Titel und rechts einen Zeitleistenbereich. Wenn Sie mit der Maus über einen Datensatz fahren, werden weitere Informationen angezeigt, beispielsweise die Zeit vom Beginn bis zum Ende der Aufzeichnung.

CPU-Ressourcen. Dieses Flächendiagramm zeigt die vom Ereignistyp verbrauchten CPU-Ressourcen an.

Wenn in der Flame-Tabelle ein Ereignis ausgewählt ist, werden im Detailbereich weitere Informationen zum Ereignis angezeigt, wie in der folgenden Abbildung dargestellt:

Die obige Abbildung zeigt, dass die Ladezeit 0,02 s, die Skriptzeit 15,68 s, die Renderzeit 11,28 s, die Zeichenzeit 46,06 s, die sonstige Zeit 49,06 s und die Leerlaufzeit 1,27 s beträgt.

Das obige Bild ist die Übersichtstabelle. Die folgende Abbildung ist eine detaillierte Übersichtstabelle.

5. Weitere Funktionen

1. Stellen Sie eine Verbindung zum Android-Telefon her, um den Code zu debuggen

Auf dem Telefon und dem Computer muss der Chrome-Browser installiert sein und das Android-Telefon muss über USB mit dem PC verbunden sein.

1.1 Wählen Sie „USB-Debugging zulassen“ in den mobilen Entwicklertools

1.2 Öffnen Sie chrome://inspect/#devices und wählen Sie USB-Debugging zulassen

Die verfügbaren Android-Telefone und die von den Android-Telefonen geöffneten Seiten werden erkannt. Sie können die URL auch selbst eingeben, wie in der folgenden Abbildung gezeigt:

1.3 Klicken Sie im Bild auf „Untersuchen“, um in den Debugstatus der mobilen Seite zu gelangen.

Auf diese Weise können Sie die mobile Seite am Computer bedienen und debuggen.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.