CSS will-change Eigenschaft

Die Eigenschaft will-change gibt dem Browser einen Hinweis darauf, wie sich ein Element in naher Zukunft voraussichtlich verändern wird, damit der Browser die notwendigen Optimierungen vorab einrichten kann — anstatt erst dann zu optimieren, wenn die Änderung bereits begonnen hat.

Diese Seite erklärt, was will-change bewirkt, wann (und wann nicht) man sie einsetzen sollte, welche Werte sie akzeptiert, ein ausführbares Beispiel sowie typische Fallen, die zu einem Missbrauch der Eigenschaft führen können.

Warum will-change existiert

Eigenschaften wie transform und opacity sind günstig zu animieren, weil der Browser das Element auf eine eigene Compositing-Ebene (eine separate Fläche, die die GPU bewegen, ausblenden oder skalieren kann, ohne den Rest der Seite neu zu zeichnen) heraufstufen kann. Das Erstellen dieser Ebene kostet jedoch Zeit und Speicher. Wenn der Browser erst in dem Moment, in dem eine Animation startet, feststellt, dass er eine Ebene benötigt, kann der erste Frame ruckeln.

will-change ermöglicht es, dem Browser im Voraus mitzuteilen, welche Eigenschaften sich gleich ändern werden, damit er die Ebene vorbereiten und die Animation vom allerersten Frame an flüssig halten kann.

Die Werte werden durch Kommata getrennt. Die Eigenschaft will-change akzeptiert folgende Werte: auto, ein <custom-ident> wie ein Eigenschaftsname (transform, opacity, scroll-position, …), initial, inherit oder unset.

Warnung

Diese Eigenschaft sollte mit Bedacht eingesetzt werden. Verschiedene Browser behandeln sie unterschiedlich, und übermäßiger Einsatz kann dazu führen, dass der Browser sie ignoriert. Außerdem kann eine übermäßige Nutzung unnötige Compositing-Ebenen erzwingen, was den Speicherbedarf erhöht und die Performance verschlechtert.

Richtiger Einsatz der will-change Eigenschaft

Nicht auf zu viele Elemente anwenden. Jeder will-change-Hinweis kann den Browser dazu veranlassen, eine Compositing-Ebene aktiv zu halten, was Speicher verbraucht. Werden Hunderte von Elementen mit Hinweisen versehen, kann die Seite langsamer statt schneller werden.
Per Skript hinzufügen und entfernen, rund um die Änderung. will-change kurz vor der Änderung setzen (zum Beispiel bei mouseenter oder focus) und nach Abschluss der Animation wieder entfernen, damit der Browser die Ebene freigeben kann.
Nicht als vorzeitige Optimierung einsetzen. Wenn eine Seite bereits flüssig animiert, sollte man sie in Ruhe lassen. will-change sollte nur zur Behebung eines gemessenen Performance-Problems eingesetzt werden — es ist ein letztes Mittel, keine Standardlösung.
Dem Browser Zeit zur Vorbereitung geben. Der Sinn von will-change besteht darin, den Browser im Voraus zu warnen. Das Setzen im selben Frame, in dem die Animation startet, verfehlt den Zweck.
Beachten, dass es das Rendering beeinflussen kann. Werte, die einen Stapelkontext erzeugen (wie will-change: opacity oder will-change: transform), können die Schichtung des Elements gegenüber seinen Geschwisterelementen verändern — genauso wie das tatsächliche Setzen dieser Eigenschaften.

Anfangswert	auto
Anwendbar auf	Alle Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Transitions Module Level 1
DOM-Syntax	`object.style.willChange = "transform";`

Hinweis: In JavaScript wird der Eigenschaftsname in camelCase geschrieben (willChange), während die CSS-Eigenschaft Bindestriche verwendet (will-change).

Syntax

CSS will-change Werte

will-change: auto | <custom-ident> | initial | inherit | unset;

Beispiel der will-change Eigenschaft:

CSS will-change Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Probier es selbst »

will-change per Skript setzen und entfernen

Das empfohlene Muster besteht darin, den Hinweis kurz vor einer Interaktion hinzuzufügen und danach wieder zu entfernen, sodass der Browser die Ebene nur dann vorhält, wenn sie benötigt wird:

.card {
  transition: transform 0.3s;
}
/* Hint the browser only while the user hovers. */
.card:hover {
  will-change: transform;
  transform: scale(1.05);
}

Bei länger laufenden oder JavaScript-gesteuerten Animationen kann man es im Code umschalten:

const el = document.querySelector(".card");
// Prepare ahead of the change.
el.addEventListener("mouseenter", () => {
  el.style.willChange = "transform";
});
// Release the optimization once it's no longer needed.
el.addEventListener("animationend", () => {
  el.style.willChange = "auto";
});

Werte

Wert	Beschreibung
auto	Es wird die standardmäßige Browser-Optimierung angewendet.
`<custom-ident>`	Gibt die CSS-Eigenschaft an, die sich am Element in naher Zukunft voraussichtlich ändern oder animieren wird. Handelt es sich um eine Kurzschreibweise, werden die Änderungen auf alle zugehörigen Langform-Eigenschaften ausgeweitet.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.
unset	Setzt die Eigenschaft auf ihren vererbten oder anfänglichen Wert zurück, abhängig von der Eigenschaft.

Übung

Die CSS-Eigenschaft will-change kann folgende Werte haben, außer: