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. Diese Art von Optimierungen kann die Reaktionsfähigkeit einer Seite erhöhen, indem potenziell aufwändige Arbeiten im Voraus erledigt werden, bevor sie tatsächlich benötigt werden.

Warnung:>will-change sollte als letztes Mittel verwendet werden, um mit bestehenden Leistungsproblemen umzugehen. Es sollte nicht benutzt werden, um Leistungsprobleme vorherzusehen.

Der ordnungsgemäße Einsatz 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-change verbunden sind, verbrauchen viele Ressourcen eines Geräts und können bei übermäßigem Gebrauch dazu führen, dass die Seite langsamer wird oder viele Ressourcen verbraucht.
  • Sparsam verwenden. Das normale Verhalten für Optimierungen, die der Browser durchführt, besteht darin, die Optimierungen so schnell wie möglich zu entfernen und zum Normalzustand zurückzukehren. Wenn will-change jedoch direkt in einem Stylesheet hinzugefügt wird, impliziert dies, dass die Ziel-Elemente jederzeit kurz vor einer Änderung stehen, und der Browser wird die Optimierungen viel länger aufrechterhalten, als er es sonst getan hätte. Daher ist es eine gute Praxis, will-change vor und nach der Änderung mittels Script-Code ein- und auszuschalten.
  • Verwenden Sie will-change nicht, um vorzeitige Optimierungen durchzuführen. Wenn Ihre Seite gut funktioniert, fügen Sie die Eigenschaft will-change nicht nur hinzu, um ein wenig mehr Geschwindigkeit herauszuholen. will-change ist dazu gedacht, als letztes Mittel eingesetzt zu werden, um mit bestehenden Leistungsproblemen umzugehen. Es sollte nicht benutzt werden, um Leistungsprobleme vorherzusehen. Übermäßiger Gebrauch von will-change führt zu übermäßigem Speicherverbrauch und komplexeren Rendering-Prozessen, da der Browser versucht, sich auf die mögliche Änderung vorzubereiten. Dies führt zu schlechterer Leistung.
  • Geben Sie genügend Zeit, um zu arbeiten. Diese Eigenschaft ist dazu gedacht, dem User-Agent mitzuteilen, welche Eigenschaften voraussichtlich im Voraus geändert werden. Dann kann der Browser vorzeitig erforderliche Optimierungen für die bevorstehende Änderung der Eigenschaft anwenden, bevor die Änderung tatsächlich stattfindet. Daher ist es wichtig, dem Browser etwas Zeit zu geben, um die Optimierungen tatsächlich durchzuführen. Finden Sie eine Möglichkeit, wenigstens etwas 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 erzeugen (z.B. will-change: opacity), da der Stacking-Kontext im Voraus erzeugt wird.

Syntax

css
/* 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 User-Agent sollte die 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, dass die Bildlaufposition des Elements in naher Zukunft animiert oder geändert wird.

contents

Zeigt an, dass der Autor erwartet, dass in naher Zukunft etwas am Inhalt des Elements animiert oder geändert wird.

<custom-ident>

Zeigt 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 eine Kurzform ist, zeigt dies die Erwartung für alle Langformen, in die die Kurzform expandiert, an. Es kann nicht einer der folgenden Werte sein: unset, initial, inherit, will-change, auto, scroll-position oder contents. Die Spezifikation definiert das Verhalten eines bestimmten Wertes nicht, aber es ist üblich, dass transform als Hinweis auf eine Kompositionsebene dient. Chrome führt derzeit zwei Aktionen aus, gegeben bestimmte CSS-Eigenschafts-Identifikatoren: eine neue Kompositionsebene oder einen neuen Stacking-Kontext zu etablieren.

Über Stylesheet

Es kann angemessen sein, will-change in Ihr Stylesheet für eine Anwendung aufzunehmen, die Seitenwechsel bei Tastendruck wie ein Album oder eine Präsentation im Folienformat durchführt, bei denen die Seiten groß und komplex sind. Dies wird dem Browser ermöglichen, die Übergänge im Voraus vorzubereiten und für flüssige Übergänge zwischen den Seiten zu sorgen, sobald die Taste gedrückt wird. Seien Sie jedoch vorsichtig mit der direkten Verwendung der Eigenschaft will-change in Stylesheets. Sie kann dazu führen, dass der Browser die Optimierung viel länger im Speicher behält, als sie benötigt wird.

css
.slide {
  will-change: transform;
}

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

will-change = 
  auto                    |
  <animateable-feature>#  

<animateable-feature> = 
  scroll-position  |
  contents         |
  <custom-ident>

Beispiele

Über Skript

Dies ist ein Beispiel, das zeigt, wie die Eigenschaft will-change durch Skripting angewendet wird, was wahrscheinlich das ist, was Sie in den meisten Fällen tun sollten.

js
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

Siehe auch