will-change

Die will-change-Eigenschaft in CSS gibt Browsern einen Hinweis darauf, wie sich ein Element voraussichtlich ändern wird. Browser können möglicherweise Optimierungen vornehmen, bevor ein Element tatsächlich geändert wird. Diese Art von Optimierungen kann die Reaktionsfähigkeit einer Seite erhöhen, indem potenziell aufwendige Arbeiten durchgeführt werden, bevor sie tatsächlich erforderlich sind.

Warning: will-change soll nur als letztes Mittel verwendet werden, um bestehende Leistungsprobleme zu bewältigen. 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 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 Einsatz dazu führen, dass die Seite langsamer wird oder viele Ressourcen verbraucht.
• Verwenden Sie es sparsam. Das normale Verhalten von 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-change direkt in einem Stylesheet impliziert, dass die anvisierten Elemente immer kurz davor sind, sich zu ändern, und der Browser wird die Optimierungen viel länger beibehalten, als es sonst der Fall wäre. Es ist also eine gute Praxis, will-change mittels Skriptcode ein- und auszuschalten, bevor und nachdem die Änderung eintritt.
• Wenden Sie will-change nicht an, um vorzeitige Optimierungen durchzuführen. Wenn Ihre Seite gut funktioniert, fügen Sie die will-change-Eigenschaft nicht zu Elementen hinzu, nur um ein wenig mehr Geschwindigkeit herauszuholen. will-change ist als eine Art letzter Ausweg gedacht, um bestehende Leistungsprobleme anzugehen. Es sollte nicht verwendet werden, um Leistungsprobleme vorwegzunehmen. Ein übermäßiger Einsatz von will-change führt zu übermäßigem Speicherverbrauch und sorgt dafür, dass komplexere Renderings durchgeführt werden, während der Browser versucht, sich auf mögliche Änderungen vorzubereiten. Dies führt zu einer schlechteren Leistung.
• Geben Sie ihr genügend Zeit, um zu wirken. Diese Eigenschaft ist als Methode gedacht, damit Autoren dem Benutzeragenten im Voraus mitteilen können, welche Eigenschaften sich wahrscheinlich ändern werden. Dann kann der Browser die nötigen vorzeitigen Optimierungen anwenden, bevor die Eigenschaftsänderung tatsächlich erfolgt. Daher ist es wichtig, dem Browser etwas Zeit zu geben, um die Optimierungen tatsächlich durchzuführen. Finden Sie einen Weg, um wenigstens ein wenig im Voraus zu erkennen, dass sich etwas ändern wird und setzen Sie will-change dann entsprechend.
• Seien Sie sich bewusst, dass will-change das Aussehen von Elementen tatsächlich beeinflussen kann, wenn es mit Eigenschaftswerten verwendet wird, die einen Stacking-Kontext erzeugen (z.B. will-change: opacity), da der Stacking-Kontext im Voraus erstellt wird.

/* 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;

.slide {
  will-change: transform;
}

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

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

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";
}