Sei migliori pratiche di jQuery per prestazioni migliorate

jQuery è una delle librerie JavaScript più popolari oggi. La sua API è molto facile da usare e porta a una curva di apprendimento non troppo ripida. Molti progetti usano il codice jQuery invece di usare direttamente il JavaScript di vanilla per introdurre funzionalità dinamiche.

Ma anche jQuery ha i suoi limiti. Può portare a problemi di prestazioni se usato con noncuranza, proprio come il linguaggio su cui è basato. Questo post elencherà alcune delle migliori pratiche nell'utilizzo di jQuery che ci aiuterà a evitare problemi di prestazioni.

1. Lazy load scripts quando necessario

I browser eseguono JavaScript prima di creare l'albero DOM e dipingere i pixel sullo schermo, poiché gli script possono aggiungere nuovi elementi alla pagina o modificare il layout o lo stile di alcuni nodi DOM. Quindi, dando al browser meno script da eseguire durante il caricamento della pagina, possiamo ridurre il tempo necessario per la creazione e la pittura dell'albero DOM finale, dopo di che l'utente sarà in grado di vedere la pagina .

Un modo per farlo in jQuery è usando $.getScript per caricare qualsiasi file di script al momento del suo bisogno piuttosto che durante il caricamento della pagina.

 $ .getScript ("scripts / gallery.js", callback); 

È una funzione ajax che otterrà un singolo file di script quando lo si desidera, ma si noti che il file recuperato non viene memorizzato nella cache. Per abilitare il caching per getScript dovrai abilitare lo stesso per tutte le richieste getScript . Puoi farlo usando il codice qui sotto:

 $ .ajaxSetup ({cache: true}); 

2. Evita $( window ).load() se lo script non ha bisogno di risorse secondarie della pagina

$( document ).ready() è equivalente a DOMContentLoaded (dove DOMContentLoaded è disponibile) e $( window ).load() a Load . Il primo viene attivato quando viene caricato il DOM di una pagina, ma non le risorse esterne come immagini e fogli di stile. Il secondo viene attivato quando tutto ciò che è costituito da una pagina, incluso il suo contenuto e le sue risorse secondarie, vengono caricati.

Quindi, se stai scrivendo uno script che si basa sulle risorse secondarie di una pagina, come cambiare il colore di sfondo di un div che è stato disegnato da un foglio di stile esterno, è meglio usare $( window ).load() .

Ma, se questo non è il caso, è meglio attenersi a $( document ).ready() perché, jQuery chiama il suo gestore di eventi ready se usi $( document ).ready() o meno, quindi $( document ).ready() quando puoi.

3. Usa lo detach per rimuovere elementi dal DOM che dovevano essere modificati.

"Reflow" è un termine che si riferisce alle modifiche del layout in una pagina web, è quando il browser riorganizza gli elementi di una pagina per accogliere un nuovo elemento, regolare le modifiche strutturali di un elemento, riempire il vuoto lasciato da un elemento rimosso o qualche altra azione che ha bisogno di un cambio di layout nella pagina. reflow è un processo costoso per il browser .

Possiamo ridurre il no. di reflussi causati da modifiche strutturali a un elemento eseguendo le modifiche su di esso dopo averlo estratto dal flusso della pagina e reinserito quando è stato eseguito . Se stai aggiungendo più righe a un tavolo uno per uno causerà molti riflessi. Quindi è meglio prendere il tavolo fuori dall'albero DOM, aggiungere le righe e rimetterlo al DOM ; questo ridurrà i riflessi.

jQuery's detach() ci permette di rimuovere un elemento dalla pagina, è diverso da remove() perché salverà i dati associati all'elemento per quando sarà necessario aggiungerlo successivamente alla pagina. Un elemento staccato può quindi essere reinserito nella pagina quando è stato modificato.

4. Usa css() per impostare altezza o larghezza invece di height() e width()

Se stai impostando l'altezza o la larghezza di un elemento in jQuery, ti suggerisco di utilizzare la funzione css() perché l'impostazione di tali valori usando height() e width() causerà ulteriori riflessi dovuti all'accesso di alcune proprietà di layout nel function computeStyleTests in jQuery (testato nell'ultima versione).

Per il codice p.height("300px"); ecco i riflessi.

Per p.css({ "height": "300px"});

computeStyleTests viene utilizzato per eseguire alcuni test di supporto. Viene anche chiamato mentre si ottiene l'altezza e la larghezza usando sia css() che height()/width(), ma per l' impostazione è chiamato solo height()/width() che potrebbe non essere necessario, quindi usa invece css() .

5. Non accedere alle proprietà del layout senza necessità

L'accesso alle proprietà del layout come altezza, larghezza, margine ecc. Attiverà il riflusso nella pagina. Il motivo è che ogni volta che chiedi al browser qualsiasi proprietà del layout, si assicura di ottenere il valore aggiornato (nel caso in cui il valore sia stato invalidato in precedenza) ricalcolando i valori e applicando le modifiche al layout .

Quindi, che tu stia usando JavaScript jQuery o vanilla, fai attenzione ad accedere alle proprietà del layout inutilmente, specialmente in un ciclo o, di conseguenza, dopo aver apportato modifiche allo stile.

6. Utilizza la cache dove puoi

Alcune delle funzioni di jQuery vengono fornite con meccanismi di memorizzazione nella cache che possono essere utilizzati. Le richieste Ajax memorizzano le risorse in cache, ma non sono disponibili per script e jsonp, quindi se vuoi jsonp caching su tutte le tue richieste Ajax, puoi impostarlo globalmente come di seguito.

Si noti inoltre che se si recuperano le risorse utilizzando il post questo non verrà memorizzato nella cache anche se si abilita la memorizzazione nella cache con l'impostazione precedente.

Come ho detto prima, detach() memorizza nella cache i dati associati all'elemento da rimuovere a differenza di remove() ; hide() memorizza nella cache il valore iniziale di display CSS di un elemento prima di nasconderlo in modo che possa essere ripristinato in seguito senza perdere i dati.

Conclusione

Un modo in cui puoi essere sicuro di utilizzare il codice jQuery più efficace per te è aspettare che tu abbia effettivamente eseguito il tuo codice e notato se c'è qualche problema di prestazioni o meno. In tal caso, utilizzare gli strumenti Prestazioni e Debugger per rilevare la radice del problema .

Poiché jQuery è come un bozzolo per JavaScript con funzionalità aggiuntive per compatibilità e caratteristiche del browser, può essere difficile diagnosticare i problemi senza questi strumenti.