Animace CSS vs. JS:Která je rychlejší?

Jak je možné, že animace založená na JavaScriptu byla tajně vždy stejně rychlá – nebo rychlejší – než přechody CSS? A jak je možné, že Adobe a Google důsledně uvolňují mobilní weby bohaté na média, které konkurují výkonu nativních aplikací?

Tento článek slouží jako podrobný návod, jak jsou knihovny animací DOM založené na JavaScriptu, jako je Velocity.js a GSAP, výkonnější než knihovny animací založené na jQuery a CSS.

jQuery

Začněme se základy:JavaScript a jQuery jsou falešně spojeny. Animace JavaScriptu je rychlá. jQuery to zpomaluje. Proč? Protože – přestože je jQuery ohromně výkonný – nikdy nebylo cílem jQuery být výkonným animačním nástrojem:

  • jQuery se nemůže vyhnout problémům s rozvržením kvůli své kódové základně, která slouží mnoha účelům kromě animace.
  • Spotřeba paměti jQuery často spouští shromažďování odpadu, které na okamžik zamrzne animace.
  • jQuery používá setInterval místo requestAnimationFrame (RAF), aby ochránil nováčky před sebou samými.

Všimněte si, že na startu dochází k zadrhávání rozvržení u animací je to, co způsobuje koktání během, sběr odpadu animace a absence RAF je to, co obecně vytváří nízké snímkové frekvence.

Příklady implementace

Vyhýbání se lámání rozvržení spočívá v jednoduchém spojování dotazů DOM a aktualizací DOM:

var currentTop,
	currentLeft;

/* With layout thrashing. */
currentTop = element.style.top; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */

currentLeft = element.style.left; /* QUERY */
element.style.left = currentLeft + 1; /* UPDATE */

/* Without layout thrashing. */
currentTop = element.style.top; /* QUERY */
currentLeft = element.style.left; /* QUERY */

element.style.top = currentTop + 1; /* UPDATE */
element.style.left = currentLeft + 1; /* UPDATE */

Dotazy, které se odehrávají po aktualizaci, nutí prohlížeč přepočítat vypočítaná data stylu stránky (a přitom brát v úvahu účinky nové aktualizace). To vytváří značnou režii pro animace, které běží v malých intervalech pouhých 16 ms.

Podobně implementace RAF nevyžaduje výrazné přepracování vaší stávající kódové základny. Porovnejme základní implementaci RAF s implementací setInterval:

var startingTop = 0;

/* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */
setInterval(function() {
	/* Since this ticks 60 times a second, we divide the top property's increment of 1 unit per 1 second by 60. */
    element.style.top = (startingTop += 1/60);
}, 16);

/* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */
function tick () {
    element.style.top = (startingTop += 1/60);
}

window.requestAnimationFrame(tick);

RAF vytváří největší možné zvýšení výkonu animace, kterého byste mohli dosáhnout jedinou změnou kódu.

Přechody CSS

Přechody CSS překonávají jQuery tím, že přenášejí logiku animace na samotný prohlížeč, což je efektivní při 1) optimalizaci interakce DOM a spotřeby paměti, aby se zabránilo zadrhávání, 2) využití principů RAF pod kapotou a 3) vynucení hardwarové akcelerace (využití výkonu GPU pro zlepšení výkonu animace).

Realita je ale taková, že tyto optimalizace lze provádět i přímo v JavaScriptu. GSAP to dělá už léta. Velocity.js, nový animační engine, nejenže využívá stejné techniky, ale jde také o několik kroků dále – jak brzy prozkoumáme.

Vyrovnat se s tím, že animace v JavaScriptu může konkurovat knihovnám animací CSS, je pouze prvním krokem v našem rehabilitačním programu. Druhým krokem je uvědomit si, že animace JavaScriptu může být ve skutečnosti rychlejší než oni.

Začněme prozkoumáním slabých stránek knihoven animací CSS:

  • Nucená hardwarová akcelerace Transitions zatěžuje GPU, což má za následek zasekávání a pruhování ve vysoce namáhaných situacích. Na mobilních zařízeních jsou tyto efekty umocněny. (Konkrétně je zadrhávání důsledkem režie, ke které dochází při přenosu dat mezi hlavním vláknem prohlížeče a vláknem jeho skladatele. Některé vlastnosti CSS, jako jsou transformace a neprůhlednost, jsou vůči této režii imunní.) Společnost Adobe tento problém rozvádí zde.
  • Přechody nefungují pod Internet Explorer 10, což způsobuje problémy s přístupností webů pro počítače, protože IE8 a IE9 jsou stále velmi oblíbené.
  • Protože přechody nejsou nativně řízeny JavaScriptem (jsou pouze spouštěny pomocí JavaScriptu), prohlížeč neví, jak optimalizovat přechody v synchronizaci s kódem JavaScript, který s nimi manipuluje.

Naopak:Animační knihovny založené na JavaScriptu se mohou samy rozhodnout, kdy povolit hardwarovou akceleraci, přirozeně fungují ve všech verzích IE a dokonale se hodí pro dávkové optimalizace animací.

Moje doporučení je používat nezpracované přechody CSS, když vyvíjíte výhradně pro mobilní zařízení a vaše animace se skládají pouze z jednoduchých změn stavu. Za takových okolností jsou přechody výkonným a nativním řešením, které vám umožní zachovat veškerou logiku animace ve vašich šablonách stylů a vyhnout se zahlcení vaší stránky knihovnami JavaScriptu. Pokud však navrhujete rozkvět složitého uživatelského rozhraní nebo vyvíjíte aplikaci se stavovým uživatelským rozhraním, vždy používejte knihovnu animací, aby vaše animace zůstaly výkonné a váš pracovní postup byl zvládnutelný. Jedna konkrétní knihovna, která odvádí fantastickou práci při správě přechodů CSS, je Veřejná doprava .

JavaScriptová animace

Dobře, takže JavaScript může mít navrch, pokud jde o výkon. Ale přesně jak rychleji může být JavaScript? Dobře – pro začátek – dostatečně rychle na to, abyste vytvořili intenzivní ukázku 3D animace, kterou obvykle vidíte pouze vytvořenou pomocí WebGL. A dostatečně rychle na to, abyste vytvořili multimediální upoutávku, kterou obvykle vidíte pouze vytvořenou pomocí Flash nebo After Effects. A dostatečně rychle na to, abyste vytvořili virtuální svět, který obvykle vidíte postavený pouze na plátně.

Chcete-li přímo porovnat výkon předních animačních knihoven, včetně Transitu (který používá přechody CSS), přejděte na dokumentaci Velocity na VelocityJS.org.

Otázkou zůstává:Jak přesně JavaScript dosahuje své vysoké úrovně výkonu? Níže je uveden krátký seznam optimalizací, které je schopna provádět animace založená na JavaScriptu:

  • Synchronizace zásobníku DOM → doplnění v celém řetězci animací, aby se minimalizovaly problémy s rozvržením.
  • Ukládání hodnot vlastností do mezipaměti napříč zřetězenými voláními, aby se minimalizoval výskyt dotazování DOM (což je Achillova pata výkonné animace DOM).
  • Ukládání převodních poměrů jednotek do mezipaměti (např. px na %, em atd.) napříč sourozeneckými prvky ve stejném volání.
  • Přeskočení aktualizace stylu, pokud by aktualizace byly vizuálně nepostřehnutelné.

Velocity.js využívá tyto osvědčené postupy k opětovnému použití koncových hodnot animace jako počátečních hodnot následné animace, které se vracejí k tomu, co jsme se naučili dříve o rozvržení, a proto využívá tyto osvědčené postupy k ukládání koncových hodnot animace do mezipaměti – čímž se vyhne opětovnému dotazování DOM na počáteční hodnoty prvku:

$element
	/* Slide the element down into view. */
	.velocity({ opacity: 1, top: "50%" })
	/* After a delay of 1000ms, slide the element out of view. */
	.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

Ve výše uvedeném příkladu druhé volání Velocity ví, že by mělo automaticky začít s hodnotou opacity 1 a nejvyšší hodnotou 50 %.

Prohlížeč by nakonec mohl provést mnoho z těchto optimalizací sám, ale to by znamenalo agresivní zúžení způsobů, jakými by vývojář mohl vytvářet animační kód. V souladu s tím, ze stejného důvodu, proč jQuery nepoužívá RAF (viz výše), prohlížeče by nikdy neuplatňovaly optimalizace, které by měly byť jen nepatrnou šanci porušit specifikaci nebo se odchýlit od očekávaného chování.

Nakonec porovnejme dvě knihovny animací JavaScriptu (Velocity.js a GSAP) proti sobě.

  • GSAP je rychlá animační platforma s bohatými funkcemi. Velocity je lehký nástroj pro drastické zlepšení výkonu animace uživatelského rozhraní a pracovního postupu.
  • GSAP vyžaduje licenční poplatek pro různé typy firem. Velocity je volně open-source prostřednictvím ultra-permisivní licence MIT.
  • Pokud jde o výkon, GSAP a Velocity jsou v projektech v reálném světě k nerozeznání.

Moje doporučení je používat GSAP, když požadujete přesnou kontrolu nad načasováním (např. přemapování, pauza/obnovení/vyhledávání), pohybem (např. dráhy Bézierovy křivky) nebo komplexním seskupováním/sekvenováním. Tyto funkce jsou klíčové pro vývoj her a určité specializované aplikace, ale jsou méně běžné v uživatelském rozhraní webových aplikací.

Velocity.js

Odkazování na bohatou sadu funkcí GSAP neznamená, že samotná Velocity je lehká na funkce. Naopak. Velocity po zazipování za pouhých 7 kB nejen replikuje všechny funkce $.animate() jQuery , ale také obsahuje barevné animace, transformace, smyčky, easingy, animace třídy a rolování.

Stručně řečeno, Velocity je to nejlepší z přechodů jQuery, jQuery UI a CSS dohromady.

Dále, z hlediska pohodlí, Velocity používá $.queue() jQuery metoda pod kapotou, a proto bezproblémově spolupracuje s $.animate() jQuery , $.fade() a $.delay() funkcí. A protože syntaxe Velocity je identická s $.animate() 's, žádný kód vaší stránky se nemusí měnit .

Pojďme se rychle podívat na Velocity.js. Na základní úrovni se Velocity chová identicky jako $.animate() :

$element
	.delay(1000)
	/* Use Velocity to animate the element's top property over a duration of 2000ms. */
	.velocity({ top: "50%" }, 2000)
	/* Use a standard jQuery method to fade the element out once Velocity is done animating top. */
	.fadeOut(1000);

Na nejpokročilejší úrovni lze vytvářet složité rolovací scény s 3D animacemi – pouze pomocí dvou jednoduchých řádků kódu:

$element
	/* Scroll the browser to the top of this element over a duration of 1000ms. */
	.velocity("scroll", 1000)
	/* Then rotate the element around its Y axis by 360 degrees. */
	.velocity({ rotateY: "360deg" }, 1000);

Zabalení

Cílem Velocity je zůstat lídrem ve výkonu a pohodlí animace DOM. Tento článek se zaměřil na první z nich. Přejděte na VelocityJS.org, kde se dozvíte více o druhém.

Než skončíme, nezapomeňte, že výkonné uživatelské rozhraní znamená víc než jen výběr správné knihovny animací . Zbytek stránky by měl být také optimalizován. Zjistěte více z těchto fantastických přednášek Google:

  • Jan zdarma
  • Vykreslování bez hrudek
  • Rychlejší webové stránky