10 JavaScript tipp és trükk a teljesítmény optimalizálásához

A JavaScript létfontosságú a webfejlesztéshez. A webhelyeken látható legtöbb interaktivitás és animáció mögött a nyelv áll. A JavaScript azonban a webhely lelassulását is okozhatja, ha a kód rosszul van megírva. A hatékonyság hiánya rossz betöltési időket és lassú renderelési sebességet eredményezhet.

Webhelye sebességének és teljesítményének javítása érdekében kövesse az alábbi gyakorlatokat.

1. Változók helyi meghatározása

Programozóként tudnia kell hogyan működik a hatókör meghatározása. A JavaScriptben kétféle változó létezik: helyi és globális változók.

A lokális változók egy funkcióblokkon belül deklarált változók. A hatókör csak azon a függvényen belül marad, amelyben deklarálva vannak. A globális változók a szkriptben elérhető változók. Globális változók esetén a hatókör az egész programban megmarad.

Amikor megpróbál hozzáférni egy változóhoz, a böngésző végrehajt valamit, amit hatókör-keresésnek nevezünk. Ellenőrzi a változó legközelebbi hatókörét, és folyamatosan keresi, amíg meg nem találja a változót. Így minél több hatóköri lánc van a programban, annál tovább tart a jelenlegi hatókörön túlmutató változókhoz való hozzáférés.

Emiatt a legjobb, ha mindig a végrehajtási környezethez közelebb definiálja a változókat. Csak ritka esetekben használjon globális változókat; ha például a szkriptben használt adatokat szeretne tárolni. Ez csökkenti a programban lévő hatókörök számát, ezáltal javítja a teljesítményt.

2. JavaScript betöltése aszinkron módon

A JavaScript egy egyszálú programozási nyelv. Ez azt jelenti, hogy ha egy függvény végrehajtódik, annak a végéig futnia kell, mielőtt egy másik függvény futhat. Ez az architektúra olyan helyzetekhez vezethet, amikor a kód blokkolhatja a szálat, és leállíthatja az alkalmazást.

Ahhoz, hogy a szál megfelelően működjön, bizonyos időpazarló feladatokat aszinkron módon kell futtatnia. Amikor egy feladat aszinkron módon fut, nem veszi fel a szál teljes feldolgozási teljesítményét. Ehelyett a függvény csatlakozik egy eseménysorhoz, ahol az összes többi kód végrehajtása után elindul.

Az API-hívások tökéletesek az aszinkron mintához, mert időbe telik a megoldásuk. Tehát ahelyett, hogy feltartaná a szálat, egy ígéretalapú könyvtárat, például a fetch API-t használjon az adatok aszinkron lekéréséhez. Így más kódok futhatnak, miközben a böngésző adatokat kér le az API-ból.

Ismerje meg az aszinkron programozás bonyolultságát, és javíthatja alkalmazása teljesítményét.

3. Kerülje a felesleges hurkokat

Cikk használata JavaScriptben drága lehet, ha nem vigyázol. Az elemek gyűjteményének kerékpározása nagy terhelést jelenthet a böngésző számára.

Bár a kódban lévő ciklusokat biztosan nem kerülheti el, a lehető legkevesebb munkát kell végeznie rajtuk. Használhat más technikákat is, amelyek elkerülik a gyűjtemény végigjátszásának szükségességét.

Például tárolhatja egy tömb hosszát egy másik változóban, ahelyett, hogy a ciklus minden iterációja során kiolvassa. Ha egy hurokból megkapod, amit akarsz, azonnal törj ki belőle.

4. A JavaScript kód kicsinyítése

A kicsinyítés hatékony módszer a JavaScript kód optimalizálására. A minimalizáló a nyers forráskódot egy kisebb éles fájllá alakítja át. Eltávolítják a megjegyzéseket, levágják a szükségtelen szintaxist és lerövidítik a hosszú változóneveket. Ezenkívül eltávolítják a nem használt kódot, és optimalizálják a meglévő funkciókat, hogy kevesebb sort foglaljanak el.

Minimalizálók például a Google Closure Compiler, az UglifyJS és a Microsoft AJAX minifier. A kódot manuálisan is kicsinyítheti úgy, hogy megvizsgálja, és keresi az optimalizálási módokat. Például megteheti egyszerűsítse az if utasításokat a kódban.

5. Nagy fájlok tömörítése Gzip segítségével

A legtöbb ügyfél a tömörítéshez és a kibontáshoz használja a Gzip-et nagy JavaScript fájlok. Amikor egy böngésző erőforrást kér, a szerver tömörítheti azt, hogy egy kisebb fájlt adjon vissza a válaszban. Amikor az ügyfél megkapja a fájlt, kicsomagolja azt. Összességében ez a megközelítés sávszélességet takarít meg és csökkenti a késleltetést, javítva az alkalmazások teljesítményét.

6. Minimalizálja a DOM hozzáférést

A DOM elérése hatással lehet az alkalmazás teljesítményére, mivel a böngészőnek minden DOM-frissítéskor frissítenie kell. A legjobb, ha a DOM-hozzáférést a lehető legkisebb frekvenciára korlátozza. Ennek egyik módja a böngészőobjektumokra mutató hivatkozások tárolása.

Használhat olyan könyvtárat is, mint például a React, amely módosítja a virtuális DOM-ot, mielőtt áthelyezné azokat a valódi DOM-ba. Ennek eredményeként a böngésző frissíti az alkalmazás frissítésre szoruló részeit, ahelyett, hogy a teljes oldalt frissítené.

7. A JavaScript szükségtelen betöltésének elhalasztása

Bár elengedhetetlen, hogy az oldal időben betöltődjön, nem kell minden funkciónak működnie a kezdeti betöltéskor. Tegyük fel, hogy van egy kattintható gomb és egy lapmenü, amely JavaScript kódra hivatkozik; mindkettőt elhalaszthatja az oldal betöltése után.

Ez a módszer felszabadítja a feldolgozási teljesítményt, lehetővé téve a szükséges oldalelemek időben történő megjelenítését. Késlelteti az oldal kezdeti megjelenítését tároló kód fordítását. Ezután, ha az oldal betöltődött, megkezdheti a funkciók betöltését. Így a felhasználó élvezheti a gyors betöltési időt, és időben elkezdheti az elemekkel való interakciót.

A fejelemben a legkisebb mennyiségű CSS-t és JavaScriptet is beillesztheti, így azonnal betöltődik. A másodlagos kód ezután külön .css és .js fájlokban élhet. Ez a technika megfelelő ismereteket igényel hogyan működik a DOM.

8. Használjon CDN-t a JavaScript betöltéséhez

A tartalomszolgáltató hálózat használata felgyorsítja az oldalbetöltési időt, de nem mindig hatékony. Például, ha olyan CDN-t választ, amely nem rendelkezik helyi szerverrel egy látogató országában, akkor ez nem fog hasznot húzni.

A probléma megoldásához eszközöket használhat több CDN összehasonlítására, és eldöntheti, hogy melyik nyújtja a legjobb teljesítményt az Ön használati esetéhez. Ha meg szeretné tudni, melyik CDN a legjobb az Ön könyvtárához, tekintse meg a cdnjs weboldal.

9. Távolítsa el a memóriaszivárgást

A memóriaszivárgás negatívan befolyásolhatja az alkalmazás teljesítményét. A szivárgás akkor fordul elő, ha a betöltött oldal egyre több memóriát foglal el.

Memóriaszivárgásra példa az, amikor a böngésző lelassulni kezd az alkalmazással való hosszú munkamenet után.

A Chrome Developer Tools segítségével észlelheti az alkalmazás memóriaszivárgását. Az eszköz rögzíti az idővonalat a teljesítmény lapon. Sok memóriaszivárgás lép fel a DOM-elemek eltávolítása miatt. A szemétgyűjtő csak akkor szabadít fel memóriát, ha az ezekre az elemekre hivatkozó összes változó a hatókörön kívül esik.

Az olyan eszközök, mint a Lighthouse, a Google PageSpeed ​​Insights és a Chrome segíthetnek észlelni a problémákat. A Lighthouse ellenőrzi a kisegítő lehetőségeket, a teljesítményt és a keresőoptimalizálási problémákat. A Google PageSpeed ​​segíthet a JavaScript optimalizálásában, hogy javítsa alkalmazása teljesítményét.

A Chrome böngésző egy Fejlesztői eszközök funkciót biztosít, amelyet a kulcsszónál található F12 billentyűre kattintva válthat. A teljesítményelemzés segítségével be- és kikapcsolhatja a hálózatot, és ellenőrizheti a CPU-fogyasztást. Más mutatókat is ellenőriz, hogy feltárja a webhelyét érintő problémákat.

Webfejlesztőként sokat fog dolgozni a böngészőjében. A legtöbb böngésző fejlesztői eszközökkel rendelkezik, amelyek segítenek a webhelyekkel kapcsolatos problémák elhárításában. A Google Chrome fejlesztői eszközök funkciója számos funkcióval segíti Önt.