Sei le migliori pratiche di jQuery per prestazioni migliorate
jQuery è uno di il le 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, da dando al browser meno script da eseguire durante il caricamento della pagina, noi possiamo ridurre il tempo necessario per la creazione e la pittura dell'albero DOM finale, dopo di che sarà l'utente in grado di vedere la pagina.
Un modo per farlo in jQuery è usando $ .getScript 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 la cache per getScript dovrai abilitare lo stesso per tutte le richieste Ajax. Puoi farlo usando il codice qui sotto:
$ .ajaxSetup (cache: true);
2. Evitare $ (finestra) .load () se il tuo script non ha bisogno di risorse secondarie della pagina
Il $ (documento) .ready () è equivalente a DOMContentLoaded (dove DOMContentLoaded è disponibile) e $ (finestra) .load () a Caricare. 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 basato sulle risorse secondarie di una pagina, come cambiare il colore di sfondo di a div è progettato da un foglio di stile esterno, è meglio usarlo $ (finestra) .load ().
Ma se non è così, è meglio attenersi a $ (documento) .ready () perché, jQuery chiama il suo pronto gestore di eventi che usi $ (documento) .ready () o no, quindi usalo quando puoi.
3. Uso distaccare rimuovere elementi dal DOM che dovevano essere modificati.
“riflusso” è 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 richiede un modifica del layout nella pagina. il reflow è un costoso processo del browser.
Possiamo ridurre il no. di reflussi causati da modifiche strutturali a un elemento eseguendo le modifiche su di esso dopo portandolo fuori dal flusso della pagina e rimettendolo a posto quando è finito. Se stai aggiungendo più righe a un tavolo uno per uno causerà molti riflessi. Quindi è meglio prendi il tavolo dalla struttura DOM, aggiungi le righe e rimettilo nel DOM; questo ridurrà i riflessi.
jQuery di staccare () ci consente di rimuovere un elemento dalla pagina, è diverso da rimuovere() 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 anziché altezza() e larghezza()
Se stai impostando l'altezza o la larghezza di un elemento in jQuery, ti suggerisco di usare il css () funzione perché imposta quei valori usando altezza() e larghezza() causerà ulteriori riflessi dovuti all'accesso di alcune proprietà del layout nella funzione computeStyleTests in jQuery (testato nell'ultima versione).
Per il codice p.height ( "300px"); ecco i riflessi.
Per p.css ("height": "300px");
computeStyleTests è usato per fare alcuni test di supporto. Viene anche chiamato while ottenere l'altezza e la larghezza usando tutti e due css () e altezza larghezza() , ma per ambientazione è solo richiesto altezza larghezza() che potrebbe non essere necessario, quindi usare css () anziché.
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 una delle proprietà del layout, lo fa ti assicura di ottenere il valore aggiornato (nel caso in cui il valore sia stato invalidato in precedenza) da ricalcolo dei valori e applicazione di eventuali modifiche al layout.
Quindi, se stai usando jQuery o vanilla JavaScript, fai attenzione all'accesso inutilmente alle proprietà del layout soprattutto 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 nella cache le risorse, ma non sono disponibili per copione e jsonp, quindi, se vuoi caching su tutte le tue richieste Ajax, puoi farlo impostalo globalmente come sotto.
Si noti inoltre che se si prelevano le risorse usando inviare non verrà memorizzato nella cache anche se si abilita la memorizzazione nella cache con l'impostazione precedente.
Come ho detto prima, staccare () memorizza nella cache i dati associati all'elemento da rimuovere a differenza rimuovere();nascondere() memorizza il CSS iniziale display valore di un elemento prima di nasconderlo in modo che possa essere ripristinato in un secondo momento senza perdere i dati.
Conclusione
Un modo in cui puoi essere certo 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. Se c'è, utilizzare gli strumenti performance e debugger su 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.
