- De positie doet ertoe
- Async en Defer
- Prestatievergelijking
- Geen defer of async, in de head
- Geen defer of async, in de body
- Met async, in de head
- Met defer, in de head
- Blocking parsing
- Blocking rendering
- domInteractive
- Dingen op een rijtje
- Geef me de beste manier
Wanneer je een script op een HTML-pagina laadt, moet je oppassen dat je de laadprestaties van de pagina niet schaadt.
Een script wordt traditioneel op deze manier in de pagina opgenomen:
<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Wanneer de HTML-parser deze regel vindt, wordt een verzoek gedaan om het script op te halen, en wordt het script uitgevoerd.
Als dit proces eenmaal is voltooid, kan het parseren worden hervat en kan de rest van de HTML worden geanalyseerd.
Zoals u zich kunt voorstellen, kan deze bewerking een enorme invloed hebben op de laadtijd van de pagina.
Als het iets langer duurt voordat het script is geladen dan verwacht, bijvoorbeeld als het netwerk een beetje traag is of als u op een mobiel apparaat zit en de verbinding een beetje slordig is, zal de bezoeker waarschijnlijk een lege pagina zien totdat het script is geladen en uitgevoerd.
De positie is belangrijk
Wanneer u voor het eerst HTML leert, wordt u verteld dat script-tags in de <head>-tag staan:
<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>Zoals ik u eerder heb verteld, wanneer de parser deze regel vindt, haalt hij het script op en voert het uit. Als hij hiermee klaar is, gaat hij verder met het ontleden van de body.
Dit is een slechte zaak, omdat er veel vertraging optreedt. Een veelgebruikte oplossing voor dit probleem is om de script-tag onderaan de pagina te plaatsen, vlak voor de afsluitende </body>-tag.
Door dit te doen, wordt het script geladen en uitgevoerd nadat de hele pagina al is geparseerd en geladen, wat een enorme verbetering is ten opzichte van het head-alternatief.
Dit is het beste wat u kunt doen als u oudere browsers moet ondersteunen die twee relatief recente functies van HTML niet ondersteunen: async en defer.
Async en Defer
Zowel async als defer zijn boolean attributen. Hun gebruik is vergelijkbaar:
<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script><script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Als u beide specificeert, heeft async voorrang op moderne browsers, terwijl oudere browsers die defer wel maar async niet ondersteunen, zullen terugvallen op defer.
Deze attributen hebben alleen zin als u het script in het head gedeelte van de pagina gebruikt, en ze zijn nutteloos als u het script in de body voettekst zet, zoals we hierboven zagen.
Vergelijking van prestaties
Geen defer of async, in de head
Hier ziet u hoe een pagina een script laadt zonder defer of async, in het head gedeelte van de pagina:
Het parseren wordt gepauzeerd totdat het script is opgehaald, en uitgevoerd. Zodra dit is gebeurd, wordt het parseren hervat.
Geen defer of async, in de body
Hier ziet u hoe een pagina een script laadt zonder defer of async, gezet aan het eind van de body tag, vlak voor het sluiten:
Het parseren gebeurt zonder pauzes, en als het klaar is, wordt het script opgehaald, en uitgevoerd. Het parseren wordt gedaan voordat het script zelfs maar is gedownload, zodat de pagina veel eerder aan de gebruiker wordt getoond dan in het vorige voorbeeld.
Met async, in de head
Hier ziet u hoe een pagina een script laadt met async, gezet in de head tag:
Het script wordt asynchroon opgehaald, en als het klaar is wordt het HTML parseren gepauzeerd om het script uit te voeren, waarna het weer wordt hervat.
Met defer, in de head
Hier ziet u hoe een pagina een script laadt met defer, gezet in de head tag:
Het script wordt asynchroon opgehaald, en het wordt pas uitgevoerd als de HTML parsing klaar is.
Het parseren eindigt net als wanneer we het script aan het eind van de body-tag zetten, maar in het algemeen eindigt de uitvoering van het script ruim eerder, omdat het script parallel aan het parseren van de HTML is opgehaald.
Dit is dus de winnende oplossing in termen van snelheid 🏆
Blocking parsing
async blokkeert het parsen van de pagina, terwijl defer dat niet doet.
Blocking rendering
Noch async noch defer garanderen iets over het blokkeren van rendering. Dit is aan u en uw script (bijvoorbeeld ervoor zorgen dat uw scripts worden uitgevoerd na de onLoad) gebeurtenis.
domInteractive
Scripts gemarkeerd met defer worden uitgevoerd direct na de domInteractive gebeurtenis, die gebeurt nadat de HTML is geladen, geparseerd en het DOM is gebouwd.
CSS en afbeeldingen moeten op dit punt nog worden geparseerd en geladen.
Als dit is gebeurd, zendt de browser het domComplete-event uit, en vervolgens onLoad.
domInteractive is belangrijk omdat de timing ervan wordt herkend als een maatstaf voor de waargenomen laadsnelheid. Zie de MDN voor meer.
Dingen op orde houden
Een ander geval pro defer: scripts gemarkeerd met async worden in toevallige volgorde uitgevoerd, wanneer ze beschikbaar komen. Met defer gemarkeerde scripts worden uitgevoerd (nadat het parsen is voltooid) in de volgorde waarin ze in de markup zijn gedefinieerd.
Vertel mij de beste manier
Het beste wat u kunt doen om uw pagina sneller te laden wanneer u scripts gebruikt, is om ze in de head te zetten, en een defer attribuut aan uw script tag toe te voegen:
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Dit is het scenario dat de snellere domInteractive gebeurtenis triggert.
Gezien de voordelen van defer, lijkt het een betere keuze dan async in een aantal scenario’s.
Tenzij u het prima vindt om de eerste render van de pagina te vertragen, moet u ervoor zorgen dat wanneer de pagina wordt geparsed het JavaScript dat u wilt hebben al is uitgevoerd.
Download mijn gratis JavaScript-beginnerhandboek
Meer browserhandleidingen:
- Een aantal handige trucs beschikbaar in HTML5
- Hoe ik een CMS-gebaseerde website offline liet werken
- De complete gids voor Progressive Web Apps
- De Fetch API
- De Push API Guide
- De Channel Messaging API
- Service Workers Tutorial
- De Cache API Guide
- De Notification API Guide
- Dive in IndexedDB
- De Selectors API: querySelector en querySelectorAll
- Efficiënt JavaScript laden met defer en async
- Het Document Object Model (DOM)
- De Web Storage API: Lokale opslag en sessie opslag
- Leer hoe HTTP Cookies werken
- De Geschiedenis API
- Het WebP Afbeeldingsformaat
- XMLHttpRequest (XHR)
- Een diepgaande SVG tutorial
- Wat zijn Data URLs
- Roadmap om het Web Platform te leren
- CORS, Cross-Origin Resource Sharing
- Web Workers
- De requestAnimationFrame() gids
- Wat is het Doctype
- Werken met de DevTools Console en de Console API
- De Spraaksynthese API
- Hoe te wachten op de DOM ready gebeurtenis in gewoon JavaScript
- Hoe een klasse toe te voegen aan een DOM element
- Hoe lus je over DOM-elementen van querySelectorAll
- Hoe verwijder je een klasse van een DOM-element
- Hoe controleer je of een DOM-element een klasse heeft
- Hoe wijzig je de waarde van een DOM-knooppunt
- Hoe voeg je een klikgebeurtenis toe aan een lijst van DOM-elementen die zijn geretourneerd van querySelectorAll
- WebRTC, de Real Time Web API
- Hoe verkrijg je de scroll-positie van een element in JavaScript
- Hoe vervang je een DOM-element
- Hoe accepteer je alleen afbeeldingen in een invoerbestandsveld
- Waarom gebruik je een preview-versie van een browser?
- Het Blob-object
- Het Bestandsobject
- Het FileReader-object
- Het FileList-object
- ArrayBuffer
- ArrayBufferView
- Het URL-object
- Getypeerde Arrays
- Het DataView Object
- De BroadcastChannel API
- De Streams API
- Het FormData Object
- Het Navigator Object
- Hoe de Geolocation API te gebruiken
- Hoe u getUserMedia()
- Hoe u de Drag and Drop API
- Hoe u met scrollen op webpagina’s werkt
- Handelen met formulieren in JavaScript
- Toetsenbordgebeurtenissen
- Muis events
- Touch events
- Hoe verwijder je alle kinderen uit een DOM-element
- Hoe maak je een HTML-attribuut met vanilla Javascript
- Hoe controleer je of een checkbox is aangevinkt met JavaScript?
- Hoe kopieer ik naar het klembord met JavaScript
- Hoe schakel ik een knop uit met JavaScript
- Hoe maak ik een pagina bewerkbaar in de browser
- Hoe query string-waarden te krijgen in JavaScript met URLSearchParams
- Hoe alle CSS in één keer van een pagina te verwijderen
- Hoe insertAdjacentHTML te gebruiken
- Safari, waarschuwen voor afsluiten
- Hoe een afbeelding aan het DOM toevoegen met JavaScript
- Hoe een formulier resetten
- Hoe Google Fonts te gebruiken