Seši jQuery labākās prakses uzlabotās veiktspējas nodrošināšanai

jQuery ir viens no the šodien populārākās JavaScript bibliotēkas. Tās API ir ļoti viegli izmantot, kā rezultātā nav tik strauja mācīšanās līkne. Daudzi projekti izmanto jQuery kodu, nevis tieši izmantojot vaniļas JavaScript, lai nodrošinātu dinamiskas funkcijas.

Bet jQuery ir arī trūkumi. Tas var novest pie dažiem veiktspējas jautājumiem, ja tos lieto bezrūpīgi tāpat kā tā pamatā ir valoda. Šajā ziņojumā tiks uzskaitītas dažas labākās prakses, izmantojot jQuery, kas palīdzēs mums izvairīties no veiktspējas problēmām.

1. Lazy slodzes skripti, ja nepieciešams

Pārlūkprogrammas palaiž JavaScript pirms DOM koka izveides un ekrānā redzamo pikseļu krāsošanas, jo skripti var pievienot lapai jaunus elementus vai mainīt dažu DOM mezglu izkārtojumu vai stilu. Tātad, līdz dodot pārlūkam mazāk skriptu, kas jāveic lapas ielādes laikā, mēs varam samazināt laiku, kas nepieciešams par galīgo DOM koku veidošanu un gleznošanu, pēc kura lietotājs būs var redzēt lapu.

Viens veids, kā to izdarīt jQuery, ir izmantot $ .getScript ielādēt jebkuru skripta failu tā nepieciešamības laikā, nevis lapas ielādes laikā.

$ .getScript ("scripts / gallery.js", atzvanīšana); 

Tā ir ajax funkcija, kas, ja vēlaties, saņems vienu skripta failu, bet ņemiet vērā, ka ielādētais fails nav kešatmiņā. Lai iespējotu kešatmiņu getScript jums būs jāiespējo tas pats visiem ajax pieprasījumiem. To var izdarīt, izmantojot tālāk norādīto kodu:

$ .ajaxSetup (cache: true); 

2. Izvairieties $ (logs) .load () ja jūsu skriptam nav nepieciešami lapas apakšresursi

The $ (dokuments). jau () ir līdzvērtīgs DOMContentLoaded (kur DOMContentLoaded ir pieejams) un $ (logs) .load () uz Slodze. Pirmais tiek izgaismots, kad tiek ielādēta lapas DOM, bet ne ārējie aktīvi, piemēram, attēli un stilu tabulas. Otrā daļa tiek atlaista, kad tiek ielādēta visa lapa, ieskaitot tās saturu un tās apakš resursus.

Tātad, ja rakstāt skriptu, kas balstās uz lapas apakš resursiem, piemēram, mainot fona krāsu div tas ir veidots ar ārēju stilu, vislabāk to izmantot $ (logs) .load ().

Bet, ja tas tā nav, labāk ir ievērot $ (dokuments). jau () jo, jQuery aicina to gatavs notikumu apstrādātājs neatkarīgi no tā, vai lietojat $ (dokuments). jau () vai nē, tāpēc izmantojiet to, kad vien iespējams.

3. Izmantojiet atdaliet noņemt DOM elementus, kas bija jāmaina.

“Reflow” ir termins, kas attiecas uz izkārtojuma izmaiņām tīmekļa lapā, kad pārlūks pārkārto lapas elementus, lai pielāgotos jaunam elementam, pielāgotu elementa strukturālām izmaiņām, aizpildītu atstarpi, ko atstājis noņemts elements, vai kādu citu darbību, kurai nepieciešama izkārtojuma maiņa lapā. reflow ir dārgi pārlūka process.

Mēs varam samazināt nē. strukturālas izmaiņas elementā, veicot izmaiņas tajā pēc tam to no lapas plūsmas un atdodot to atpakaļ, kad tas ir izdarīts. Ja pēc kārtas pievienojat vairākas rindas, tas radīs daudz atmaksas. Tāpēc ir labāk paņemiet tabulu no DOM koka, pievienojiet tai rindas un ievietojiet to atpakaļ DOM; tas samazinās atdevi.

jQuery's atdalīt () ļauj noņemt lapu no lapas, tas atšķiras no noņemt () jo tas saglabās ar elementu saistītos datus, kad tas būs jāpievieno vēlākai lapai. Pēc tam modificētais elements var tikt atkal ievietots lapā.

4. Izmantojiet css () lai iestatītu augstumu vai platumu augstums () un platums ()

Ja jQuery iestatāt elementa augstumu vai platumu, iesakām izmantot css () funkcijas, jo šo vērtību iestatīšana tiek izmantota augstums () un platums () radīs papildu atmaksas, jo funkcija ir pieejama dažiem izkārtojuma rekvizītiem computeStyleTests jQuery (pārbaudīts jaunākajā versijā).

Par kodu p.height ("300px"); šeit ir atgriešanās.

Par p.css ("augstums": "300px");

computeStyleTests tiek izmantots, lai veiktu dažus atbalsta testus. To sauc arī, kamēr iegūt izmantojot augstumu un platumu abi css () un augstums Platums() , bet iestatījums tas ir tikai pieprasīts augstums Platums() kas var nebūt vajadzīgs, tāpēc izmantojiet css () tā vietā.

5. Nevajadzīgi nevajag piekļūt izkārtojuma īpašībām

Piekļūšana izkārtojuma rekvizītiem, piemēram, augstumam, platumam, starpībai utt., Liks lapā atgriezties. Iemesls ir tas, kad jūs lūdzat pārlūkprogrammu par kādu no izkārtojuma īpašībām pārliecinieties, ka saņemat atjaunināto vērtību (ja vērtība ir anulēta iepriekš) pārrēķinot vērtības un piemērojot jebkādas izkārtojuma izmaiņas.

Tātad, vai jūs izmantojat jQuery vai vanilla JavaScript, izvairieties no nevajadzīgas piekļuves izkārtojuma īpašībām jo īpaši cilpā vai pēc tam pēc stila maiņas.

6. Izmantojiet kešatmiņu, kur varat

Dažas no jQuery funkcijām nāk ar kešatmiņas mehānismiem, kurus var izmantot pareizi. Ajax pieprasījumi nodrošina resursus kešatmiņā, bet tas nav pieejams skriptu un jsonp, tādēļ, ja vēlaties saglabāt kešatmiņu visos jūsu Ajax pieprasījumos, iespējams, vēlēsities iestatiet to globāli kā zemāk.

Ņemiet vērā arī to, ka, izmantojot resursus, izmantojiet post tas netiks saglabāts kešatmiņā pat tad, ja iespējojat kešatmiņu ar iepriekš minēto iestatījumu.

Tāpat kā es iepriekš minēju, atdalīt () atšķiras ar noņemamā elementa datiem noņemt ();slēpt () saglabā sākotnējo CSS displejs elementa vērtība pirms to slēpšanas tā, lai to varētu atjaunot vēlāk, nezaudējot datus.

Secinājums

Viens no veidiem, kā jūs varat būt pārliecināts, ka jūs izmantojat visefektīvāko jQuery kodu, ir jāgaida, kamēr jūs faktiski palaidīsiet savu kodu un pamanīsiet, vai ir kāda veiktspējas problēma. Ja ir, izmantojiet veiktspējas un atkļūdošanas rīkus noteikt problēmas cēloni.

Tā kā jQuery ir kā kokons JavaScript ar papildu funkcijām pārlūkprogrammas saderībai un funkcijām, var būt grūti diagnosticēt problēmas bez šiem rīkiem.