10 JavaScript padomi un triki veiktspējas optimizēšanai

JavaScript ir ļoti svarīgs tīmekļa izstrādei. Valoda ir aiz lielākās daļas interaktivitātes un animācijas, ko redzēsit vietnēs. Taču JavaScript var arī izraisīt vietnes darbības palēnināšanos, ja kods ir slikti uzrakstīts. Neefektivitāte var izraisīt gan sliktu ielādes laiku, gan lēnu renderēšanas ātrumu.

Lai uzlabotu savas vietnes ātrumu un veiktspēju, veiciet tālāk norādītās darbības.

1. Definējiet mainīgos lokāli

Kā programmētājam jums ir jāzina kā darbojas tvēruma noteikšana. JavaScript ir divu veidu mainīgie: lokālie mainīgie un globālie mainīgie.

Vietējie mainīgie ir mainīgie, kas deklarēti funkciju blokā. Tvērums paliek tikai tajā funkcijā, kurā tie ir deklarēti. Globālie mainīgie ir mainīgie, kas pieejami visā skriptā. Globālo mainīgo gadījumā darbības joma paliek visā programmā.

Ikreiz, kad mēģināt piekļūt mainīgajam, pārlūkprogramma veic kaut ko, kas pazīstams kā tvēruma uzmeklēšana. Tas pārbauda tuvāko mainīgā tvērumu un turpina meklēt, līdz atrod mainīgo. Tādējādi, jo lielāka tvēruma ķēde ir jūsu programmā, jo ilgāks laiks būs nepieciešams, lai piekļūtu mainīgajiem, kas pārsniedz pašreizējo tvērumu.

Šī iemesla dēļ vislabāk ir vienmēr definēt savus mainīgos tuvāk izpildes kontekstam. Globālos mainīgos izmantojiet tikai retos gadījumos; ja vēlaties saglabāt, piemēram, visā skriptā izmantotos datus. Tas samazinās tvērumu skaitu jūsu programmā, tādējādi uzlabojot veiktspēju.

2. Ielādējiet JavaScript asinhroni

JavaScript ir viena pavediena programmēšanas valoda. Tas nozīmē, ka pēc funkcijas izpildes tai ir jādarbojas līdz beigām, lai varētu palaist citu funkciju. Šī arhitektūra var radīt situācijas, kurās kods var bloķēt pavedienu un iesaldēt lietotni.

Lai pavediens darbotos labi, daži laikietilpīgi uzdevumi jāveic asinhroni. Kad uzdevums tiek izpildīts asinhroni, tas neaizņem visu pavediena apstrādes jaudu. Tā vietā funkcija pievienojas notikumu rindai, kurā tā tiek aktivizēta pēc visu pārējo kodu izpildes.

API izsaukumi ir lieliski piemēroti asinhronajam modelim, jo ​​to atrisināšana prasa laiku. Tā vietā, lai tas aizturētu pavedienu, izmantojiet uz solījumu balstītu bibliotēku, piemēram, ielādes API, lai asinhroni iegūtu datus. Tādā veidā cits kods var darboties, kamēr pārlūkprogramma izgūst datus no API.

Izprotiet asinhronās programmēšanas sarežģījumus un uzlabosit savas lietojumprogrammas veiktspēju.

3. Izvairieties no nevajadzīgām cilpām

Ciklu izmantošana JavaScript var būt dārgi, ja neesat piesardzīgs. Pārvietošanās ar vienu vienumu kolekciju var ievērojami noslogot pārlūkprogrammu.

Lai gan jūs noteikti nevarat izvairīties no cilpām savā kodā, jums tajās ir jāstrādā pēc iespējas mazāk. Varat izmantot citus paņēmienus, lai izvairītos no nepieciešamības pārskatīt kolekciju.

Piemēram, varat saglabāt masīva garumu citā mainīgajā, nevis nolasīt to katras cilpas iterācijas laikā. Ja no cilpas iegūstat to, ko vēlaties, nekavējoties izlauzieties no tā.

4. Samaziniet JavaScript kodu

Minifikācija ir efektīva metode JavaScript koda optimizēšanai. Minimizētājs pārveido jūsu neapstrādāto avota kodu mazākā ražošanas failā. Tie noņem komentārus, apgriež nevajadzīgo sintaksi un saīsina garus mainīgo nosaukumus. Tie arī noņem neizmantoto kodu un optimizē esošās funkcijas, lai aizņemtu mazāk rindu.

Minimizētāju piemēri ir Google Closure Compiler, UglifyJS un Microsoft AJAX minifier. Varat arī manuāli samazināt savu kodu, pārbaudot to un meklējot veidus, kā to optimizēt. Piemēram, jūs varat vienkāršojiet if paziņojumus savā kodā.

5. Saspiediet lielus failus, izmantojot Gzip

Lielākā daļa klientu izmantojiet Gzip, lai saspiestu un atspiestu lieli JavaScript faili. Kad pārlūkprogramma pieprasa resursu, serveris var to saspiest, lai atbildē atgrieztu mazāku failu. Kad klients saņem failu, tas to dekompresē. Kopumā šī pieeja ietaupa joslas platumu un samazina latentumu, uzlabojot lietojumprogrammu veiktspēju.

6. Samaziniet DOM piekļuvi

Piekļuve DOM var ietekmēt jūsu lietojumprogrammas veiktspēju, jo pārlūkprogramma ir jāatsvaidzina ar katru DOM atjauninājumu. Vislabāk ir ierobežot DOM piekļuvi pēc iespējas mazākā frekvencē. Viens veids, kā to izdarīt, ir saglabāt atsauces uz pārlūkprogrammas objektiem.

Varat arī izmantot bibliotēku, piemēram, React, kas veic izmaiņas virtuālajā DOM pirms to nosūtīšanas uz reālo DOM. Rezultātā pārlūkprogramma atjaunina tās lietojumprogrammas daļas, kuras ir jāatjaunina, nevis atsvaidzina visu lapu.

7. Atlikt nevajadzīgu JavaScript ielādi

Lai gan ir svarīgi, lai jūsu lapa tiktu ielādēta laikā, ne visām funkcijām ir jādarbojas sākotnējās ielādes laikā. Pieņemsim, ka jums ir noklikšķināma poga un cilnes izvēlne, kas atsaucas uz JavaScript kodu; abus varat atlikt līdz lapas ielādei.

Šī metode atbrīvo apstrādes jaudu, ļaujot laikus renderēt nepieciešamos lapas elementus. Jūs kavējat koda kompilēšanu, kas varētu glabāt lapas sākotnējo attēlojumu. Pēc tam, kad lapas ielāde ir pabeigta, varat sākt ielādēt funkcijas. Tādā veidā lietotājs var izbaudīt ātru ielādes laiku un savlaicīgi sākt mijiedarboties ar elementiem.

Galvas elementā varat iekļaut arī mazāko CSS un JavaScript daudzumu, lai tas tiktu ielādēts nekavējoties. Pēc tam sekundārais kods var dzīvot atsevišķos .css un .js failos. Šī tehnika prasa pienācīgas zināšanas kā darbojas DOM.

8. Izmantojiet CDN, lai ielādētu JavaScript

Satura piegādes tīkla izmantošana palīdz paātrināt lapas ielādes laiku, taču tas ne vienmēr ir efektīvs. Piemēram, ja izvēlaties CDN bez vietējā servera apmeklētāja valstī, viņi negūs labumu.

Lai atrisinātu šo problēmu, varat izmantot rīkus, lai salīdzinātu vairākus CDN un izlemtu, kurš piedāvā vislabāko veiktspēju jūsu lietošanas gadījumā. Lai uzzinātu, kurš CDN ir vislabākais jūsu bibliotēkai, skatiet cdnjs tīmekļa vietne.

9. Noņemiet atmiņas noplūdes

Atmiņas noplūde var negatīvi ietekmēt lietojumprogrammas veiktspēju. Noplūdes rodas, kad ielādētā lapa aizņem arvien vairāk atmiņas.

Atmiņas noplūdes piemērs ir gadījums, kad pārlūkprogramma sāk palēnināties pēc ilgas darba ar lietojumprogrammu sesijas.

Varat izmantot Chrome izstrādātāja rīkus, lai atklātu atmiņas noplūdes savā lietojumprogrammā. Rīks ieraksta laika skalu veiktspējas cilnē. Daudzas atmiņas noplūdes rodas DOM elementu noņemšanas rezultātā. Atkritumu savācējs atbrīvos atmiņu tikai tad, kad visi mainīgie, kas atsaucas uz šiem elementiem, ir ārpus darbības jomas.

Tādi rīki kā Lighthouse, Google PageSpeed ​​Insights un Chrome var palīdzēt atklāt problēmas. Lighthouse pārbauda pieejamības, veiktspējas un SEO problēmas. Google PageSpeed ​​var palīdzēt optimizēt JavaScript, lai uzlabotu lietojumprogrammas veiktspēju.

Pārlūkprogrammā Chrome ir pieejama izstrādātāja rīku funkcija, kuru varat pārslēgt, uz sava atslēgvārda noklikšķinot uz F12. Varat izmantot tā veiktspējas analīzi, lai ieslēgtu un izslēgtu tīklu un pārbaudītu CPU patēriņu. Tas pārbauda arī citus rādītājus, lai atklātu problēmas, kas ietekmē jūsu vietni.

Kā tīmekļa izstrādātājs jūs daudz strādāsit savā tīmekļa pārlūkprogrammā. Lielākajai daļai pārlūkprogrammu ir izstrādātāju rīku komplekts, kas palīdz novērst vietnes problēmas. Google Chromes izstrādātāja rīku funkcijai ir daudz funkciju, kas jums palīdzēs.