Nieuwsberichten & Blogs

Bijna elke website maakt tegenwoordig wel gebruik van een stukje script; al is het maar om een menucomponent op te bouwen of wat afbeeldingen te tonen. Scripts kunnen zinvol en mooi zijn, maar het kan de zaak ook flink vertragen. In dit artikel een paar tips die de load kunnen verbeteren.


jQuery is een bibliotheek met javascript; en deze verandert constant. Er zit ontwikkeling in en daarom is het verstandig om altijd de laatste versie van jQuery te gebruiken. Er worden steeds manieren gevonden om de code kleiner en compacter te maken. Zo wordt er gewerkt aan ‘Sizzle’; dit is een bibliotheek waarvan gezegd wordt dat het de laadtijd van Firefox 3 maal versnelt (http://www.sizzlejs.com).


Door scripts te combineren boek je een hoop snelheidswinst. De meeste browsers kunnen slechts 1 script tegelijk afhandelen; de rest wordt in een wachtrij gezet wat zorgt voor meer laadtijd. Bij grote hoeveelheden script is het verstandig om het door een compressie-tool te halen waardoor de bestandsgrootte wordt verkleind en dus ook de laadtijd.


Gebruik ‘for’ in plaats van ‘each’. Natuurlijke functies zijn sneller dan z’n ‘gemaakte’ tegenhangers. Met JSON kun je direct in javascript datastructuren opslaan. Dit is een alternatief voor XML. JSON is eenvoudig en je hoeft dus niets te parsen want het is direct beschikbaar. Wanneer je een object terug krijgt uit JSON kun je deze beter herschrijven en een array laten terug geven; deze zijn eenvoudiger te doorlopen.


Gebruik ID’s in plaats van Classes. Wanneer je ID’s gebruikt wordt de natuurlijke javascript-functie getElementsById aangeroepen wat ervoor zorgt dat de query sneller kan worden uitgevoerd. Een ID kan natuurlijk maar 1x voorkomen en daarom zal dit niet altijd de oplossing zijn, maar doe het waar het kan.


Geef de selectors een context. Op deze manier hoeft jQuery niet de hele DOM door om bij de selector te komen. Gebruik:
$(‘.class .class-container’).css(‘background-color’,’red’);
in plaats van:
$(‘.class-container’).css(‘background-color’,’red’);


In de eerste regel worden alle elementen met de classname '.class-container' binnen de classname '.class' aangeroepen. In de tweede regel wordt 1 selector aangeroepen die een achtergrond krijgt: jQuery doorloopt hier de hele DOM om te kijken of er nog meer elementen zijn met die classname. Wanneer je een diepere selector aanroept zoals voorbeeld 1, kan er gerichter worden gezocht. jQuery heeft daar duidelijk minder moeite mee.


Maak altijd gebruik van caching! Maak niet de fout om telkens weer dezelfde selector aan te roepen. Je kunt hier veel beter een variabele voor definieren. Gebruik:
$('#item').css({'color':'#123456', 'background-color': '#ffffff'}).html('hello');
in plaats van:
$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');

Selecteer nooit elementen meerdere keren binnen een loop!


Niets van dit alles zal op zichzelf een aanzienlijk verschil maken; toch zal de optelsom zich vertalen in een performancewinst. Het is niet eens zoveel meer werk, het is slechts een bewustwording.