• Positionen er vigtig
  • Async og defer
  • Sammenligning af ydeevne
    • Ingen defer eller async, i hovedet
    • Ingen defer eller async, i kroppen
    • Med async, i hovedet
    • Med defer, i head
  • Blokerer parsing
  • Blokerer rendering
  • domInteractive
  • Holder tingene i orden
  • Sig mig den bedste måde

Når du indlæser et script på en HTML-side, skal du være forsigtig med ikke at skade sidens indlæsningspræstation.

Et script indgår traditionelt i siden på denne måde:

<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Når HTML-parseren finder denne linje, vil der blive fremsat en anmodning om at hente scriptet, og scriptet bliver udført.

Når denne proces er færdig, kan parsningen genoptages, og resten af HTML’en kan analyseres.

Som du kan forestille dig, kan denne operation have stor betydning for sidens indlæsningstid.

Hvis scriptet tager lidt længere tid at indlæse end forventet, f.eks. hvis netværket er lidt langsomt, eller hvis du er på en mobilenhed, og forbindelsen er lidt sløj, vil den besøgende sandsynligvis se en tom side, indtil scriptet er indlæst og udført.

Positionen er vigtig

Når man først lærer HTML, får man at vide, at script-tags bor i <head>-tagget:

<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>

Som jeg fortalte tidligere, når parseren finder denne linje, går den hen og henter scriptet og eksekverer det. Når den så er færdig med denne opgave, går den videre til at parse kroppen.

Dette er dårligt, fordi der indføres en stor forsinkelse. En meget almindelig løsning på dette problem er at placere script-tagget nederst på siden, lige før det afsluttende </body>-tag.

Derved indlæses og udføres scriptet, efter at hele siden allerede er analyseret og indlæst, hvilket er en stor forbedring i forhold til head-alternativet.

Dette er det bedste, du kan gøre, hvis du skal understøtte ældre browsere, der ikke understøtter to relativt nye funktioner i HTML: async og defer.

Async og Defer

Både async og defer er boolske attributter. Deres brug er ens: 

<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script>
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Hvis du angiver begge dele, har async forrang i moderne browsere, mens ældre browsere, der understøtter defer, men ikke async, vil falde tilbage på defer.

Disse attributter giver kun mening, når du bruger scriptet i head-delen af siden, og de er ubrugelige, hvis du placerer scriptet i body-footeren, som vi så ovenfor.

Performance sammenligning

Ingen defer eller async, i head

Her er, hvordan en side indlæser et script uden hverken defer eller async, sat i head-delen af siden:

Den parsing er sat på pause, indtil scriptet er hentet, og eksekveret. Når dette er gjort, genoptages parsningen.

Ingen defer eller async, i body

Sådan indlæser en side et script uden defer eller async, sat i slutningen af body-taggen, lige før den lukkes:

Parsningen udføres uden pauser, og når den er færdig, hentes scriptet og udføres. Parsingen sker, før scriptet overhovedet hentes, så siden vises for brugeren langt før det foregående eksempel.

Med asynkron, i head

Sådan indlæser en side et script med async, sat i head-tagget:

Scriptet hentes asynkront, og når det er færdigt, sættes HTML-parsningen på pause for at udføre scriptet, hvorefter den genoptages.

Med defer, i head

Her er hvordan en side indlæser et script med defer, sat i head-tagget:

Scriptet hentes asynkront, og det udføres først, når HTML-parsningen er færdig.

Indlæsningen afsluttes ligesom når vi sætter scriptet i slutningen af body-tagget, men overordnet set afsluttes udførelsen af scriptet længe før, fordi scriptet er blevet hentet parallelt med HTML-indlæsningen.

Det er altså den vindende løsning med hensyn til hastighed 🏆

Blokering af parsing

async blokerer for parsing af siden, mens defer ikke gør det.

Blokering af rendering

Hverken async eller defer garanterer noget om blokering af rendering. Det er op til dig og dit script (sørg f.eks. for, at dine scripts køres efter onLoad) hændelsen.

domInteractive

Scripts markeret defer udføres lige efter domInteractive hændelsen, hvilket sker, efter at HTML’en er indlæst, analyseret og DOM’en er opbygget.

CSS og billeder skal på dette tidspunkt stadig parses og indlæses.

Når dette er gjort, udsender browseren domComplete-hændelsen og derefter onLoad.

domInteractive er vigtig, fordi dens timing anerkendes som et mål for den opfattede indlæsningshastighed. Se MDN for mere.

Holder tingene i orden

Et andet tilfælde pro defer: scripts markeret async udføres i tilfældig rækkefølge, når de bliver tilgængelige. Skripter markeret defer udføres (efter endt parsing) i den rækkefølge, som de er defineret i markup’en.

Sig mig den bedste måde

Det bedste du kan gøre for at fremskynde indlæsningen af din side, når du bruger scripts, er at placere dem i head og tilføje en defer-attribut til dit script-tag:

<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Dette er det scenarie, der udløser den hurtigere domInteractive-hændelse.

I betragtning af fordelene ved defer synes det at være et bedre valg end async i en række scenarier.

Medmindre du har det fint med at forsinke den første gengivelse af siden, skal du sørge for, at det ønskede JavaScript allerede er udført, når siden analyseres.

Download min gratis JavaScript Beginner’s Handbook

Mere browservejledninger:

  • Nogle nyttige tricks, der er tilgængelige i HTML5
  • Sådan har jeg lavet et CMS-baseret websted til at fungere offline
  • Den komplette guide til Progressive Web Apps
  • Den Fetch API
  • Guiden til Push API
  • Den Channel Messaging API
  • Service Workers Tutorial
  • Guide til Cache API
  • Guide til Notification API
  • Dyk ned i IndexedDB
  • Selektorer API:
  • Indlæs JavaScript effektivt med defer og async
  • Dokumentobjektmodellen (DOM)
  • Weblagrings-API’en:
  • Lær, hvordan HTTP-cookies fungerer
  • Historik-API’et
  • WebP-billedformatet
  • XMLHttpRequest (XHR)
  • En dybdegående SVG-vejledning
  • Hvad er data-URL’er
  • Køreplan for læring af webplatformen
  • CORS, Cross-Origin Resource Sharing
  • Web Workers
  • Guide til requestAnimationFrame()
  • Hvad er Doctype
  • Arbejde med DevTools Console og Console API’et
  • Speech Synthesis API’et
  • Sådan venter du på DOM ready-hændelsen i almindeligt JavaScript
  • Sådan tilføjer du en klasse til en DOM element
  • Sådan slynger du over DOM-elementer fra querySelectorAll
  • Sådan fjerner du en klasse fra et DOM-element
  • Sådan kontrollerer du, om et DOM-element har en klasse
  • Sådan ændrer du en DOM-knudeværdi
  • Sådan tilføjer du en klikbegivenhed til en liste over DOM-elementer, der returneres fra querySelectorAll
  • WebRTC, Real Time Web API
  • Sådan får du et elements scrollposition i JavaScript
  • Sådan erstatter du et DOM-element
  • Sådan accepterer du kun billeder i et inputfilfelt
  • Hvorfor skal du bruge en preview-version af en browser?
  • Blob-objektet
  • Filobjektet
  • Filelæserobjektet
  • Filelisteobjektet
  • ArrayBuffer
  • ArrayBufferView
  • Det URL-objekt
  • Typet Arrays
  • Objektet DataView
  • API’en BroadcastChannel
  • API’en Streams
  • Objektet FormData
  • Objektet Navigator
  • Hvordan man bruger API’en Geolocation
  • Hvordan man bruger API’en Geolocation
  • Sådan bruger du getUserMedia()
  • Sådan bruger du Drag and Drop API
  • Sådan arbejder du med rulning på websider
  • Håndtering af formularer i JavaScript
  • Tastaturbegivenheder
  • Mus events
  • Touch events
  • Sådan fjerner du alle børn fra et DOM-element
  • Sådan opretter du en HTML-attribut ved hjælp af vanilla Javascript
  • Sådan kontrollerer du, om en afkrydsningsboks er markeret ved hjælp af JavaScript?
  • Sådan kopierer man til udklipsholderen ved hjælp af JavaScript
  • Sådan deaktiverer man en knap ved hjælp af JavaScript
  • Sådan gør man en side redigerbar i browseren
  • Sådan gør man en side redigerbar i browseren
  • Hvordan at få query string-værdier i JavaScript med URLSearchParams
  • Sådan fjerner du al CSS fra en side på én gang
  • Sådan bruger du insertAdjacentHTML
  • Safari, advarsel før afslutning
  • Sådan tilføjer du et billede til DOM’en ved hjælp af JavaScript
  • Sådan nulstiller du en formular
  • Sådan bruger du Google Fonts

By: adminPosted on

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.