10 JavaScriptových tipů a triků pro optimalizaci výkonu

JavaScript je nezbytný pro vývoj webu. Jazyk stojí za většinou interaktivity a animací, které na webových stránkách uvidíte. JavaScript ale také může způsobit zpomalení webu, pokud je kód špatně napsaný. Neefektivita může mít za následek jak špatnou dobu načítání, tak pomalou rychlost vykreslování.

Přijměte následující postupy ke zlepšení rychlosti a výkonu svého webu.

1. Definujte proměnné lokálně

Jako programátor to musíte vědět jak funguje scoping. V JavaScriptu existují dva typy proměnných: lokální proměnné a globální proměnné.

Lokální proměnné jsou proměnné deklarované v rámci funkčního bloku. Rozsah zůstává pouze ve funkci, ve které jsou deklarovány. Globální proměnné jsou proměnné dostupné v celém skriptu. V případě globálních proměnných zůstává rozsah v celém programu.

Kdykoli se pokusíte o přístup k proměnné, prohlížeč provede něco známého jako vyhledávání rozsahu. Zkontroluje nejbližší obor pro proměnnou a pokračuje ve vyhledávání, dokud proměnnou nenajde. Čím více řetězce rozsahu ve svém programu máte, tím déle bude trvat přístup k proměnným mimo aktuální rozsah.

Z tohoto důvodu je nejlepší vždy definovat své proměnné blíže kontextu provádění. Globální proměnné používejte pouze výjimečně; například když chcete uložit data použitá v celém skriptu. Tím se sníží počet oborů ve vašem programu, čímž se zlepší výkon.

2. Načíst JavaScript asynchronně

JavaScript je jednovláknový programovací jazyk. To znamená, že jakmile se funkce spustí, musí běžet až do konce, než může běžet jiná funkce. Tato architektura může vést k situacím, kdy kód může zablokovat vlákno a zmrazit aplikaci.

Aby vlákno fungovalo dobře, měli byste asynchronně spouštět určité úlohy, které ztrácejí čas. Když úloha běží asynchronně, nezabere veškerý výpočetní výkon vlákna. Místo toho se funkce připojí k frontě událostí, kde se spustí po provedení všech ostatních kódů.

Volání API jsou pro asynchronní vzor perfektní, protože jejich vyřešení zabere čas. Takže místo toho, aby to drželo vlákno, byste k asynchronnímu načítání dat použili knihovnu založenou na slibech, jako je fetch API. Tímto způsobem může běžet jiný kód, zatímco prohlížeč načítá data z API.

Pochopte složitost asynchronního programování a zlepšíte výkon své aplikace.

3. Vyhněte se zbytečným smyčkám

Použití smyček v JavaScriptu může být drahé, pokud si nedáte pozor. Procházení sbírkou položek může prohlížeč značně zatížit.

I když se smyčkám v kódu rozhodně nevyhnete, musíte v nich dělat co nejméně práce. Můžete použít jiné techniky, které se vyhnou nutnosti procházet kolekcí.

Můžete například uložit délku pole do jiné proměnné, než ji číst během každé iterace cyklu. Pokud ze smyčky dostanete to, co chcete, okamžitě se z ní vymante.

4. Minifikujte kód JavaScript

Minifikace je efektivní metoda pro optimalizaci kódu JavaScript. Minimalizátor transformuje váš nezpracovaný zdrojový kód na menší produkční soubor. Odstraňují komentáře, ořezávají zbytečnou syntaxi a zkracují dlouhé názvy proměnných. Odstraňují také nepoužívaný kód a optimalizují stávající funkce tak, aby zabíraly méně řádků.

Příklady minimalizátorů jsou Google Closure Compiler, UglifyJS a Microsoft AJAX miniifier. Svůj kód můžete také ručně minifikovat tak, že jej zkontrolujete a budete hledat způsoby, jak jej optimalizovat. Například můžete zjednodušte příkazy if ve vašem kódu.

5. Komprimujte velké soubory pomocí Gzip

Většina klientů ke kompresi a dekompresi použijte Gzip velké soubory JavaScriptu. Když prohlížeč požaduje zdroj, server jej může komprimovat, aby v odpovědi vrátil menší soubor. Když klient soubor obdrží, dekomprimuje jej. Celkově tento přístup šetří šířku pásma a snižuje latenci, čímž zlepšuje výkon aplikací.

6. Minimalizujte přístup DOM

Přístup k DOM může ovlivnit výkon vaší aplikace, protože prohlížeč se musí aktualizovat při každé aktualizaci DOM. Nejlepší je omezit přístup DOM na co nejmenší frekvenci. Jedním ze způsobů, jak toho dosáhnout, je ukládání odkazů na objekty prohlížeče.

Můžete také použít knihovnu, jako je React, která provede změny ve virtuálním DOM před jejich odesláním do skutečného DOM. V důsledku toho prohlížeč aktualizuje části aplikace, které je třeba aktualizovat, místo aby obnovoval celou stránku.

7. Odložte zbytečné zatížení JavaScriptu

I když je důležité, aby se vaše stránka načítala včas, ne všechny funkce musí fungovat při počátečním načtení. Předpokládejme, že máte klikací tlačítko a nabídku karet, které odkazují na kód JavaScript; obojí můžete odložit až po načtení stránky.

Tato metoda uvolní výpočetní výkon a umožní vám vykreslit potřebné prvky stránky včas. Zdržujete kompilaci kódu, který by mohl obsahovat počáteční zobrazení stránky. Poté, jakmile se stránka načte, můžete začít načítat funkce. Tímto způsobem si uživatel může užít rychlé načítání a začít pracovat s prvky včas.

Do prvku head můžete také zahrnout nejmenší množství CSS a JavaScriptu, takže se načte okamžitě. Sekundární kód pak může žít v samostatných souborech .css a .js. Tato technika vyžaduje slušnou znalost jak DOM funguje.

8. K načtení JavaScriptu použijte CDN

Použití sítě pro doručování obsahu pomáhá urychlit načítání stránky, ale není vždy efektivní. Pokud si například vyberete síť CDN bez místního serveru v zemi návštěvníka, nebude z toho mít prospěch.

Chcete-li tento problém vyřešit, můžete použít nástroje k porovnání několika sítí CDN a rozhodnout, která nabízí nejlepší výkon pro váš případ použití. Chcete-li zjistit, které CDN je pro vaši knihovnu nejlepší, podívejte se na cdnjs webová stránka.

9. Odstraňte úniky paměti

Úniky paměti mohou negativně ovlivnit výkon aplikace. K netěsnostem dochází, když načtená stránka zabírá stále více paměti.

Příkladem úniku paměti je situace, kdy se váš prohlížeč začne zpomalovat po dlouhé relaci práce s aplikací.

K detekci úniků paměti ve vaší aplikaci můžete použít nástroje pro vývojáře Chrome. Nástroj zaznamenává časovou osu na kartě výkonu. K mnoha únikům paměti dochází v důsledku odebrání prvků DOM. Kolektor uvolnění paměti uvolní paměť až poté, co jsou všechny proměnné odkazující na tyto prvky mimo rozsah.

Nástroje jako Lighthouse, Google PageSpeed ​​Insights a Chrome vám mohou pomoci odhalit problémy. Lighthouse kontroluje přístupnost, výkon a problémy se SEO. Google PageSpeed ​​vám může pomoci optimalizovat JavaScript pro zvýšení výkonu vaší aplikace.

Prohlížeč Chrome poskytuje funkci Developer Tools, kterou můžete přepínat kliknutím na F12 u klíčového slova. Pomocí analýzy výkonu můžete síť zapínat a vypínat a kontrolovat spotřebu CPU. Kontroluje také další metriky, aby odhalil problémy ovlivňující váš web.

Jako webový vývojář budete hodně pracovat ve webovém prohlížeči. Většina prohlížečů je dodávána se sadou vývojářských nástrojů, které vám pomohou s řešením problémů s webovými stránkami. Funkce Nástroje pro vývojáře Google Chrome má mnoho funkcí, které vám pomohou.