Zistite, ako zrýchliť svoje webové stránky úpravou jazyka JavaScript, aby ste odstránili prekážky.
JavaScript je nevyhnutný pre vývoj webu. Jazyk stojí za väčšinou interaktivity a animácií, ktoré uvidíte na webových stránkach. JavaScript však môže tiež spôsobiť spomalenie webovej stránky, ak je kód napísaný zle. Neefektívnosť môže mať za následok zlé časy načítania a pomalú rýchlosť vykresľovania.
Prijmite nasledujúce postupy na zlepšenie rýchlosti a výkonu svojich webových stránok.
1. Definujte premenné lokálne
Ako programátor to musíte vedieť ako funguje určovanie rozsahu. V JavaScripte existujú dva typy premenných: lokálne premenné a globálne premenné.
Lokálne premenné sú premenné deklarované v rámci funkčného bloku. Rozsah zostáva iba v rámci funkcie, v ktorej sú deklarované. Globálne premenné sú premenné dostupné v celom skripte. V prípade globálnych premenných zostáva rozsah v celom programe.
Kedykoľvek sa pokúsite získať prístup k premennej, prehliadač vykoná niečo známe ako vyhľadávanie rozsahu. Skontroluje najbližší rozsah premennej a pokračuje v hľadaní, kým premennú nenájde. Čím viac rozsahu rozsahu máte vo svojom programe, tým dlhšie bude trvať prístup k premenným mimo aktuálny rozsah.
Z tohto dôvodu je najlepšie vždy definovať premenné bližšie ku kontextu vykonávania. Globálne premenné používajte len vo výnimočných prípadoch; napríklad, keď chcete uložiť údaje používané v rámci skriptu. Tým sa zníži počet rozsahov vo vašom programe, čím sa zlepší výkon.
2. Načítať JavaScript asynchrónne
JavaScript je jednovláknový programovací jazyk. To znamená, že akonáhle je funkcia vykonaná, musí bežať až do konca, kým sa môže spustiť iná funkcia. Táto architektúra môže viesť k situáciám, v ktorých kód môže zablokovať vlákno a zmraziť aplikáciu.
Aby vlákno fungovalo dobre, mali by ste asynchrónne spúšťať určité úlohy, ktoré strácajú čas. Keď úloha beží asynchrónne, nezaberá všetok výpočtový výkon vlákna. Namiesto toho sa funkcia pripojí k frontu udalostí, kde sa spustí po vykonaní všetkých ostatných kódov.
Volania API sú ideálne pre asynchrónny vzor, pretože ich vyriešenie si vyžaduje čas. Takže namiesto toho, aby to zdržiavalo vlákno, by ste na asynchrónne načítanie údajov použili knižnicu založenú na sľuboch, ako je napríklad rozhranie API na načítanie. Týmto spôsobom môže bežať iný kód, kým prehliadač získava údaje z API.
Pochopte zložitosť asynchrónneho programovania a zlepšíte výkon svojej aplikácie.
3. Vyhnite sa zbytočným slučkám
Používanie slučiek v JavaScripte môže byť drahé, ak si nedáte pozor. Cyklické prechádzanie zbierkou položiek môže značne zaťažiť prehliadač.
Aj keď sa slučkám v kóde rozhodne nevyhnete, musíte v nich urobiť čo najmenej práce. Môžete použiť iné techniky, ktoré sa vyhnú potrebe prechádzať kolekciou.
Napríklad môžete uložiť dĺžku poľa do inej premennej, namiesto toho, aby ste ju čítali počas každej iterácie cyklu. Ak zo slučky dostanete to, čo chcete, okamžite sa z nej vytrhnite.
4. Minifikujte kód JavaScript
Minifikácia je efektívna metóda na optimalizáciu kódu JavaScript. Minimalizátor transformuje váš nespracovaný zdrojový kód na menší produkčný súbor. Odstraňujú komentáre, orezávajú nepotrebnú syntax a skracujú dlhé názvy premenných. Odstraňujú tiež nepoužívaný kód a optimalizujú existujúce funkcie tak, aby zaberali menej riadkov.
Príkladmi minimalizátorov sú Google Closure Compiler, UglifyJS a Microsoft AJAX miniifier. Svoj kód môžete minimalizovať aj manuálne tak, že ho skontrolujete a budete hľadať spôsoby, ako ho optimalizovať. Napríklad môžete zjednodušte príkazy if vo vašom kóde.
5. Komprimujte veľké súbory pomocou Gzip
Väčšina klientov použite Gzip na kompresiu a dekompresiu veľké súbory JavaScript. Keď prehliadač požaduje zdroj, server ho môže skomprimovať, aby v odpovedi vrátil menší súbor. Keď klient dostane súbor, dekomprimuje ho. Celkovo tento prístup šetrí šírku pásma a znižuje latenciu, čím zlepšuje výkon aplikácií.
6. Minimalizujte prístup DOM
Prístup k DOM môže ovplyvniť výkon vašej aplikácie, pretože prehliadač sa musí aktualizovať pri každej aktualizácii DOM. Najlepšie je obmedziť prístup DOM na najmenšiu možnú frekvenciu. Jedným zo spôsobov, ako to môžete urobiť, je ukladanie odkazov na objekty prehliadača.
Môžete tiež použiť knižnicu, ako je React, ktorá vykoná zmeny vo virtuálnom DOM predtým, ako ich vloží do skutočného DOM. Výsledkom je, že prehliadač aktualizuje časti aplikácie, ktoré je potrebné aktualizovať, namiesto toho, aby obnovoval celú stránku.
7. Odložte zbytočnú záťaž JavaScriptu
Aj keď je dôležité, aby sa vaša stránka načítala včas, nie všetky funkcie musia fungovať pri počiatočnom načítaní. Predpokladajme, že máte klikateľné tlačidlo a ponuku kariet, ktoré odkazujú na kód JavaScript; oboje môžete odložiť až po načítaní stránky.
Táto metóda uvoľňuje výpočtový výkon a umožňuje vám vykresliť potrebné prvky stránky včas. Odkladáte kompiláciu kódu, ktorý môže obsahovať počiatočné zobrazenie stránky. Po dokončení načítania stránky môžete začať načítavať funkcie. Používateľ si tak môže vychutnať rýchle načítanie a začať včas interagovať s prvkami.
Do prvku head môžete zahrnúť aj najmenšie množstvo CSS a JavaScriptu, takže sa načíta okamžite. Sekundárny kód potom môže žiť v samostatných súboroch .css a .js. Táto technika si vyžaduje slušnú znalosť ako funguje DOM.
8. Na načítanie JavaScriptu použite CDN
Používanie siete na doručovanie obsahu pomáha zrýchliť čas načítania stránky, ale nie je to vždy efektívne. Ak si napríklad vyberiete CDN bez miestneho servera v krajine návštevníka, nebude to mať prospech.
Na vyriešenie tohto problému môžete použiť nástroje na porovnanie niekoľkých CDN a rozhodnúť sa, ktoré ponúka najlepší výkon pre váš prípad použitia. Ak chcete zistiť, ktoré CDN je najlepšie pre vašu knižnicu, pozrite si stránku cdnjs webovej stránky.
9. Odstráňte netesnosti pamäte
Úniky pamäte môžu negatívne ovplyvniť výkon aplikácie. K netesnostiam dochádza, keď načítaná stránka zaberá stále viac pamäte.
Príkladom úniku pamäte je situácia, keď sa váš prehliadač po dlhšej práci s aplikáciou začne spomaľovať.
Na zistenie úniku pamäte vo svojej aplikácii môžete použiť nástroje pre vývojárov Chrome. Nástroj zaznamenáva časovú os na karte Výkon. K mnohým únikom pamäte dochádza v dôsledku odstránenia prvkov DOM. Zberač odpadu uvoľní pamäť až vtedy, keď sú všetky premenné odkazujúce na tieto prvky mimo rozsahu.
Nástroje ako Lighthouse, Google PageSpeed Insights a Chrome vám môžu pomôcť odhaliť problémy. Lighthouse kontroluje dostupnosť, výkon a problémy so SEO. Google PageSpeed vám môže pomôcť optimalizovať JavaScript, aby sa zvýšila výkonnosť vašej aplikácie.
Prehliadač Chrome poskytuje funkciu Vývojárske nástroje, ktorú môžete prepínať kliknutím na F12 pri kľúčovom slove. Jeho analýzu výkonu môžete použiť na zapnutie a vypnutie siete a kontrolu spotreby CPU. Kontroluje aj ďalšie metriky, aby odhalil problémy ovplyvňujúce váš web.
Ako webový vývojár budete veľa pracovať vo webovom prehliadači. Väčšina prehliadačov sa dodáva so sadou nástrojov pre vývojárov, ktoré vám pomôžu pri riešení problémov s webovými stránkami. Funkcia Nástroje pre vývojárov prehliadača Google Chrome má mnoho funkcií, ktoré vám pomôžu.
