In verband met performance Javascript slim toepassen

Geschreven door: op dinsdag 29 september 2020

Leestijd: 2 minuten

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.

 


Andere blogartikelen

  • Hoe kan je meer leads genereren EN online verkopen?

    Geschreven door: op woensdag 8 september 2021

    Een website die leads genereert en online verkopen faciliteert? Met behulp van een website met geïntegreerde webshop kunt u direct meer business realiseren. Directe verkopen van standaard producten zo ...

    Bekijk het artikel »
  • Even voorstellen: Nick van Leijden

    Geschreven door: op donderdag 22 juli 2021

    Hoi, volgens mij kennen wij elkaar nog niet! Ik ben Nick van Leijden, een 24 jaar oude User Experience designer en sinds kort werkzaam bij Sigma Solutions als UX developer. Als UX developer is het mij ...

    Bekijk het artikel »
  • Even voorstellen: Renzo Korver

    Geschreven door: op dinsdag 20 juli 2021

    Mijn naam is Renzo Korver, ik ben 24 jaar en ik kom uit Oudkarspel. Eind januari 2021 ben ik bij Sigma Solutions gestart met mijn afstudeerstage voor de opleiding Communicatie aan de Hogeschool van Am ...

    Bekijk het artikel »
Bel 072 5345 888
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book »

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book ›