Snížení úniků paměti při práci s animacemi

V poslední době jsem hodně pracoval se Snap.svg a možná jste již viděli článek o SVG animacích.

Poté, co byl článek publikován, jsem si udělal nějaký čas na zkontrolování kódu, který jsem napsal, a zjistil jsem, že jsem vytvořil nějaké úniky paměti. Pokud nesledujete výkon svého webu, normálně byste si neuvědomili, že k tomu dochází. Abych vám ukázal, jak najít úniky paměti, použiji svou animaci Hill Valley, kterou jsem napsal jako příklad.

Chrome „Pořídit snímek haldy“

Chrome má několik skvělých nástrojů, které vám pomohou zjistit, zda zavádíte úniky paměti. Nejjednodušší způsob, jak toho dosáhnout, je použít „Take Heap Snapshot“. Nachází se v Nástrojích pro vývojáře -> Profily. Jednoduše stiskněte tlačítko nahrávání.

První věc, kterou je třeba zkontrolovat, je, zda animace ve smyčce nezpůsobila únik paměti. Chcete-li to provést, pořiďte snímek haldy v řadě intervalů. Jak můžete vidět níže, velikost paměti nevysvětlitelně roste.

Nyní máme tyto snímky; můžeme použít porovnávací nástroj, abychom zjistili, kde je hlavní nárůst paměti. Chcete-li to provést, vyberte poslední snímek a poté v rozevíracím seznamu shrnutí klikněte na „Porovnání“.

Nyní vyberte svůj první snímek z rozbalovací nabídky napravo od filtru třídy.

Jakmile Chrome zjistí, co potřebuje k seřazení tabulky podle #Delta . Nyní uvidíte, odkud tyto úniky pocházejí, začněte nahoře a pokračujte dolů. Upozorňujeme, že ne všechny tyto nové věci budou úniky paměti, někdy je paměť prostě potřeba.

Když jsem kliknul na svou horní #Delta, ze stopy zásobníku vidím, že to způsobila událost dokončení snap.svg a uvolňovací algoritmus mina. To může způsobit mnoho částí kódu, o čemž nyní pojednám.

Algoritmus Mark-and-Sweep

Bohužel díky způsobu, jakým někdy píšeme animace v JavaScriptu, můžeme snadno zavést vzory, které algoritmus Mark-and-Sweep pro sběr odpadu nezachytí.

Algoritmus Mark-and-Sweep jednoduše funguje tak, že se snaží zjistit, zda je objekt nedosažitelný. Pokud zjistí, že objekt je nedostupný, použije na tento objekt garbage collection.

To znamená, že když vytvoříte singleton knihovny animací ve smyčce, ale nikdy nenastavíte toto přiřazení na hodnotu null, garbage collection se na tento objekt nikdy nepoužije. Jako objekt je stále dosažitelný.

Nejjednodušší způsob, jak to překonat, je jednoduše resetovat proměnnou na null, jakmile animace skončí.

Vytváření animací

S použitím animačních knihoven je velmi snadné mít animace v paměti. Většina knihoven má vestavěnou funkci, která se snaží toto překonat, protože jsme vytvořili předchozí tutoriál pomocí Snap.SVG, vysvětlím jeho verzi.

Snap.SVG používá stejnou metodu jako jQuery, což je stop() funkce. Zastaví všechny animace ve frontě a pokračuje s novou animací.

Časovače nikdy nebyly vymazány

Pravděpodobně nejčastější únik paměti nejen v animacích, ale obecně v UI rozhraních po webu. Pokud odkaz na časovač neodstraníte, zůstane jednoduše viset v paměti a nikdy nebude odstraněn sběrem odpadu.

U většiny aplikací to není problém, protože obnovení stránky při přechodu mezi stránkami jej odstraní. Nyní je však web plný jednostránkových aplikací, takže můžete vidět, jak se to rychle stává problémem.

Nejlepší způsob, jak vyčistit časovače, je přidat je do pole a poté, když to považujete za nejlepší, obvykle na začátku nové animace nebo těsně před přechodem stránky js. Vymažte uvedené časovače a resetujte pole.