Will-change
CSS vlastnost will-change dá prohlížeči najevo, že se s elementem bude něco dělat.
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:
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ě.
Komentáře