Efficiënte strategieën voor scriptladen
Beheers technieken om JavaScript asynchroon te laden, niet-kritieke scripts uit te stellen en modulepatronen effectief te gebruiken.
Efficiënte strategieën voor scriptladen is een gratis Webprestatieoptimalisatie en Lighthouse-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webprestatieoptimalisatie en Lighthouse. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Snelle scripts, snelle pagina's
JavaScript maakt interactieve webervaringen mogelijk. Maar als het niet efficiënt wordt geladen, kan het je website aanzienlijk vertragen.
Een langzaam ladend script kan het weergeven van je pagina blokkeren, waardoor gebruikers langer moeten wachten voordat ze de inhoud kunnen zien en ermee kunnen werken.
In deze les verkennen we strategieën om scripts slim te laden, zodat je gebruikers een soepele, snelle ervaring krijgen.
Scripts blokkeren het weergeven
Wanneer een browser standaard een <script>-tag in je HTML tegenkomt, pauzeert hij het parsen van het HTML-document.
De browser haalt het script op, parseert het en voert het onmiddellijk uit. Pas nadat het script klaar is, kan het parsen van de HTML worden hervat.
Dit kan een grote flessenhals zijn, vooral bij grote scripts. Probeer dit eenvoudige script uit te voeren om te zien hoe het een blokkerende bewerking kan simuleren:
console.log("HTML parsing paused (simulated).");
// Simulate a computationally heavy task
let sum = 0;
for (let i = 0; i < 100000000; i++) {
sum += i;
}
console.log("Blocking script finished. Sum:", sum);
console.log("HTML parsing resumes (simulated).");`async`: parallel laden
Het attribuut async geeft de browser opdracht het script parallel met het parsen van het HTML-document te downloaden.
- Blokkeert niet: het parsen van de HTML gaat door terwijl het script wordt gedownload.
- Onmiddellijk uitvoeren: het script wordt uitgevoerd zodra het is gedownload, zonder te wachten tot het parsen van de HTML is voltooid.
- Volgorde niet gegarandeerd: scripts met
asynckunnen in elke volgorde worden uitgevoerd, mogelijk niet in de volgorde waarin ze in de HTML staan.
Gebruik async voor onafhankelijke scripts, zoals analyses of advertenties, die niet afhankelijk zijn van andere scripts of van de volledige DOM.
`async` in actie
Stel je voor dat dit script wordt geladen met <script async src="my-async-script.js"></script>.
Het wordt op de achtergrond gedownload en zodra het klaar is, meteen uitgevoerd. Andere inhoud van de pagina kan ondertussen verder laden.
Zie je hoe "Page content continues..." in een echte browsersituatie vóór "Async script finished" kan verschijnen, omdat het script niets blokkeert?
console.log("Async script started downloading.");
// Simulate fetching data or setting up a listener
setTimeout(() => {
console.log("Async script finished execution.");
}, 50); // Small delay to simulate download + execution
console.log("Page content continues to load in parallel.");`defer`: uitvoeren na de HTML
Het attribuut defer zorgt er ook voor dat scripts niet blokkeren, maar de uitvoering vindt op een ander moment plaats.
- Blokkeert niet: net als bij
asyncwordt het script parallel met het parsen van de HTML gedownload. - Uitvoeren na de HTML: het script wordt pas uitgevoerd nadat het HTML-document volledig is geparseerd.
- Volgorde gegarandeerd: scripts met
deferworden uitgevoerd in precies de volgorde waarin ze in de HTML staan.
defer is ideaal voor scripts die afhankelijk zijn van de volledige DOM, zoals interactieve elementen of formuliercontroles, maar die het aanvankelijke weergeven niet hoeven te blokkeren.
`defer` in actie
Dit script, geladen met <script defer src="my-defer-script.js"></script>, zou wachten tot alle HTML is verwerkt voordat het wordt uitgevoerd.
Het is ideaal voor scripts die moeten samenwerken met elementen op de pagina, zonder te verhinderen dat de gebruiker eerst de inhoud ziet.
console.log("Defer script started downloading.");
// Simulate DOM manipulation or event setup
setTimeout(() => {
// In a real browser, document.getElementById would now work.
console.log("Defer script finished execution after HTML parsed.");
}, 50); // Small delay
console.log("HTML parsing completed (simulated) before defer script runs.");Kies je strategie
Het is cruciaal voor optimale prestaties dat je de verschillen tussen async en defer begrijpt:
async: voor onafhankelijke scripts die niet afhankelijk zijn van de gereedheid van de DOM of van de volgorde van andere scripts, zoals analyses en widgets van derden.defer: voor scripts die ervan afhankelijk zijn dat de DOM volledig is geparsed, of die afhankelijk zijn van de uitvoeringsvolgorde van andere uitgestelde scripts, zoals interactie met de gebruikersinterface en aangepaste controles.- Geen attribuut: blokkeert het weergeven. Gebruik dit alleen voor kritieke scripts die vóór al het andere moeten worden uitgevoerd.
ES-modules: moderne scripts
ES-modules (ECMAScript-modules) bieden een gestandaardiseerd systeem om JavaScript-code te organiseren in afzonderlijke bestanden die functionaliteit kunnen importeren en exporteren.
Wanneer je <script type="module"> gebruikt, behandelt de browser je script anders:
- Standaard uitgesteld: modules worden automatisch uitgesteld, waardoor ze het parsen van de HTML niet blokkeren.
- Strikte modus: modules worden standaard in de strikte modus uitgevoerd.
- Eigen bereik: variabelen en functies die op het hoogste niveau van een module zijn gedeclareerd, vallen binnen het bereik van die module en zijn niet globaal.
Hoe modules worden geladen
ES-modules gebruiken import om functionaliteit uit andere bestanden op te halen en export om functionaliteit beschikbaar te maken.
De browser verwerkt het laden van modules efficiënt: afhankelijkheden worden parallel opgehaald en in de juiste volgorde uitgevoerd nadat de HTML is geparsed.
Hier zie je de basis van de modulesyntaxis:
// Example: myUtils.js
export const PI = 3.14159;
export function multiply(a, b) {
return a * b;
}
// Example: main.js (loaded with <script type="module">)
import { PI, multiply } from './myUtils.js';
console.log("Module imported successfully.");
console.log("PI value:", PI);
console.log("5 * 10 =", multiply(5, 10));Keuzes voor het laden van scripts
Je bouwt een website en moet meerdere JavaScript-bestanden laden. Welke van de volgende uitspraken over efficiënt scripts laden zijn WAAR?
Samenvatting: laden onder de knie
Goed gedaan! Je hebt geleerd hoe je JavaScript efficiënt laadt:
- Standaardscripts blokkeren het parsen, waardoor je pagina trager wordt.
- Met het attribuut
asynckunnen scripts parallel worden gedownload en onmiddellijk worden uitgevoerd. Dit is ideaal voor onafhankelijke scripts. - Het attribuut
deferdownloadt scripts ook parallel, maar wacht met uitvoeren tot de HTML volledig is geparsed en behoudt daarbij de volgorde. - ES-modules (
<script type="module">) bieden een moderne, gestructureerde manier om code te organiseren en gedragen zich standaard als uitgestelde scripts.
Door deze strategieën toe te passen, kun je de waargenomen en werkelijke laadtijd van je website aanzienlijk verbeteren!
Leer Webprestatieoptimalisatie en Lighthouse met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Efficiënte strategieën voor scriptladen” gratis?
Ja — de volledige tekst van “Efficiënte strategieën voor scriptladen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Webprestatieoptimalisatie en Lighthouse wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Wat leer ik in “Efficiënte strategieën voor scriptladen”?
Beheers technieken om JavaScript asynchroon te laden, niet-kritieke scripts uit te stellen en modulepatronen effectief te gebruiken. Je oefent met Webprestatieoptimalisatie en Lighthouse door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webprestatieoptimalisatie en Lighthouse te beginnen?
Ervaring vooraf is niet nodig. Webprestatieoptimalisatie en Lighthouse op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Efficiënte strategieën voor scriptladen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webprestatieoptimalisatie en Lighthouse?
Ja. Elke les over Webprestatieoptimalisatie en Lighthouse bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- JavaScript-payload verkleinen
- Efficiënte strategieën voor scriptladen
- Web Workers en verwerking buiten de hoofdthread
- Code splitting en lazy loading