Tags
Rendering
Performance
Webpagina-rendering
Rendering is het proces waarbij de browser HTML, CSS en JavaScript omzet naar pixels op het scherm. De browser bouwt de DOM- en CSSOM-boom, combineert ze tot de render-tree, berekent de layout en schildert de pixels. Rendering kan server-side (SSR), client-side (CSR) of via static generation (SSG) plaatsvinden. Render-blocking resources vertragen dit proces.
Andere termen met deze tag:
SSR
AA
Concepten
Server-Side Rendering
Bij SSR genereert de server voor elk verzoek een HTML-pagina en stuurt deze naar de browser. Voordelen zijn betere SEO en snellere eerste weergave. Nadelen zijn hogere serverbelasting en langzamere Time to First Byte dan SSG. Next.js en Nuxt ondersteunen SSR out-of-the-box.
AA
Concepten
DOM
A
Frontend
Document Object Model
De DOM is de boomstructuur die de browser van een HTML-document maakt, waarbij elk element een node is. JavaScript kan de DOM manipuleren met bijvoorbeeld getElementById, querySelector en appendChild. Dit triggert reflow/repaint en kost performance. Een virtual DOM (zoals in React) optimaliseert dit.
A
Frontend
Render-blocking
AA
Performance
Render-blocking resources
Render-blocking resources zijn CSS- en JavaScript-bestanden die de browser dwingen het renderen van de pagina te pauzeren totdat ze geladen en verwerkt zijn. CSS in de <head> blokkeert altijd — scripts zonder async of defer ook. Dit vertraagt de First Contentful Paint. Oplossingen: inline critical CSS, defer/async voor scripts en preload voor kritieke resources.
AA
Performance
CSR
AA
Concepten
Client-Side Rendering
Bij CSR rendert de browser de pagina volledig met JavaScript: de server stuurt een vrijwel lege HTML-pagina en de browser bouwt de content op. Voordelen zijn een app-achtige ervaring na het laden. Nadelen zijn langzamere initiële laadtijd en complexere SEO. React en Vue zonder SSR zijn standaard CSR.
AA
Concepten
SSG
AAA
Concepten
Static Site Generation
Bij SSG worden pagina's gebouwd op deploymenttijd in plaats van per request. Dit levert razendsnel serveerbare HTML op die gecached wordt op een CDN. Ideaal voor blogs, documentatiesites en marketingpagina's. Frameworks: Next.js, Nuxt en Astro.
AAA
Concepten
400 kaartjes
Een uitgebreide collectie begrippen voor elk niveau
12 categorieen
Van HTML & CSS tot databases en security
3 niveaus
Geschikt voor beginners en gevorderden
Voor teams & klassen
Ideaal als lesmateriaal of teambuilding tool
Offline oefenen
Fysiek aan de slag, zonder scherm