Analysieren der Laufzeitleistung

Benutzer erwarten interaktive und reibungslose Seiten. Jede Phase in der Pixelpipeline bietet die Möglichkeit, Jank (Renderingunterbrechungen) einzuführen. Erfahren Sie mehr über Tools und Strategien, um häufige Probleme zu identifizieren und zu beheben, die die Laufzeitleistung verlangsamen.

Zusammenfassung

• Schreiben Sie kein JavaScript, das den Browser zwingt, das Layout neu zu berechnen. Trennen Sie Lese- und Schreibfunktionen, und führen Sie zuerst Lesevorgänge aus.

• Überkomplizieren Sie Ihr CSS nicht. Verwenden Sie weniger CSS, und halten Sie Ihre CSS-Selektoren einfach.

• Vermeiden Sie das Layout so weit wie möglich. Wählen Sie CSS aus, das das Layout überhaupt nicht auslöst.

• Das Malen kann mehr Zeit in Anspruch nehmen als jede andere Renderingaktivität. Achten Sie auf Farbengpässe.

JavaScript

JavaScript-Berechnungen, insbesondere solche, die umfangreiche visuelle Änderungen auslösen, können die Leistung der Anwendung beeinträchtigen. Lassen Sie sich nicht mit zeitgesteuerten oder lang andauernden JavaScript-Einträgen auf Benutzerinteraktionen einwirken.

JavaScript: Tools

Erstellen Sie eine Aufzeichnung im Leistungstool , und suchen Sie nach verdächtig langen Evaluate Script Ereignissen.

Wenn Sie ziemlich viel Jank (Unterbrechungen des Renderings) in Ihrem JavaScript bemerken, müssen Sie Ihre Analyse möglicherweise auf die nächste Ebene bringen und ein JavaScript-CPU-Profil sammeln. CPU-Profile zeigen, wo die Laufzeit innerhalb der Funktionen Ihrer Seite aufgewendet wird. Erfahren Sie, wie Sie CPU-Profile in der JavaScript-Laufzeit beschleunigen.

JavaScript: Probleme

In der folgenden Tabelle werden einige häufige JavaScript-Probleme und mögliche Lösungen beschrieben.

Problem	Beispiel	Lösung
Teure Eingabehandler, die sich auf Die Antwort oder Animation auswirken.	Toucheingabe, Parallax-Bildlauf.	Lassen Sie den Browser Toucheingaben und Bildläufe verarbeiten, oder binden Sie den Listener so spät wie möglich. Sehen Sie sich die Checkliste für die Laufzeitleistung von Paul Lewis mit teuren Eingabehandlern an.
Schlecht zeitiertes JavaScript, das sich auf Antwort, Animation und Laden auswirkt.	Der Benutzer scrollt direkt nach dem Laden der Seite , setTimeout / setInterval.	Optimieren der JavaScript-Laufzeit: Verwenden requestAnimationFrame, Dom-Manipulation über Frames verteilen, Web-Worker verwenden.
Lange ausgeführtes JavaScript, das sich auf die Antwort auswirkt.	Das DOMContentLoaded-Ereignis stagniert , da es mit JS-Arbeit überschwemmt wird.	Verschieben Sie reine Rechenarbeit zu Web Workern. Wenn Sie DOM-Zugriff benötigen, verwenden Sie requestAnimationFrame.
Garbage-y-Skripts, die sich auf Die Antwort oder Animation auswirken.	Die Garbage Collection kann überall stattfinden.	Schreiben Sie weniger Garbage-y-Skripts. Siehe Garbage Collection in Animation in Paul Lewis' Prüfliste zur Laufzeitleistung.

Format

Stiländerungen sind kostspielig, insbesondere, wenn sich diese Änderungen auf mehr als ein Element im DOM auswirken. Jedes Mal, wenn Sie Formatvorlagen auf ein Element anwenden, bestimmt der Browser die Auswirkungen auf alle zugehörigen Elemente, berechnet das Layout neu und aktualisiert.

Formatvorlage: Tools

Nehmen Sie eine Aufzeichnung im Leistungstool auf. Überprüfen Sie die Aufzeichnung auf große Recalculate Style Ereignisse (in Lila dargestellt).

Wählen Sie ein Recalculate Style Ereignis aus, um weitere Informationen dazu im Detailbereich anzuzeigen. Wenn die Stiländerungen sehr lange dauern, ist dies ein Leistungstreffer. Wenn sich die Formatvorlagenberechnungen auf eine große Anzahl von Elementen auswirken, ist dies ein weiterer Bereich mit Verbesserungsbedarf.

So reduzieren Sie die Auswirkungen von Ereignissen Recalculate Style :

• Verwenden Sie die CSS-Trigger , um zu erfahren, welche CSS-Eigenschaften Layout, Farbe und Verbund auslösen. Diese Eigenschaften haben den größten Einfluss auf die Renderingleistung.
• Wechseln Sie zu Eigenschaften, die weniger Auswirkungen haben.

Formatvorlage: Probleme

In der folgenden Tabelle werden einige allgemeine Stilprobleme und mögliche Lösungen beschrieben.

Problem	Beispiel	Lösung
Teure Formatvorlagenberechnungen, die sich auf die Antwort oder Animation auswirken.	Jede CSS-Eigenschaft, die die Geometrie eines Elements ändert, z. B. breite, Höhe oder Position; der Browser überprüft alle anderen Elemente und berechnet das Layout neu.	Vermeiden von CSS, die Layouts auslöst
Komplexe Selektoren, die sich auf die Antwort oder Animation auswirken.	Geschachtelte Selektoren erzwingen, dass der Browser alles über alle anderen Elemente weiß, einschließlich eltern und untergeordneter Elemente.	Verweisen Sie mit nur einer Klasse auf ein Element in Ihrem CSS.

Layout

Layout (oder Reflow in Firefox) ist der Prozess, mit dem der Browser die Positionen und Größen aller Elemente auf einer Seite berechnet. Das Layoutmodell des Webs bedeutet, dass sich ein Element auf andere auswirken kann; Beispielsweise wirkt sich die Breite des Elements in der <body> Regel auf die Breite aller untergeordneten Elemente und so weiter bis nach oben und unten in der Struktur aus. Der Prozess kann für den Browser ziemlich involviert sein.

Als Faustregel gilt: Wenn Sie einen geometrischen Wert aus dem DOM anfordern, bevor ein Frame abgeschlossen ist, werden Sie sich mit "erzwungenen synchronen Layouts" wiederfinden, was ein großer Leistungsengpass sein kann, wenn sie häufig wiederholt oder für eine große DOM-Struktur ausgeführt wird.

Layout: Tools

Der Leistungsbereich identifiziert, wann eine Seite erzwungene synchrone Layouts verursacht. Diese Layout Ereignisse sind mit roten Balken gekennzeichnet.

"Layout thrashing" ist eine Wiederholung erzwungener synchroner Layoutbedingungen. Dies tritt auf, wenn JavaScript das DOM wiederholt schreibt und liest, wodurch der Browser dazu zwingt, das Layout immer wieder neu zu berechnen. Um das Layout-Thrashing zu identifizieren, suchen Sie nach einem Muster mehrerer erzwungener synchroner Layoutwarnungen. Siehe vorherige Abbildung.

Layout: Probleme

In der folgenden Tabelle werden einige allgemeine Layoutprobleme und mögliche Lösungen beschrieben.

Problem	Beispiel	Lösung
Erzwungenes synchrones Layout, das sich auf Die Antwort oder Animation auswirkt.	Erzwingen des Browsers zum Ausführen eines Layouts früher in der Pixelpipeline, was zu wiederholten Schritten im Renderingprozess führt.	Führen Sie zuerst eine Stapelverarbeitung der Formatvorlagenlesungen durch, und führen Sie dann alle Schreibvorgänge aus.
Layout-Thrashing wirkt sich auf Die Antwort oder Animation aus.	Eine Schleife, die den Browser in einen Lese-/Schreib-/Lese-/Schreibzyklus versetzt, wodurch der Browser gezwungen wird, das Layout immer wieder neu zu berechnen.	Automatisches Stapeln von Lese-/Schreibvorgängen mithilfe der FastDom-Bibliothek.

Farbe und Verbund

Paint ist der Prozess des Ausfüllens von Pixeln. Dies ist häufig der kostenintensivste Teil des Renderingprozesses. Wenn Sie bemerkt haben, dass Ihre Seite in keiner Weise wie entworfen funktioniert, ist es wahrscheinlich, dass Sie Farbprobleme haben.

Compositing ist der Ort, an dem die gezeichneten Teile der Seite für die Anzeige auf dem Bildschirm zusammengestellt werden. Wenn Sie sich größtenteils an Nur-Kompositor-Eigenschaften halten und Farbe ganz vermeiden, sollten Sie eine erhebliche Verbesserung der Leistung bemerken, aber Sie müssen auf übermäßige Schichtanzahl achten.

Farbe und Verbund: Tools

Möchten Sie wissen, wie lange die Malerei dauert oder wie oft die Malerei auftritt? Überprüfen Sie die Einstellung "Erweiterte Farbinstrumentation aktivieren " im Bereich "Leistung ", und nehmen Sie dann eine Aufzeichnung vor. Wenn die meiste Renderingzeit mit dem Malen verbracht wird, haben Sie Farbprobleme.

Farbe und Verbund: Probleme

In der folgenden Tabelle werden einige häufige Farb- und Verbundprobleme sowie mögliche Lösungen beschrieben.

Problem	Beispiel	Lösung
Paint storms affecting response or animation.	Große Farbbereiche oder teure Farben, die sich auf Reaktionen oder Animationen auswirken.	Vermeiden Sie Farbe, fördern Sie Elemente, die auf ihre eigene Ebene verschoben werden, verwenden Sie Transformationen und Deckkraft.
Ebenenexplosionen, die sich auf Animationen auswirken.	Überpromotion von zu vielen Elementen mit translateZ(0) erheblichen Auswirkungen auf die Animationsleistung.	Fördern Sie schichtensparend und nur dann, wenn Sie wissen, dass es greifbare Verbesserungen bietet.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) und Meggin Kearney (Technical Writer) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.