• Positionen spelar roll
  • Async och Defer
  • Jämförelse av prestanda
    • Ingen defer eller async, i huvudet
    • Ingen defer eller async, i kroppen
    • Med async, i huvudet
    • Med defer, i huvudet
  • Blockerar parsing
  • Blockerar rendering
  • domInteractive
  • Håller saker och ting i ordning
  • Säg bara till mig vilket sätt som är bäst

När du laddar in ett skript på en HTML-sida måste du vara försiktig för att inte skada sidans laddningsprestanda.

Ett skript inkluderas traditionellt i sidan på följande sätt:

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

När HTML-analysatorn hittar den här raden görs en förfrågan om att hämta skriptet, och skriptet exekveras.

När denna process är klar kan parsningen återupptas och resten av HTML kan analyseras.

Som du kan föreställa dig kan den här operationen ha en stor inverkan på sidans laddningstid.

Om skriptet tar lite längre tid på sig att ladda än väntat, t.ex. om nätverket är lite långsamt eller om du är på en mobil enhet och anslutningen är lite slarvig, kommer besökaren troligen att få se en tom sida tills skriptet har laddats och utförts.

Positionen spelar roll

När du först lär dig HTML får du veta att skripttaggar bor i <head>-taggen:

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

Som jag berättade tidigare, när analysatorn hittar den här raden, går den för att hämta skriptet och utför det. När den sedan är klar med denna uppgift går den vidare till att analysera kroppen.

Detta är dåligt eftersom det införs en stor fördröjning. En mycket vanlig lösning på det här problemet är att placera script-taggen längst ner på sidan, strax före den avslutande </body>-taggen.

Därigenom laddas och exekveras skriptet efter att hela sidan redan har parsats och laddats, vilket är en stor förbättring jämfört med head-alternativet.

Det här är det bästa du kan göra om du behöver stöd för äldre webbläsare som inte har stöd för två relativt nya funktioner i HTML: async och defer.

Async och Defer

Både async och defer är boolska attribut. De används på liknande sätt: 

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

Om du anger båda har async företräde i moderna webbläsare, medan äldre webbläsare som har stöd för defer men inte async återgår till defer.

Dessa attribut är endast meningsfulla när du använder skriptet i head-delen av sidan, och de är värdelösa om du placerar skriptet i body-foten som vi såg ovan.

Prestationsjämförelse

Ingen defer eller async, i huvudet

Här ser du hur en sida laddar ett skript utan vare sig defer eller async, som sätts i head-delen av sidan:

Parseringen pausas tills skriptet hämtas, och utförs. När detta är gjort återupptas parsningen.

Ingen defer eller async, i kroppen

Här är hur en sida laddar ett skript utan defer eller async, som sätts i slutet av body-taggen, precis innan den stängs:

Parsningen sker utan pauser, och när den är klar hämtas skriptet, och det exekveras. Parsingen görs innan skriptet ens hämtas, så sidan visas för användaren långt före det föregående exemplet.

Med asynkron, i huvudet

Här är hur en sida laddar ett skript med async, som sätts i head-taggen:

Skriptet hämtas asynkront och när det är klart pausas HTML-analysen för att exekvera skriptet, sedan återupptas den.

Med defer, i head

Här är hur en sida laddar ett skript med defer, satt i head taggen:

Skriptet hämtas asynkront, och det exekveras först när HTML-analysen är klar.

Parningen avslutas precis som när vi placerar skriptet i slutet av body-taggen, men totalt sett avslutas exekveringen av skriptet långt före, eftersom skriptet har hämtats parallellt med HTML-parningen.

Detta är alltså den vinnande lösningen när det gäller hastighet 🏆

Blockering av parsing

async blockerar parsingen av sidan medan defer inte gör det.

Blockering av rendering

Vare sig async eller defer garanterar något om blockering av rendering. Detta är upp till dig och ditt skript (se till exempel till att dina skript körs efter onLoad) händelsen.

domInteractive

Skript som är markerade med defer exekveras direkt efter domInteractive händelsen, vilket sker efter att HTML:n har laddats, parsats och DOM:n har byggts upp.

CSS och bilder ska vid denna tidpunkt fortfarande analyseras och laddas.

När detta är gjort kommer webbläsaren att avge domComplete-händelsen och därefter onLoad.

domInteractive är viktigt eftersom dess timing känns igen som ett mått på den upplevda laddningshastigheten. Se MDN för mer information.

Hålla ordning på saker och ting

Ett annat fall pro defer: skript markerade async exekveras i tillfällig ordning, när de blir tillgängliga. Skript markerade defer utförs (efter avslutad analys) i den ordning som de definieras i markeringen.

Säg mig bara det bästa sättet

Det bästa sättet att påskynda sidladdningen när du använder skript är att placera dem i head och lägga till ett defer-attribut till din script-tagg:

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

Det här är scenariot som utlöser den snabbare domInteractive-händelsen.

Med tanke på fördelarna med defer verkar det vara ett bättre val än async i en mängd olika scenarier.

Om du inte är nöjd med att fördröja den första renderingen av sidan ska du se till att det JavaScript du vill ha redan är utfört när sidan analyseras.

Ladda ner min kostnadsfria JavaScript Beginner’s Handbook

Mer browser tutorials:

  • Några användbara knep som finns i HTML5
  • Hur jag gjorde ett CMS-baserad webbplats att fungera offline
  • Den kompletta guiden till progressiva webbappar
  • Fetch API
  • Guiden till Push API
  • Kanalen för meddelanden API
  • Tillbehör till service Workers
  • Guiden till Cache API
  • Guiden till Notification API
  • Dyk ner i IndexedDB
  • Api:et för selektorer:
  • Effektivt ladda JavaScript med defer och async
  • Dokumentobjektmodellen (DOM)
  • Vävlagrings-API: API för lagring på webben: API för lagring på webben: API för lagring på webben: API för lagring på webben:
  • Lär dig hur HTTP-cookies fungerar
  • Historik-API:et
  • Vwebbformatet för bilder
  • XMLHttpRequest (XHR)
  • En djupgående SVG-handledning
  • Vad är data-URL:er
  • Roadmap för att lära sig webbplattformen
  • CORS, Cross-Origin Resource Sharing
  • Web Workers
  • Guiden requestAnimationFrame()
  • Vad är Doctype
  • Arbeta med DevTools Console och Console API
  • The Speech Synthesis API
  • Hur man väntar på händelsen DOM ready i vanlig JavaScript
  • Hur man lägger till en klass till en DOM element
  • Hur man loopar över DOM-element från querySelectorAll
  • Hur man tar bort en klass från ett DOM-element
  • Hur man kontrollerar om ett DOM-element har en klass
  • Hur man ändrar ett värde för en DOM-nod
  • Hur man lägger till en klickhändelse till en lista över DOM-element som returneras från querySelectorAll
  • WebRTC, Real Time Web API
  • Hur man får fram ett elements rullposition i JavaScript
  • Hur man ersätter ett DOM-element
  • Hur man endast accepterar bilder i ett fält för inmatningsfiler
  • Varför ska man använda en förhandsgranskningsversion av en webbläsare?
  • Blobobjektet
  • Filobjektet
  • Filläsningsobjektet
  • Filelistobjektet
  • ArrayBuffer
  • ArrayBufferView
  • URL-objektet
  • Typad Arrays
  • The DataView Object
  • The BroadcastChannel API
  • The Streams API
  • The FormData Object
  • The Navigator Object
  • Hur man använder Geolocation API
  • Hur man använder getUserMedia()
  • Hur man använder Drag and Drop API
  • Hur man arbetar med rullning på webbsidor
  • Hantering av formulär i JavaScript
  • Tangentbordshändelser
  • Mouse händelser
  • Touch-händelser
  • Hur tar man bort alla barn från ett DOM-element
  • Hur skapar man ett HTML-attribut med vanilla Javascript
  • Hur kontrollerar man om en kryssruta är markerad med JavaScript?
  • Hur man kopierar till urklipp med hjälp av JavaScript
  • Hur man inaktiverar en knapp med hjälp av JavaScript
  • Hur man gör en sida redigerbar i webbläsaren
  • Hur man gör en sida redigerbar i webbläsaren
  • Hur man gör en sida redigerbar med hjälp av JavaScript. få fram värden för frågesträngar i JavaScript med URLSearchParams
  • Hur man tar bort all CSS från en sida på en gång
  • Hur man använder insertAdjacentHTML
  • Safari, varna innan du slutar
  • Hur du lägger till en bild i DOM med JavaScript
  • Hur du återställer ett formulär
  • Hur du använder Google Fonts

By: adminPosted on

Lämna ett svar

Din e-postadress kommer inte publiceras.