Behandeln von häufigen Leistungsproblemen
Benutzer erwarten interaktive und reibungslose Seiten. Jede Phase in der Pixelpipeline stellt eine Möglichkeit dar, jank (Renderingunterbrechungen) einzuführen. Erfahren Sie mehr über Tools und Strategien zum Identifizieren und Beheben häufiger Probleme, 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.
Verkomplizieren Sie Ihr CSS nicht zu sehr. 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 Zeichnen kann mehr Zeit in Anspruch nehmen als jede andere Renderingaktivität. Achten Sie auf Lackengpässe.
JavaScript
JavaScript-Berechnungen, insbesondere solche, die umfangreiche visuelle Änderungen auslösen, können die Anwendungsleistung beeinträchtigen. Lassen Sie nicht zu, dass javaScript mit schlechter Zeit oder langer Ausführungszeit Benutzerinteraktionen beeinträchtigt.
JavaScript: Tools
Nehmen Sie eine Aufzeichnung im Leistungstool auf, und suchen Sie nach verdächtig langen Evaluate Script Ereignissen.
Wenn Sie einiges an 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 erfassen. CPU-Profile zeigen an, wo die Laufzeit innerhalb der Funktionen Ihrer Seite verwendet wird. Informationen zum Erstellen von CPU-Profilen finden Sie unter Beschleunigen der JavaScript-Runtime.
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, parallaxes Scrollen. | Lassen Sie den Browser touch- und scrollen, oder binden Sie den Listener so spät wie möglich. Weitere Informationen finden Sie unter Teure Eingabehandler in der Prüfliste für die Laufzeitleistung von Paul Lewis. |
| Nicht rechtzeitiges JavaScript wirkt sich auf Antwort, Animation und Laden aus. | Der Benutzer scrollt direkt nach dem Laden der Seite, setTimeout/setInterval. | Optimieren der JavaScript-Runtime: Verwenden Sie requestAnimationFrame, verteilen Sie die DOM-Manipulation über Frames, verwenden Sie Web Worker. |
| JavaScript mit langer Ausführungsdauer wirkt sich auf die Antwort aus. | Das DOMContentLoaded-Ereignis wird angehalten, da es mit JS-Arbeit überlastet ist. | Verschieben Sie reine Rechenarbeit auf Web-Worker. 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 erfolgen. | Schreiben Sie weniger Garbage-y-Skripts. Weitere Informationen finden Sie unter Garbage Collection in Animation in der Prüfliste für die Laufzeitleistung von Paul Lewis. |
Format
Stiländerungen sind kostspielig, insbesondere wenn sich diese Änderungen auf mehr als ein Element im DOM auswirken. Jedes Mal, wenn Sie Stile auf ein Element anwenden, ermittelt der Browser die Auswirkungen auf alle verwandten Elemente, berechnet das Layout neu und malt neu.
Stil: Tools
Nehmen Sie eine Aufzeichnung im Leistungstool auf. Überprüfen Sie die Aufzeichnung auf große Recalculate Style Ereignisse (violett angezeigt).
Wählen Sie ein Recalculate Style Ereignis aus, um weitere Informationen dazu im Detailbereich anzuzeigen. Wenn die Stiländerungen lange dauern, ist dies ein Leistungstreffer. Wenn sich die Stilberechnungen auf eine große Anzahl von Elementen auswirken, ist dies ein weiterer Bereich mit Verbesserungsbedarf.
Um die Auswirkungen von Recalculate Style Ereignissen zu reduzieren, minimieren Sie die Verwendung von CSS-Eigenschaften, die Layout, Paint und Composite auslösen. Diese Eigenschaften haben die größte Auswirkung auf die Renderingleistung. Weitere Informationen finden Sie unter Beibehalten von Compositor-Only Eigenschaften und Verwalten der Ebenenanzahl.
Stil: Probleme
In der folgenden Tabelle werden einige allgemeine Stilprobleme und mögliche Lösungen beschrieben.
| Problem | Beispiel | Lösung |
|---|---|---|
| Teure Stilberechnungen, die sich auf die Antwort oder Animation auswirken. | Jede CSS-Eigenschaft, die die Geometrie eines Elements ändert, z. B. die Breite, Höhe oder Position; der Browser überprüft alle anderen Elemente und berechnet das Layout neu. | Vermeiden von CSS, das Layouts auslöst |
| Komplexe Selektoren, die sich auf die Reaktion oder Animation auswirken. | Geschachtelte Selektoren erzwingen, dass der Browser alles über alle anderen Elemente weiß, einschließlich der übergeordneten elemente und der untergeordneten Elemente. | Verweisen Sie auf ein Element in Ihrem CSS nur mit einer Klasse. |
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 ein Element andere beeinflussen kann. Beispielsweise wirkt sich die Breite des Elements in der <body> Regel auf die Breite aller untergeordneten Elemente aus, usw. auf den gesamten Weg nach oben und unten in der Struktur. Der Prozess kann für den Browser ziemlich involviert sein.
Als Faustregel gilt: Wenn Sie nach einem geometrischen Wert zurück aus dem DOM fragen, bevor ein Frame abgeschlossen ist, werden Sie sich mit "erzwungenen synchronen Layouts" wiederfinden. Dies kann ein großer Leistungsengpass sein, wenn sie häufig wiederholt oder für eine große DOM-Struktur ausgeführt wird.
Layout: Tools
Der Bereich Leistung gibt an, 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 wiederholt aus dem DOM schreibt und liest, was den Browser zwingt, das Layout immer wieder neu zu berechnen. Um die Layoutverschrurung zu identifizieren, suchen Sie nach einem Muster mehrerer erzwungener synchroner Layoutwarnungen. Weitere Informationen finden Sie in der vorherigen Abbildung.
Layout: Probleme
In der folgenden Tabelle werden einige häufige 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, das Layout früher in der Pixelpipeline auszuführen, was zu wiederholten Schritten im Renderingprozess führt. | Batchverarbeitung der Formatvorlagenlesevorgänge und anschließendes Ausführen von Schreibvorgängen. |
| Layoutthrashing 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. | Automatische Batchlese-/Schreibvorgänge mithilfe der FastDom-Bibliothek. |
Paint und Composite
Paint ist der Prozess des Ausfüllens von Pixeln. Dies ist häufig der kostspieligste Teil des Renderingprozesses. Wenn Sie feststellen, dass Ihre Seite in keiner Weise wie entworfen funktioniert, haben Sie wahrscheinlich Probleme mit der Farbe.
Compositing ist der Ort, an dem die gemalten Teile der Seite zusammengesammelt werden, um sie auf dem Bildschirm anzuzeigen. Wenn Sie sich an die eigenschaften des reinen Kompositors halten und farbe ganz vermeiden, sollten Sie in den meisten Fällen eine erhebliche Verbesserung der Leistung feststellen, aber Sie müssen watch für übermäßige Ebenenanzahl.
Farbe und Zusammengesetzt: Werkzeuge
So finden Sie heraus, wie lange das Malen dauert oder wie oft das Malen erfolgt:
Klicken Sie in DevTools im Leistungstool auf die Schaltfläche Einstellungen erfassen (
und aktivieren Sie dann das Kontrollkästchen Erweiterte Renderinginstrumentation aktivieren .Nehmen Sie eine Aufzeichnung auf.
Wenn die meiste Renderingzeit mit dem Malen verbracht wird, haben Sie Probleme mit dem Malen. Weitere Informationen finden Sie unter Aktivieren der erweiterten Renderinginstrumentation in der Referenz zu Leistungsfeatures.
Farbe und Zusammengesetzt: Probleme
In der folgenden Tabelle werden einige häufige Farb- und Verbundprobleme sowie mögliche Lösungen beschrieben.
| Problem | Beispiel | Lösung |
|---|---|---|
| Zeichnen Sie Stürme, die sich auf die Reaktion oder Animation auswirken. | Große Farbflächen oder teure Farben, die sich auf die Reaktion oder Animation 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. | Eine Überstufung von zu vielen Elementen mit translateZ(0) wirkt sich stark auf die Animationsleistung aus. |
Stufen Sie auf Ebenen nur sparsam her, und nur, wenn Sie wissen, dass sie 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 Basques (Technical Writer, Chrome DevTools & Lighthouse) und Meggin Kearney (Technical Writer) verfasst.
Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.