In verband met performance Javascript slim toepassen header image

In verband met performance Javascript slim toepassen

dinsdag 29 september 2020 ·Leestijd: 2 minuten
contacteer auteur:

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

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
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 â€º