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 January 2020.
Die will-change CSS Eigenschaft gibt Browsern einen Hinweis darauf, wie sich ein Element voraussichtlich ändern wird. Browser können Optimierungen vorbereiten, bevor ein Element tatsächlich geändert wird. Solche Optimierungen können die Reaktionsfähigkeit einer Seite erhöhen, indem potenziell aufwendige Arbeiten erledigt werden, bevor sie tatsächlich benötigt werden.
Warning:
will-changeist als letztes Mittel gedacht, um bestehende Leistungsprobleme zu beheben. Es sollte nicht verwendet werden, um Leistungsprobleme im Voraus zu erwarten.
Der richtige Einsatz dieser Eigenschaft kann etwas knifflig sein:
- Wenden Sie will-change nicht auf zu viele Elemente an. Der Browser versucht bereits so gut wie möglich, alles zu optimieren. Einige der stärkeren Optimierungen, die wahrscheinlich mit
will-changeverbunden sind, verbrauchen viele Ressourcen eines Rechners, und wenn sie übermäßig eingesetzt werden, können sie dazu führen, dass die Seite langsamer wird oder viele Ressourcen verbraucht. - Verwenden Sie es sparsam. Das normale Verhalten bei Optimierungen, die der Browser vornimmt, besteht darin, die Optimierungen so schnell wie möglich zu entfernen und zum Normalzustand zurückzukehren. Das direkte Hinzufügen von
will-changein ein Stylesheet impliziert, dass die Ziel-Elemente immer kurz davor sind, sich zu ändern, und der Browser behält die Optimierungen viel länger bei, als er es sonst getan hätte. Daher ist es eine gute Praxis,will-changevor und nach dem Eintreten der Änderung über Skriptcode ein- und auszuschalten. - Verwenden Sie will-change nicht zur vorzeitigen Optimierung. Wenn Ihre Seite gut läuft, fügen Sie die
will-changeEigenschaft nicht hinzu, um nur ein wenig mehr Geschwindigkeit herauszuholen.will-changeist als letztes Mittel gedacht, um bestehende Leistungsprobleme zu beheben. Es sollte nicht verwendet werden, um Leistungsprobleme im Voraus zu erwarten. Der übermäßige Einsatz vonwill-changeführt zu übermäßigem Speicherverbrauch und zu einer komplexeren Darstellung, da der Browser versucht, sich auf die mögliche Änderung vorzubereiten. Dies führt zu schlechterer Leistung. - Geben Sie ihm genügend Zeit zu arbeiten. Diese Eigenschaft ist als Methode gedacht, um den Browser über Eigenschaften zu informieren, die sich wahrscheinlich in naher Zukunft ändern werden. Dann kann der Browser alle erforderlichen Vorab-Optimierungen für die Eigenschaftsänderung anwenden, bevor die Eigenschaftsänderung tatsächlich stattfindet. Es ist also wichtig, dem Browser etwas Zeit zu geben, um die Optimierungen tatsächlich durchzuführen. Finden Sie einen Weg, um zumindest etwas vorherzusagen, dass sich etwas ändern wird, und setzen Sie
will-changedann. - Seien Sie sich bewusst, dass will-change das visuelle Erscheinungsbild von Elementen tatsächlich beeinflussen kann, wenn es mit Eigenschaftswerten verwendet wird, die einen Stapeldarstellungskontext erzeugen (z.B. will-change: opacity), da der Stapeldarstellungskontext im Voraus erzeugt 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 bestimmte Absicht aus; der Benutzeragent sollte alle Heuristiken und Optimierungen anwenden, die er normalerweise tut.
Das <animatable-feature> kann einer der folgenden Werte sein:
scroll-position-
Zeigt an, dass der Autor erwartet, die Scroll-Position des Elements in naher Zukunft zu animieren oder zu ändern.
contents-
Zeigt an, dass der Autor erwartet, etwas über den Inhalt des Elements in naher Zukunft zu animieren oder zu ändern.
<custom-ident>-
Zeigt an, dass der Autor erwartet, die Eigenschaft mit dem gegebenen Namen am Element in naher Zukunft zu animieren oder zu ändern. Wenn die angegebene Eigenschaft ein Kurznamen ist, zeigt dies die Erwartung für alle Langformen an, die der Kurznamen erweitert. Es kann nicht einer der folgenden Werte sein:
unset,initial,inherit,will-change,auto,scroll-positionodercontents. Die Spezifikation definiert das Verhalten eines bestimmten Wertes nicht, aber es ist üblich, dasstransformein Hinweis auf eine Kompositionsebene ist. Chrome führt derzeit zwei Aktionen durch, je nach bestimmten CSS-Eigenschaftsidentifikatoren: Eine neue Kompositionsebene oder einen neuen Stapeldarstellungskontext zu etablieren.
Über Stylesheet
Es kann angebracht sein, will-change in Ihrem Stylesheet für eine Anwendung einzuschließen, die Seitendrehungen bei Tastendruck durchführt, wie ein Album oder eine Folienpräsentation, bei der die Seiten groß und komplex sind. Dies ermöglicht dem Browser, den Übergang im Voraus vorzubereiten und bei Tastendruck nahtlose Übergänge zwischen den Seiten zu ermöglichen. Seien Sie jedoch vorsichtig beim direkten Einsatz der will-change Eigenschaft in Stylesheets. Sie kann dazu führen, dass der Browser die Optimierung viel länger im Speicher behält, als benötigt wird.
.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 Skript
Dies ist ein Beispiel, wie man die will-change Eigenschaft über Skripting anwendet, was wahrscheinlich das ist, was Sie in den meisten Fällen tun 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 |