Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Benutzer erwarten interaktive und flüssige Seiten. Jede Phase in der Pixel-Pipeline stellt eine Gelegenheit dar, Jank (Unterbrechungen des Renderings) einzuführen. Lernen Sie weitere Tools und Strategien zum Ermitteln und Beheben häufiger Probleme kennen, die die Laufzeitleistung beeinträchtigen.
Zusammenfassung
Schreiben Sie kein JavaScript, das den Browser zwingt, das Layout neu zu berechnen. Trennen Sie Lese- und Schreibfunktionen, und führen Sie Lesevorgänge zuerst durch.
Verkomplizieren Sie Ihr CSS nicht zu sehr. Verwenden Sie weniger CSS und halten Sie Ihre CSS-Selektoren einfach.
Vermeiden Sie Layout so weit wie möglich. Wählen Sie CSS, das das Layout überhaupt nicht auslöst.
Malen kann mehr Zeit in Anspruch nehmen als jede andere Rendering-Aktivität. Achten Sie auf Farbengpässe.
JavaScript
JavaScript-Berechnungen, insbesondere solche, die umfangreiche visuelle Änderungen auslösen, können die Anwendungsleistung beeinträchtigen. Lassen Sie nicht zu, dass zeitlich schlecht abgestimmtes oder lang andauerndes JavaScript die Benutzerinteraktionen beeinträchtigt.
JavaScript: Tools
Erstellen Sie eine Aufzeichnung im Performance-Tool und suchen Sie nach verdächtig langen Evaluate Script Ereignissen.
Wenn Sie in Ihrem JavaScript einige Ruckeln (Unterbrechungen des Renderings) bemerken, müssen Sie Ihre Analyse möglicherweise auf die nächste Ebene heben und ein JavaScript-CPU-Profil erstellen. CPU-Profile zeigen an, wo die Laufzeit innerhalb der Funktionen Ihrer Seite verbracht wird. Erfahren Sie, wie Sie CPU-Profile in Beschleunigen der JavaScript-Laufzeit erstellen (Profilerstellungstyp "Allocation sampling").
JavaScript: Probleme
Im Folgenden werden häufige JavaScript-Probleme und mögliche Lösungen aufgeführt.
| Problem | Beispiel | Lösung |
|---|---|---|
| Teure Eingabehandler, die sich auf die Antwort oder Animation auswirken. | Toucheingabe, Parallax-Scrollen. | Überlassen Sie dem Browser Toucheingaben und Scrollvorgänge, oder binden Sie den Listener so spät wie möglich. Siehe Expensive Input Handlers in The Runtime Performance Checklist von Paul Lewis. |
| Schlecht getimtes JavaScript mit Auswirkungen auf Antwort, Animation und Ladung. | Der Benutzer scrollt nach dem Laden der Seite, setTimeout / setInterval, nach rechts. | JavaScript-Laufzeit optimieren: Verwenden , requestAnimationFrameDOM-Manipulation über Frames verteilen, Webworker verwenden; siehe Verwenden von Webworkern. |
| JavaScript mit langer Ausführungszeit, das die Antwort beeinflusst. | Das DOMContentLoaded-Ereignis bleibt hängen, da es mit JavaScript-Arbeit überflutet ist. | Verlagerung reiner Rechenarbeit auf Web Worker; siehe Verwenden von Webworkern. Wenn Sie DOM-Zugriff benötigen, verwenden Sie requestAnimationFrame. |
| Garbage-y Scripts, die die Reaktion oder Animation beeinflussen. | Die Garbage Collection kann überall stattfinden. | Schreiben Sie weniger müllige Skripts. Siehe Garbage Collection in Animationen in The Runtime Performance Checklist von Paul Lewis. |
Format
Stiländerungen sind kostspielig, insbesondere wenn sie mehr als ein Element im DOM betreffen. Jedes Mal, wenn Sie Formatvorlagen auf ein Element anwenden, ermittelt der Browser die Auswirkungen auf alle zugehörigen Elemente, berechnet das Layout neu und zeichnet neu.
Stil: Tools
Erstellen Sie eine Aufzeichnung im Leistungstool . Überprüfen Sie die Aufzeichnung auf große Recalculate Style Ereignisse (in Lila angezeigt).
Wählen Sie ein Recalculate Style Ereignis aus, um im Detailbereich weitere Informationen dazu anzuzeigen. Wenn die Stiländerungen lange dauern, ist das ein Leistungseinbruch. Wenn sich die Formatvorlagenberechnungen auf eine große Anzahl von Elementen auswirken, ist dies ein weiterer Bereich, in dem Raum für Verbesserungen besteht.
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 den größten Einfluss auf die Rendering-Leistung. Weitere Informationen finden Sie unter Vermeiden von Eigenschaften, die Layout oder Paint auslösen , in Erstellen von Hochleistungs-CSS-Animationen auf web.dev.
Stil: Probleme
In der folgenden Tabelle werden einige gängige Stilprobleme und mögliche Lösungen beschrieben.
| Problem | Beispiel | Lösung |
|---|---|---|
| Teure Stilberechnungen, die sich auf die Reaktion oder Animation auswirken. | Jede CSS-Eigenschaft, die die Geometrie eines Elements ändert, wie z. B. die Breite, Höhe oder Position; Der Browser überprüft alle anderen Elemente und berechnet das Layout neu. | Vermeiden Sie CSS, das Layouts auslöst. |
| Komplexe Selektoren, die sich auf die Reaktion oder Animation auswirken. | Verschachtelte Selektoren zwingen den Browser, alles über alle anderen Elemente zu wissen, einschließlich Eltern und Kinder. | Verweisen Sie mit nur einer Klasse auf ein Element in Ihrem CSS. |
Layout
Layout (oder Umbruch 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 <body> Elements in der Regel auf die Breite aller untergeordneten Elemente und so weiter in der gesamten Struktur nach oben und unten aus. Der Vorgang kann für den Browser ziemlich kompliziert sein.
Als allgemeine Faustregel gilt: Wenn Sie einen geometrischen Wert vom DOM anfordern, bevor ein Frame abgeschlossen ist, werden Sie es mit "erzwungenen synchronen Layouts" zu tun haben, die einen großen Leistungsengpass darstellen können, wenn sie häufig wiederholt oder für einen großen DOM-Baum ausgeführt werden.
Layout: Tools
Im Bereich "Leistung " wird angegeben, wann eine Seite erzwungene synchrone Layouts verursacht. Diese Layout Ereignisse sind mit roten Balken gekennzeichnet.
"Layout-Thrashing" ist eine Wiederholung von erzwungenen synchronen Layoutbedingungen. Dies tritt auf, wenn JavaScript wiederholt aus dem DOM schreibt und daraus liest, wodurch der Browser gezwungen wird, das Layout immer wieder neu zu berechnen. Um Layout-Thrashing zu identifizieren, suchen Sie nach einem Muster mehrerer erzwungener synchroner Layoutwarnungen. Siehe vorherige 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 mit Auswirkungen auf Antwort oder Animation. | Erzwingen des Browsers, das Layout früher in der Pixelpipeline auszuführen, was zu sich wiederholenden Schritten im Renderingprozess führt. | Lesen Sie Ihren Stil zuerst im Batch-Batch, dann schreiben Sie ihn. |
| Layout-Thrashing, das sich auf die Reaktion oder Animation auswirkt. | Eine Schleife, die den Browser in einen Lese-Schreib-Lese-Schreib-Zyklus versetzt und den Browser zwingt, das Layout immer wieder neu zu berechnen. | Automatisches Batch-Lese- und Schreibvorgänge mithilfe der FastDom-Bibliothek. |
Farbe und Verbundwerkstoffe
Zeichnen ist der Prozess des Ausfüllens von Pixeln. Es ist oft der aufwendigste Teil des Renderingprozesses. Wenn Sie bemerkt haben, dass Ihre Seite in keiner Weise wie geplant funktioniert, liegt wahrscheinlich ein Farbproblem vor.
Beim Compositing werden die bemalten Teile der Seite für die Anzeige auf dem Bildschirm zusammengefügt. Wenn du dich an die reinen Compitor-Eigenschaften hältst und Farbe ganz vermeidest, solltest du größtenteils eine deutliche Leistungsverbesserung feststellen, musst aber auf übermäßige Schichtenzahlen achten.
Farbe und Komposition: Werkzeuge
So ermitteln Sie, wie lange das Malen dauert oder wie oft das Malen auftritt:
Klicken Sie in DevTools im Tool "Leistung" auf die Schaltfläche "Einstellungen mitschreiben
"), und aktivieren Sie dann das Kontrollkästchen "Erweiterte Renderinginstrumentation aktivieren".Erstellen einer Aufzeichnung.
Wenn du die meiste Zeit mit dem Rendern verbringst, hast du Lackprobleme. Weitere Informationen finden Sie unter Aktivieren der erweiterten Farbinstrumentierung in der Referenz zu Leistungsfeatures.
Farbe und Verbundwerkstoffe: Probleme
In der folgenden Tabelle werden einige häufig auftretende Probleme mit Farbe und Verbundwerkstoffen sowie mögliche Lösungen beschrieben.
| Problem | Beispiel | Lösung |
|---|---|---|
| Malen von Stürmen, die die Reaktion oder Animation beeinflussen. | Große Farbflächen oder teure Farben, die die Reaktion oder Animation beeinträchtigen. | Vermeiden Sie Farbe, stufen Sie Elemente höher, die auf eine eigene Ebene verschoben werden, verwenden Sie Transformationen und Deckkraft. |
| Ebenenexplosionen, die sich auf Animationen auswirken. | Übermäßiges Heraufstufen von zu vielen Elementen beeinträchtigt die translateZ(0) Animationsleistung erheblich. |
Stufen Sie sparsam auf Ebenen auf, und nur, wenn Sie wissen, dass es spürbare 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 findet sich hier und wurde von Kayce Basques und Meggin Kearney verfasst.
Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.