Hilfe für Browser-Optimierung mit der CSS Contain-Eigenschaft

Es gibt eine wachsende Zahl von Dingen, die wir tun müssen, um dem Browser zu helfen, Spitzenleistungen zu erzielen.

Die Syntax für responsive Bilder hat mehrere. Zum Beispiel muss man dem Browser mitteilen, wie groß das Bild in unserem Layout sein wird, mit dem sizes-Attribut, und wie groß die Bilder sind, mit w-Deskriptoren.
Reguläre Bilder hatten schon immer präsentationsbezogene Attribute wie width und height, die schon immer einigermaßen nützlich waren und jetzt wirklich nützlich sind.
Die will-change-Eigenschaft in CSS ist manchmal für performantere Animationen erforderlich.
Wenn Sie überhaupt Offline-Fähigkeiten oder exotische Leistungsverbesserungen wünschen, müssen Sie benutzerdefinierten Service-Worker-Code schreiben.

Jetzt haben wir CSS contain, dessen Zweck es ist, dem Browser Informationen über Ihr Layout zu geben, damit dieser Dinge *schneller* tun kann. Sie *müssen* es nicht verwenden, aber es ist eine schöne Verbesserung zur Optimierung.

.item {
  contain: layout;
  contain: paint;
  contain: size;

  contain: content; /* same as `layout paint` */
  contain: strict;  /* same as `layout paint size` */
}

Hier ist Rachel speziell über layout

Mit aktivierter Layout-Containment weiß der Browser, dass nichts außerhalb des Elements das interne Layout beeinflussen kann und nichts aus dem Inneren des Elements das Layout von Dingen außerhalb davon ändern kann. Das bedeutet, dass er in diesem Szenario jegliche mögliche Optimierung vornehmen kann.

Diese Dinge haben reale Auswirkungen, wie z. B. das Auslösen von z-index-Kontexten, das Bereinigen von Floats und das Verbergen von Überläufen, sodass sie definitiv in das Territorium des Typs *"wissen, was Sie tun"* fallen. Rachel hat jedoch Recht, was Designsysteme angeht.

Ich würde vorschlagen, dass dies eine großartige Sache ist, die Sie zu jeder Komponente hinzufügen können, die Sie in einer Komponenten- oder Pattern-Bibliothek erstellen. Wenn Sie auf diese Weise arbeiten, ist es wahrscheinlich, dass jede Komponente als eigenständiges Element konzipiert ist, das keine anderen Elemente auf der Seite beeinflusst, was contain: content zu einer nützlichen Ergänzung macht.

Direkter Link →