will-change
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die will-change-Eigenschaft von CSS gibt den Browsern einen Hinweis darauf, wie sich ein Element voraussichtlich ändern wird. Browser können Optimierungen durchführen, bevor sich ein Element tatsächlich ändert. Solche Optimierungen können die Reaktionsfähigkeit einer Seite erhöhen, indem sie potenziell aufwendige Operationen im Voraus erledigen.
Warnung:
will-change sollte als letztes Mittel verwendet werden, um mit bestehenden Leistungsproblemen umzugehen. Es sollte nicht verwendet werden, um Leistungsprobleme im Voraus zu antizipieren.
Die ordnungsgemäße Verwendung dieser Eigenschaft kann etwas knifflig sein:
- Wenden Sie will-change nicht auf zu viele Elemente an. Der Browser versucht bereits, alles so gut wie möglich zu optimieren. Einige der stärkeren Optimierungen, die wahrscheinlich mit
will-changeverbunden sind, verbrauchen viele Ressourcen eines Geräts, und bei übermäßigem Gebrauch können sie dazu führen, dass die Seite langsamer wird oder viele Ressourcen verbraucht. - Verwenden Sie es sparsam. Das normale Verhalten für Optimierungen, die der Browser vornimmt, besteht darin, die Optimierungen so schnell wie möglich zu entfernen und zum Normalzustand zurückzukehren. Aber das Hinzufügen von
will-changedirekt in ein Stylesheet impliziert, dass die angezielten Elemente immer kurz davor stehen, sich zu ändern, und der Browser wird die Optimierungen viel länger beibehalten, als er es sonst getan hätte. Es ist daher eine gute Praxis,will-changemit Skriptcode ein- und auszuschalten, bevor und nachdem die Änderung stattfindet. - Verwenden Sie will-change nicht zur Durchführung von vorzeitigen Optimierungen. Wenn Ihre Seite gut läuft, fügen Sie
will-changenicht einfach hinzu, um ein wenig mehr Geschwindigkeit herauszuholen.will-changesollte als ein Mittel der letzten Instanz verwendet werden, um mit bestehenden Leistungsproblemen fertig zu werden. Es sollte nicht dazu benutzt werden, Leistungsprobleme im Voraus zu antizipieren. Übermäßige Verwendung vonwill-changekann zu übermäßigem Speicherverbrauch führen und es wird eine komplexere Darstellung nötig sein, da der Browser versucht, sich auf die mögliche Änderung vorzubereiten. Dies führt zu schlechterer Leistung. - Geben Sie ihm genügend Zeit, um zu wirken. Diese Eigenschaft soll Autoren als Methode dienen, dem User-Agent im Voraus Informationen über Eigenschaften zu geben, die sich wahrscheinlich ändern werden. Der Browser kann dann die erforderlichen Optimierungen vor der tatsächlichen Änderung der Eigenschaft durchführen. Daher ist es wichtig, dem Browser etwas Zeit zu geben, die Optimierungen tatsächlich durchzuführen. Finden Sie einen Weg, um zumindest leicht vorherzusagen, dass sich etwas ändern wird, und setzen Sie dann
will-change. - Seien Sie sich bewusst, dass will-change tatsächlich das visuelle Erscheinungsbild von Elementen beeinflussen kann, wenn es mit Eigenschaftswerten verwendet wird, die einen Stacking-Kontext schaffen (z. B. will-change: opacity), da der Stacking-Kontext im Voraus erstellt wird.
Syntax
/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */
/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;
Werte
auto-
Dieses Schlüsselwort drückt keine besondere Absicht aus; der User-Agent sollte die gewohnten Heuristiken und Optimierungen anwenden.
Das <animatable-feature> kann einen der folgenden Werte haben:
scroll-position-
Gibt an, dass der Autor erwartet, die Scroll-Position des Elements in naher Zukunft zu animieren oder zu ändern.
contents-
Gibt an, dass der Autor erwartet, dass die Inhalte des Elements in naher Zukunft animiert oder geändert werden.
<custom-ident>-
Gibt an, dass der Autor erwartet, dass die Eigenschaft mit dem angegebenen Namen am Element in naher Zukunft animiert oder geändert wird. Wenn die angegebene Eigenschaft ein Shorthand ist, bezieht sich dies auf alle Einzelheiten, die das Shorthand abdeckt. Es kann nicht einer der folgenden Werte sein:
unset,initial,inherit,will-change,auto,scroll-positionodercontents. Die Spezifikation definiert nicht das Verhalten eines bestimmten Wertes, aber üblicherweise wirdtransformals Hinweis auf eine Compositing-Ebene verwendet. Chrome führt derzeit zwei Aktionen aus, wenn bestimmte CSS-Eigenschaftskennungen verwendet werden: eine neue Compositing-Ebene oder einen neuen Stacking-Kontext.
Über ein Stylesheet
Es kann angemessen sein, will-change in Ihr Stylesheet für eine Anwendung einzubinden, die Seitenwechsel bei Tastendruck durchführt, wie z. B. ein Album oder eine Präsentation, bei der die Seiten groß und komplex sind. Dies ermöglicht dem Browser, den Übergang im Voraus vorzubereiten und einen reibungslosen Übergang zwischen den Seiten zu ermöglichen, sobald die Taste gedrückt wird. Aber seien Sie vorsichtig mit der Nutzung der will-change-Eigenschaft direkt in Stylesheets. Es kann dazu führen, dass der Browser die Optimierung länger im Speicher behält, als es notwendig ist.
.slide {
will-change: transform;
}
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
will-change =
auto |
<animateable-feature>#
<animateable-feature> =
scroll-position |
contents |
<custom-ident>
Beispiele
Über ein Skript
Dies ist ein Beispiel, das zeigt, wie die will-change-Eigenschaft durch Skripting angewendet wird, was wahrscheinlich die Methode ist, die Sie in den meisten Fällen anwenden sollten.
const el = document.getElementById("element");
// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);
function hintBrowser() {
// The optimizable properties that are going to change
// in the animation's keyframes block
this.style.willChange = "transform, opacity";
}
function removeHint() {
this.style.willChange = "auto";
}
Spezifikationen
| Specification |
|---|
| CSS Will Change Module Level 1 # will-change |
Browser-Kompatibilität
Loading…