Will-change

CSS vlastnost will-change dá prohlížeči najevo, že se s elementem bude něco dělat.

2. dubna 2015

5 minut

Pro rychlé překreslování stránky se snaží stránku prohlížeče optimalisovat.

Výsledná stránka, co vidí člověk v prohlížeči, je kompilace z několika vrstev. Pokud na stránce probíhají nějaké animace se změnou umístění nebo velikosti, posun elementu v rámci téže vrstvy naruší její velkou část, která se musí následně složitě překreslovat.

V takovém případě je výhodnější, aby přesouvaný element byl v separátní vrstvě. Více o vykreslování stránky je v následujícím článku:

Jak funguje vykreslování stránky

Prohlížeče se snaží tento postup na rozdělení do vrstev inteligentně odhadovat. Proto bývá výhodnější používat CSS transformace než například posicování.

Použít will-change je potom dobré, aby prohlížeč věděl, že se bude element animovat a předem se na to připravit. Z pohledu plynulosti je lepší, když se animace spustí později (po přípravě, která zabere nějaký čas), ale bude plynulá, než když by se trhaně začalo animovat hned.

Zápis

CSS vlastnost will-change může nabývat několika hodnot, které určují, co se to bude měnit.

will-change: auto: Výchozí hodnota, prohlížeč používá své standardní postupy pro optimalisaci.
will-change: scroll-position: Prohlížeč se připraví, že se bude scrollovat. Prohlížeče většinou nevykreslují celou stránku, ale jen viditelnou oblast a nějakou část kolem s ohledem na kompromis mezi rychlostí vykreslování a plynulosti při rolování.
will-change: contents: Očekává se změna obsahu elementu. Prohlížeč tak nemusí cacheovat jeho obsah, protože se změní.
will-change: transform: Očekává se CSS transformace.
will-change: opacity: Prohlížeč se připraví na změnu průhlednosti.
will-change: left, top: Hodí se pro element který sleduje/kopíruje pohyb myši.

Více hodnot lze oddělit čárkami.

Přidávání a odebírání `will-change`

Informace pro prohlížeč, že se bude s elementem manipulovat sice urychlí animaci, na druhou stranu způsobí vyšší nároky na paměť počítače návštěvníka.

Ideální je proto will-change přidávat až těsně před momentem, kdy se má něco dělat. A zároveň tuto vlastnost důsledně odebírat po dokončení animace, kvůli šetření paměti.

Realisace v JavaScriptu může vypadat následovně:

var el = document.querySelector('.element'); 
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint); 
function hintBrowser() {
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

Podpora v prohlížečích

Podporovány jsou prohlížeče kromě Internet Exploreru.

Chrome 36+
Firefox 36+
Opera 24+
Android browser 37+
Chrome for Android 40+
Opera Mobile 24+

Využití

Uvažovat nad použitím will-change je dobré v momentě, kdy se bude zdát, že má stránka problém s výkonem.

Prohlížeče se neustále snaží vykreslování a překreslování optimalisovat bez nutnosti will-change používat. Navíc se stále zlepšuje HW a rychlost prohlížečů, což předpovídá, že will-change bude nutné používat méně a méně.