will-change CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
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. Diese Art von Optimierungen kann die Reaktionsfähigkeit einer Seite erhöhen, indem möglicherweise aufwändige Arbeiten erledigt werden, bevor sie tatsächlich erforderlich sind.
Warnung:
will-change sollte als letztes Mittel eingesetzt werden, um mit bestehenden Leistungsproblemen umzugehen. Es sollte nicht verwendet werden, um Leistungsprobleme vorwegzunehmen.
Der richtige Gebrauch dieser Eigenschaft kann etwas knifflig sein:
- Wenden Sie will-change nicht auf zu viele Elemente an. Der Browser versucht bereits, alles bestmöglich zu optimieren. Einige der stärkeren Optimierungen, die wahrscheinlich mit
will-changeverbunden sind, verbrauchen viele Ressourcen des Rechners und können bei übermäßigem Gebrauch dazu führen, dass die Seite langsamer wird oder viele Ressourcen verbraucht. - Setzen Sie es sparsam ein. Das normale Verhalten der Browser-Optimierungen ist, diese zu entfernen, sobald es möglich ist, und zum normalen Zustand zurückzukehren. Wenn jedoch
will-changedirekt in einem Stylesheet hinzugefügt wird, impliziert dies, dass die Ziel-Elemente kurz vor einer Änderung stehen, und der Browser behält die Optimierungen wesentlich länger bei, als er es sonst tun würde. Es ist daher eine gute Praxis,will-changemithilfe von Skriptcode ein- und auszuschalten, bevor und nachdem die Änderung stattfindet. - Wenden Sie will-change nicht auf Elemente an, um eine voreilige Optimierung durchzuführen. Wenn Ihre Seite gut funktioniert, fügen Sie der
will-change-Eigenschaft keine Elemente hinzu, nur um ein wenig mehr Geschwindigkeit herauszuholen.will-changeist dafür gedacht, als letztes Mittel eingesetzt zu werden, um mit bestehenden Leistungsproblemen umzugehen. Es sollte nicht verwendet werden, um Leistungsprobleme vorwegzunehmen. Übermäßige Nutzung vonwill-changeführt zu einem übermäßigen Speicherverbrauch und verursacht eine komplexere Darstellung, da der Browser versucht, sich auf die mögliche Änderung vorzubereiten. Dies wird zu einer schlechteren Leistung führen. - Geben Sie genügend Zeit, damit es wirken kann. Diese Eigenschaft soll den Benutzeragenten über Eigenschaften informieren, die sich wahrscheinlich im Voraus ändern werden. Dann kann der Browser optionale Optimierungen für die bevorstehende Eigenschaftsänderung anwenden, bevor die Ä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 leicht vorherzusagen, dass sich etwas ändern wird, und setzen Sie dann
will-change. - Beachten Sie, dass will-change tatsächlich das visuelle Erscheinungsbild von Elementen beeinflussen kann, wenn es mit Eigenschaftswerten verwendet wird, die einen stacking context erstellen (z.B. will-change: opacity), da der stacking context 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 Benutzeragent sollte alle normalen Heuristiken und Optimierungen anwenden.
Das <animatable-feature> kann einer der folgenden Werte sein:
scroll-position-
Gibt an, dass der Autor plant, die Scroll-Position des Elements in naher Zukunft zu animieren oder zu ändern.
contents-
Gibt an, dass der Autor plant, etwas an den Inhalten des Elements zu animieren oder zu ändern.
<custom-ident>-
Gibt an, dass der Autor plant, die Eigenschaft mit dem angegebenen Namen auf dem Element in naher Zukunft zu animieren oder zu ändern. Wenn die angegebene Eigenschaft eine Kurzform ist, bedeutet dies die Erwartung, dass alle Langformen, in die die Kurzform expandiert wird, entsprechen. Sie 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 unternimmt derzeit zwei Aktionen, gegeben spezifische CSS-Eigenschaftsbezeichner: Erstellen einer neuen Kompositionsebene oder eines neuen stacking context.
Über Stylesheet
Es kann angemessen sein, will-change in Ihrem Stylesheet für eine Anwendung zu verwenden, die Seitenumblätterungen bei Tastendruck durchführt, wie ein Album oder eine Präsentation mit Folien, bei der die Seiten groß und komplex sind. Dadurch kann der Browser die Übergänge im Voraus vorbereiten und flüssige Übergänge zwischen den Seiten ermöglichen, sobald die Taste gedrückt wird. Aber seien Sie vorsichtig mit der will-change-Eigenschaft direkt in Stylesheets. Es kann dazu führen, dass der Browser die Optimierung viel länger im Speicher behält, als sie 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 dafür, wie Sie die will-change-Eigenschaft durch Skripting anwenden, 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
| Spezifikation |
|---|
| CSS Will Change Module Level 1 # will-change |