In verband met performance Javascript slim toepassen

Het inladen en gebruik van Javascript kan de opbouw en werking van een pagina op je website trager maken dan nodig is. De twee voornaamste vragen hierbij zijn: gebruik ik teveel Javascript; en heb ik Javascript eigenlijk wel nodig?

Gebruik ik teveel Javascript? Javascript wordt gebruikt om allerlei interactiviteit toe te voegen aan de website. Dit helpt de bezoeker vaak bij het navigeren van de pagina en de website. Sommige interactiviteit hoeft echter niet (meer) gerealiseerd te worden via Javascript, maar is beschikbaar via CSS.

Hieronder een aantal alternatieven:

• De CSS pseudo-class :hover kan je gebruiken in plaats van de event mouseover.
• Een verborgen checkbox kan in combinatie met de :checked pseudo-class worden gebruikt om te werken met onclicks of toggles.
• Sommige libraries zoals jQuery bieden transformaties, zoals fadeIn en slideUp. In CSS heb je hier transitions voor. Dit kan je combineren met :hover of een classname die je wel via Javascript toggelt.

Uiteraard geldt in bovenstaande gevallen dat de interactiviteit alleen bestaat uit presentatie. Maar als het gaat om de technische werking van een website, wordt soms ook nog wel eens te veel Javascript gebruikt, bijvoorbeeld:

• Het versturen van een formulier doe je via een BUTTON met type="submit" (of INPUT), je hoeft het event submit niet aan te roepen via script.
• Hetzelfde geldt voor linkjes, die via anchors (A) werken. 
• Tooltips kan je tonen via het title-attribuut.

Toch heb je soms Javascript nodig om het gedrag van je pagina aan te passen of extra interactiviteit toe te voegen. Vele jaren geleden werkte Javascript voor elke browser net weer wat anders en waren er nog veel browsers die niet alles ondersteunden. Om niet voor elke browser aparte code te hoeven schrijven, werden hiervoor frameworks of libraries zoals jQuery ontwikkeld. Dit wordt nog steeds veel gebruikt en is erg nuttig, maar niet altijd nodig. Tegenwoordig maken alle moderne browsers gebruik van een afgesproken standaard en kan je daar gebruik van maken, zonder extra resources (zoals frameworks) in te hoeven laden.

Er zijn in de moderne standaard een aantal alternatieven voor veelgebruikte jQuery-methodes:

• document.querySelectorAll('p strong') in plaats van $('p strong'). Je krijgt dan een NodeList terug waarmee je kan werken, in plaats van een jQuery-object. Bijvoorbeeld: document.querySelectorAll('p strong').forEach((el, i, list) => (console.log(el)));
• classList property in plaats van .addClass, .hasClass, .toggleClass, et cetera.
• addEventListener in plaats van .on of .bind. Bijvoorbeeld anchor.addEventListener('click', klikFunctie)
• fetch, in combinatie met promises, is een krachtig en duidelijk alternatief voor getJSON: fetch('/product').then(response => console.log(response));

Redenen om toch gebruik te maken van libraries zijn er uiteraard ook, bijvoorbeeld de bekendheid van (nieuwe) collega's ermee en de online te vinden voorbeelden en ondersteuning. Desalniettemin biedt native Javascript tegenwoordig krachtige functies waarmee eenvoudig interactiviteit en applicaties gemaakt kunnen worden.