Conceptuele Uitleg
Deze lezing behandelt de interne werking van webbrowsers en de geschiedenis van browserontwikkeling. Het begrijpen van hoe browsers HTML, CSS en JavaScript verwerken is cruciaal voor het optimaliseren van webpagina's en het voorkomen van performance problemen. De rendering engine en JavaScript engine zijn aparte componenten die elk hun eigen taak hebben in het verwerken van webpagina's.
Waarom is dit belangrijk? Verkeerd gebruik van scripts en CSS kan leiden tot geblokkeerde rendering en trage laadtijden. Door te begrijpen hoe browsers werken, kun je slimmere keuzes maken over waar je scripts plaatst en hoe je ze laadt.
Code Voorbeelden & Syntax
Script Loading Strategieën
Browsers hebben verschillende manieren om JavaScript te laden zonder de HTML parsing te blokkeren:
<!-- Async: laad het script parallel, voer uit zodra het klaar is -->
<script async src="script.js"></script>
<!-- Defer: laad parallel, maar voer pas uit na HTML parsing -->
<script defer src="script.js"></script>
<!-- Standaard: blokkeert HTML parsing tot script is uitgevoerd -->
<script src="script.js"></script>Defer is meestal de veiligste keuze voor scripts die de DOM manipuleren. De oude truc was om scripts onderaan de pagina te plaatsen, wat nog steeds werkt.
Legacy HTML Features (nog steeds werkend)
Door backward compatibility werken oude HTML features nog steeds in moderne browsers:
<!-- Document.all - werkt nog steeds maar gebruik het niet -->
<script>
// Gebruik querySelector in plaats daarvan
const element = document.querySelector('.classname');
</script>
<!-- Forms collecties -->
<form name="myForm">
<input name="username" type="text">
</form>
<script>
// Legacy manier (werkt nog steeds)
document.forms.myForm.elements.username.value;
// Moderne manier (gebruik deze)
document.querySelector('form[name="myForm"] input[name="username"]').value;
</script>Quirks Mode vs Standards Mode
Het doctype bepaalt welke rendering mode de browser gebruikt:
<!-- MET doctype: Standards Mode (gebruik dit altijd) -->
<!DOCTYPE html>
<html>
<head>
<title>Moderne pagina</title>
</head>
<body>
<!-- Content -->
</body>
</html>
<!-- ZONDER doctype: Quirks Mode (gebruik NOOIT) -->
<html>
<body>
<!-- Dit triggert Internet Explorer 6 CSS compatibiliteit -->
</body>
</html>Best Practices & Tips
✅ Do's
- Gebruik altijd een doctype om quirks mode te vermijden
- Plaats scripts onderaan of gebruik
deferom HTML parsing niet te blokkeren - Hou layout berekeningen simpel - complexe layouts zijn duur voor de browser
- Gebruik media queries en container queries om layout van tevoren te bepalen
- Begrijp rendering engines - Chromium/Blink wordt gebruikt door Chrome, Edge, Vivaldi, Opera en meer
❌ Don'ts
- Geen scripts in de <head> zonder defer/async - dit blokkeert de hele pagina
- Vermijd layout thrashing - wijzig layout niet tijdens rendering
- Geen quirks mode - vergeet nooit je doctype
- Gebruik geen legacy features zoals
document.all,<blink>,<marquee>en<frameset>
Browser Geschiedenis & Engines
Belangrijke momenten:
- Tim Berners-Lee ontwikkelde de eerste browser (1990)
- Mosaic (1993) was de eerste user-friendly browser en introduceerde de
<img>tag - Internet Explorer was de eerste browser op macOS
- Konqueror (Linux) werd de basis voor Safari via WebKit
- WebKit werd later geforkt door Google naar Blink
Moderne rendering engines:
- Blink (Chromium): Chrome, Edge, Opera, Vivaldi, Brave
- WebKit: Safari
- Gecko: Firefox
Nieuwe browsers in ontwikkeling:
- Flow en Ladybird - onafhankelijke browsers die niet gebaseerd zijn op bestaande engines
Browser Architectuur
Belangrijke componenten:
- Rendering engine - verwerkt HTML, CSS en het DOM
- JavaScript engine - interpreteert JavaScript code (volledig gescheiden)
- Parser - leest HTML/CSS/JS streams en vertaalt naar browser instructies
- Layout engine - berekent hoe elementen op het scherm moeten worden weergegeven
Toegankelijkheid:
- AOM (Accessibility Object Model) - maakt webpaginas toegankelijk voor assistive technologies