Förbättra prestandan för vår kod jQuery

Jag har alltid funnit intressant artikel, och all diskussion om hur man kan göra koden mer effektiv.
Jag har alltid informeras varje gång som jag fann mig själv inför ett nytt språk, före PHP, sedan Java och sedan med jQuery ram. Det är inte bara att optimera svarstider, eller bara för att göra användarupplevelsen snabbare och mer engagerande.
Lär dig hur du optimerar din kod också avspeglas på kvaliteten på själva koden, något som jag alltid har haft.
Jag tycker det är nödvändigt att tänka på arbete som programmerare med den i hantverkare, är vår produkt en artefakt och som sådan kan vara mer eller mindre raffinerat.
Det finns många sätt att uppnå samma resultat, men vissa är bättre än andra, men inte för alla projekt är viktigt att vara uppmärksam på prestanda, använd alltid en bra strategi, kommer det vara värdefullt i tider av nöd.
Det finns många online resurser på optimering av jQuery, några tips finns överallt, andra universitetslärare, andra verkar motsägelsefullt, då vi göra lite ordning och den andra listan undertecknade också den direkta upplevelsen av bästa praxis som vi inte kan ge upp.

Använd den senaste versionen av ramverket

Var inte rädd för att gå till den nya versionen av jQuery är bakåtkompatibilitet garanteras och varje utgåva ger betydande förbättringar i prestanda med omskrivning av delar av kärnan och märkbara förbättringar i de mest använda funktionerna. Endast en övergång till nästa för vissa funktioner av tiden tala om avrättningar minskat till 50%. Ta en titt på bilden nedan:

Använd genvägen till DOM-Ready

Istället för:

 



 $ (Dokument). Ready (function () {/ * logik * /})

 

spara några byte genom att använda dess genväg:

 



 $ (Function () {/ * logik * /});

 

Med hänvisning till logiken fönster lasten

Det är inte nödvändigt att skriva allt i dokumentet redo. Delegater från logiken att utföra lastning av fönstret. Till exempel kan binda klicka på en knapp i slutet av en lång form slappna av och vänta på att definieras.

 $ (Function () {



  



 / / # Logiken här







 });







 $ (Fönster). Belastning (function () {



  



 $ ("ButtonID"). Klick (function () {



    



 / / # Denna logik att binda knappen



  



 });







 });

Minificare skript

Först föreslår jag att du installerar på din Firefox (som addon Firebug ) och plugin i din Google Chrome hastighet sida som du hittar här . Detta användbara verktyg samt ger allmänna råd för att förbättra resultatet av din sida har en värdefull egenskap: minificata versionen har alla skript som du hittar på insidan. Det gör också för CSS och ger också optimerade versioner av bilderna, men låt oss fundera på vår tunga jQuery fäster jag två skärmdumpar nedan förklarar bättre än tusen ord, vad du gör:

Googles sida hastighet som den visas i Firebug:

Klicka på spara som minificata få den version av skriptet:

Minificare varje skript på sidan som du kan vidta för att spara tiotals KB att ladda ner.

• <<
• 1
• 2
• >>