Millorar el rendiment del nostre codi jQuery

Sempre m'ha semblat interessant article, i qualsevol discussió de com fer el codi més eficient.
Sempre m'ha informat cada vegada que em vaig trobar davant d'un nou llenguatge, PHP, després de Java i després amb el framework jQuery. Això no és només per optimitzar els temps de resposta, o només per fer l'experiència d'usuari més ràpid i millorat.
Aprendre a optimitzar el codi també es reflecteix en la qualitat del codi en si, una cosa a la que sempre he mantingut.
Crec que cal pensar en un treball com a programador a la dels artesans, el nostre producte és un artefacte i, com a tal, pot ser més o menys refinat.
Hi ha mil maneres d'aconseguir el mateix resultat, però alguns són millors que altres, encara que no per tots els projectes és de vital importància estar atents als resultats, utilitzeu sempre un bon enfocament, que serà útil en temps de necessitat.
Hi ha molts recursos en línia en l'optimització de jQuery, alguns consells són acadèmics a tot arreu, altres, altres semblen contradictòries, llavors fem una mica d'ordre i de la segona llista també va signar l'experiència directa de les millors pràctiques que no podem renunciar.

Utilitzeu l'última versió del marc

No tingueu por d'anar a la nova versió de jQuery, la compatibilitat està garantida i cada nova versió porta millores significatives en el rendiment amb la nova redacció de les seccions de les millores de nucli i és perceptible en les funcions més utilitzades. Només a partir d'una versió a la següent per a algunes funcions de temps a parlar sobre les execucions redueix al 50%. Fes un cop d'ull a la il · lustració de sota:

Utilitzeu el mètode abreujat per a la llista DOM

En lloc de:

 



 $ (Document). Ready (function () {/ * lògica * /})

 

estalviar una mica de bytes mitjançant l'ús del seu accés directe:

 



 $ (Function () {/ * lògica * /});

 

Referint-se a la càrrega de la finestra lògica

No cal escriure tot el que en el document llest. Delegar part de la lògica per a realitzar la càrrega de la finestra. Per exemple, la unió el clic d'un botó al final d'una manera llarga pot relaxar-se i esperar que es defineixin.

 $ (Function () {



  



 / / Aquí la lògica #







 });







 $ Càrrega (Finestra). (Function () {



  



 $ ("Button"). Feu clic a (function () {



    



 / / # Aquesta lògica per enllaçar el botó



  



 });







 });

Minificare scripts

En primer lloc, li suggereixo que s'instal · la a Firefox (addon com FireBug ) i crom en el plugin de velocitat en Google que es troben aquí . Aquesta eina de gran utilitat, així com donar consells generals per millorar el rendiment de la seva pàgina té una característica valuosa: la versió minificata ofereix tots els scripts que es troben a l'interior. També ho fa per CSS i també ofereix versions optimitzades de les imatges, però anem a reflexionar sobre la nostra jQuery pesats, adjunt dues captures de pantalla a continuació val més que mil paraules explicant el que fas:

Pàgina de Google de velocitat tal com apareix en Firebug:

En fer clic a Desa com minificata obtenir la versió dels guions:

Minificare cada un dels scripts de la pàgina que vostè pot prendre per salvar desenes de KB en la descàrrega.

• <<
• 1
• 2
• >>