Will it change?

Mit der CSS-Eigenschaft „will-change“ kann der Entwickler dem Browser mitteilen, ob und wie sich ein Element in Zukunft verändern wird. Dadurch kann sich der Browser bereits im Vorfeld darauf einstellen und die Berechnung der Darstellung optimieren.

Heartbeat ONE CSS Tuning Will it Change

Im Fall unseres Systems zur Dokumentation medizinischer Eingriffe, heartbeat ONE, ist dies gerade bei der Patientendarstellung ein riesiger Vorteil, da diese Ansicht eine sehr lange und komplexe Liste von Elementen sein kann. Schattenwürfe und Rundungen, die für den Benutzer eine große Hilfe sind, um die Hierarchie von Elementen intuitiv wahrnehmen zu können, sind für den Browser eine große Herrausforderung. Diese wurden bisher bei jedem Scrollen vollständig neu berechnet, was zu einem teilweise nicht ganz flüssigem Scroll-Erlebnis führen konnte. Mit „will-change“ können wir dies ändern.

In unserem Fall teilen wir dem Browser mit, dass sich die Position der Elemente in Zukunft ändern wird.

#content-region { will-change: transform; }

Bei der Anwendung der Eigenschaft „will-change“ sollte man allerdings aufpassen und zum Beispiel nicht generell alles als „wird sich in Zukunft ändern“ markieren. Dadurch wird der Browser davon abgehalten, das zu optimieren was er eigentlich hätte optimieren sollen: https://drafts.csswg.org/css-will-change/#dont-global

Auf den Seiten des Mozilla Developer Network können die Einzelheiten der „will-change“-Eigenschaft nachgelesen werden: https://developer.mozilla.org/en/docs/Web/CSS/will-change

Dies generell zu definieren ist in der Regel nicht ratsam. Man sollte  „will-change“  nur dann einsetzen, wenn es wirklich zu einer Änderung kommen wird. In unserem Fall ist dies nur während des Scrollvorgangs.

Ein direkter Vergleich macht den Vorteil der Optimierung klar.

Ladezeiten ohne Will-Change Optimierung
Vor der Optimierung
Ladezeiten mit Will-Change Optimierung
Nach der Optimierung durch die „will-change“ Eigenschaft

Jeder Balken steht für die Rechenzeit die ein Zeichenvorgang benötigt. Vor der Optimierung benötigt ein Bild etwas mehr als 1/60 Sekunde bevor es dargestellt wird. 1/60 Sekunde wird in der Web-Entwicklung als maximale Dauer angenommen, bei der der Betrachter das Bild als flüssig und nicht stockend wahrnimmt.

Durch die Optimierung liegen wir weit unter der kritischen Dauer. Das Scrollen wirkt nun noch flüssiger – gerade bei langsameren Rechnern.

will-change“ wird zwar noch als Draft im W3C Standards geführt, ist aber mittlerweile ab Chrome Version 43 und Firefox Version 40 vorhanden: http://caniuse.com/#search=will-change

Grund genug, dass wir dies nun in die nächste Version von heartbeat ONE implementieren.