Sex jQuery bästa praxis för förbättrad prestanda

jQuery är en av de mest populära JavaScript-bibliotek idag. API: n är mycket lätt att använda, vilket leder till en inte så brant inlärningskurva. Många projekt använder jQuery-kod istället för att direkt använda vanilj JavaScript för att få in dynamiska funktioner.

Men jQuery har sina brister också. Det kan leda till vissa prestationsproblem om de används slarvigt precis som det språk det är baserat på. I det här inlägget visas några av de bästa metoderna för att använda jQuery som hjälper oss att undvika eventuella prestationsproblem.

1. Lazy load scripts när det behövs

Webbläsare kör JavaScript innan du skapar DOM-trädet och målar pixlarna på skärmen, eftersom skript kan lägga till nya element på sidan eller ändra layout eller stil på vissa DOM-noder. Så, av vilket ger webbläsaren mindre skript att utföra under sidbelastning, vi kan minska tiden det tar för den slutliga DOM-trädens skapande och målning, varefter användaren kommer att vara kan se sidan.

Ett sätt att göra detta i jQuery är att använda $ .getScript att ladda vilken skriptfil som helst vid tidpunkten för dess behov snarare än under sidbelastning.

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

Det är en ajax-funktion som kommer att skaffa en enda skriptfil när du vill ha den, men observera att filen som hämtats inte är cachad. För att aktivera caching för getScript du måste aktivera samma för alla ajax-förfrågningar. Du kan göra det genom att använda koden nedan:

$ .ajaxSetup (cache: true); 

2. Undvik $ (fönster) .load () om ditt skript inte behöver några delresurser på sidan

De $ (dokument) .ready () är ekvivalent med DOMContentLoaded (var DOMContentLoaded är tillgänglig) och $ (fönster) .load () till Ladda. Den första är avfyra när en egen DOM är laddad, men inte externa tillgångar som bilder och stylesheets. Den andra är avfyra när allt en sida består av, inklusive sitt eget innehåll och dess underresurser laddas.

Så, om du skriver ett manus som bygger på en sidas delresurser, som att ändra bakgrundsfärgen på a div som är utformad av ett externt stilark, det är bäst att använda $ (fönster) .load ().

Men om det inte är fallet är det bättre att hålla fast vid $ (dokument) .ready () för att jQuery ringer det redo händelsehanteraren om du använder $ (dokument) .ready () eller inte, så använd det när du kan.

3. Använd lösgöra för att ta bort element från DOM som behövde ändras.

“reflow” är en term som hänvisar till layoutändringar på en webbsida, det är när webbläsaren omarrangerar en sids element för att rymma ett nytt element, anpassa sig till strukturella förändringar av ett element, fylla gapet kvar av ett element som tagits bort eller någon annan åtgärd som behöver en layoutändring på sidan. reflow är en dyr webbläsarprocess.

Vi kan minska nej. av reflows orsakade av strukturella förändringar av ett element genom att genomföra förändringarna på det efter tar det ur sidflödet och sätta tillbaka det när det är klart. Om du lägger till flera rader i ett bord en efter en kommer det att orsaka många reflows. Så det är bättre att ta ut bordet DOM-trädet, lägg till raderna till det och lägg det tillbaka till DOM; detta kommer att minska reflows.

jQuery s lösgöra() Låt oss ta bort ett element från sidan, Det skiljer sig från ta bort() eftersom det kommer att spara data som är kopplade till elementet för när det måste läggas till sidan senare. Ett fristående element kan sedan sättas tillbaka till sidan när det har ändrats.

4. Använd css () för att ställa in höjd eller bredd istället för höjd() och bredd()

Om du ställer in höjd eller bredd på ett element i jQuery, föreslår jag att du använder css () funktion eftersom du ställer in dessa värden med höjd() och bredd() kommer att orsaka extra reflows på grund av åtkomsten av vissa layoutegenskaper i funktionen computeStyleTests i jQuery (testad i senaste ver.).

För koden p.height ( "300px"); här är reflowsna.

För p.css ("height": "300px");

computeStyleTests används för att göra några stödtester. Det kallas också under tiden få längden och bredden med både css () och höjd bredd() , men för miljö det krävs bara höjd bredd() vilket kanske inte behövs, så använd css () istället.

5. Få inte tillgång till layoutegenskaper i onödan

Åtkomst till layoutegenskaper som höjd, bredd, marginal etc. kommer att utlösa återflöde på sidan. Anledningen är när du frågar webbläsaren för någon av layoutegenskaperna, den ser till att du får det uppdaterade värdet (om värdet har ogiltigförts före) av omberäkna värdena och tillämpa layoutändringar.

Så om du använder jQuery eller vanilla JavaScript, akta dig för att få tillgång till layoutegenskaper i onödan speciellt i en slinga eller följaktligen efter att stilen ändras.

6. Använd caching där du kan

Några av jQuerys funktioner levereras med cachemekanismer som kan användas till bra användning. Ajax-förfrågningar cache resurserna, men det är inte tillgängligt för manus och jsonp, så om du vill cache över alla dina ajax-förfrågningar, kanske du vill sätta den globalt som nedan.

Observera också att om du hämtar resurser med posta det kommer inte att cachas även om du aktiverar caching med ovanstående inställning.

Som jag nämnde tidigare, lösgöra() cacher data som är associerade med elementet som ska tas bort till skillnad från ta bort();Dölj() cacher den ursprungliga CSS visa värdet på ett element innan det döljs så att det kan återställas senare utan att förlora data.

Slutsats

Ett sätt att du kan vara säker på att du använder den mest effektiva jQuery-koden för ditt behov är att vänta tills du faktiskt har kört din kod och märkt om det finns någon prestationsproblem eller ej. Om det finns, använd prestanda och debuggerverktygen till upptäcka roten till problemet.

Eftersom jQuery är som en kokong för JavaScript med ytterligare funktioner för webbläsarkompatibiliteter och funktioner kan det vara svårt att diagnostisera problemen utan dessa verktyg.