Script-placering

När du använder javascript och stylesheets på din sajt så är det brukligt att lägga dessa innanför <head>-taggen, men det är inte alltid den bästa lösningen när det gäller javascript.

Exempel:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Min sajt</title>
<link href="css/min-css-fil.css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/min-js-fil.js"></script>
</head>
<body>
<div>
Välkommen till min hemsida
</div>
</body>
</html>

En webbläsare läser html så som vi läser en text, uppifrån och ner. Men när webbläsaren stöter på en referens till en extern resurs, som en css-fil eller js-fil så kommer webbläsaren att stanna till där, kolla om referensen går att hämta och sedan hämta referensen om det är grönt ljus. Så när man tänker på alla filer som ska hämtas hem så kan det ta en liten stund innan allt är nere i besökarens dator och redo för visning.

HTTP-standarden för HTTP/1.1 sa tidigare att en webbläsare bara ska ha två öppna uppkopplingar per server vilket alltså innebar att när man skulle hämta fyra stylesheets och fyra javascript så hade vi alltså fyra (8/2) hämtningstillfällen som måste avslutas innan innehållet på sidan kunde renderas. Idag så kan de flesta webbläsare hämta hem sex resurser åt gången, men det är fortfarande ett begränsat antal, och det låser fortfarande upp visningen av sidan.

Hur löser man detta då? Jo, det är egentligen ganska enkelt. Man tar alla sina referenser till javascript som ligger i <head>-taggen och lägger dem istället precis innan </body>-taggen. På så sätt så behöver inte webbläsaren stanna och vänta på dessa script för att kunna börja ladda innehållet, och sålänge ingen av funktionerna i javascript filerna påverkar utseendet på webbsidan så kommer besökaren inte att märka någonting förutom en angenämare och snabbare vistelse på din sajt. Har man script som påverkar utseendet på sajten så kan man lägga endast dessa innanför <head>-taggen.

Vi nämnde stylesheets i början, hur ska vi göra med dem då? Jo, de ska ligga kvar innanför <head>-taggen eftersom vi vill att de ska laddas tidigt så att sajten ser ut som den ska redan från början.

Exempel:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Min sajt</title>
<link href="css/min-css-fil.css" rel="stylesheet" media="all">
<script type="text/javascript">
<!--
//Här kan vi lägga script som påverkar sidans utseende
//-->
</script>
</head>
<body>
<div>
Välkommen till min hemsida
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/min-js-fil.js"></script>
</body>
</html>

För att få ytterligare kontroll över när javascript ska köras så kan man använda sig att attributen async och defer.

Med attributet async så pausas inte hämtningen av html-sidan medan ditt javascript laddas ned, utan pausas bara medan javascripet körs, till skillnad från som i tidigare exempel utan attribut, då hämtningen av html-sidan pausas både vid hämtning och körning av javascriptet.

Exempel:

<script type="text/javascript" src="js/min-js-fil.js" async></script>

Med attributet defer så pausas inte hämtningen av html-sidan medan ditt javascript laddas ned, och javascriptet körs först när hela sidan är färdigladdad. Exempel:

<script type="text/javascript" src="js/min-js-fil.js" defer></script>

Om sidan ska stödja Internet Explorer 9 eller lägre bör du inte använde defer-attributet eftersom stödet i dessa webbläsare är väldigt dåligt.