Kam über eine interesting video zum Debuggen der Renderleistung in Chrome Devtools. In seiner Lektion identifiziert Umar das Ändern einer CSS-Klasse für das html-Tag als Quelle eines Rendering-Engpasses. Devtools zeigt, dass sich die Änderung dieser Klasse potenziell auf die 3.874 Elemente im DOM unter html auswirkt und eine teure recalculate style-Operation auslöst.Beeinflussen mehrere Klassen im HTML-Tag die Renderleistung?
In der Vergangenheit habe ich CSS-Klassen zu meinem html oder body Tag als eine bequeme Möglichkeit hinzugefügt, den Zustand der Seite auf dieser Ebene auszudrücken.
Ihr CMS kann es für den gleichen Zweck tun. Auf einer WordPress-Website sehen Sie beispielsweise eine Reihe von Klassen wie post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover auf dem Tag eines Beitrags body.
Sollten wir diese Praxis vermeiden? Oder wird es sich nur auf die Renderleistung auswirken, wenn die Klassen in CSS-Regeln verwendet werden?
Ich bin mir nicht sicher, was das Problem ist. Das Leistungsproblem wird durch das erforderliche erneute Zeichnen der Seite verursacht. Wenn es also kein Nachmalen gibt, gibt es kein Problem. –
Andere CSS-Methoden wie BEM verwenden dieses Muster, und niemand hat über die Leistung des Stapelns von mehr als 1 Klasse in einer Zeile gesagt. – Nicholas
Dank @MrLister, ich denke, ich bekomme es - also, wenn es keine CSS-Regeln für eine Klasse gibt, und ich die Klasse auf dem HTML-Tag ändern, wird der Browser nicht versuchen, alle Stile neu zu berechnen. Ich nehme an, der wichtige Punkt aus Umars Video ist, dass dies teuer sein kann, wenn * CSS-Regeln von einer Klasse auf einem Tag an der Spitze des DOM betroffen sind. –