Bliv gratis medlem
Et af problemerne ved at have javascript filer, er at de blokere for hentningen af andre filer. Hvilket vil sige at hvis når en Javascript fil bliver hentet, kan det ikke hentes andre filer på samme tid.
Da CSS er med til at opbygge og vise en hjemmeside, stopper opbygningen af hjemmesiden, når en javascript fil bliver hentet.
Af denne grund er det en god ting, at sætte den rigtige rækkefølge af filerne i ”head” området i en HTML fil.
Ikke nok med at opbygningen af selve hjemmesiden stopper, så kan hjemmesiden også blive hentet langsommere.
Her er et eksempel på hvordan dette er muligt:
I det øverste skema er CSS og Javascript filerne sat i den rigtige rækkefølge, hvilket for filerne til at blive hentet på 300ms.
Men hvorimod det nederste skema ikke er sat i en optimeret rækkefølge, der for filerne til at blive hentet 100ms langsommere.
Hvordan ser disse 2 eksempler ud i HTML.
Optimeret |
Ikke optimeret |
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css_test1.css" rel="stylesheet" /> <link href="css_test2.css" rel="stylesheet" /> <link href="css_test3.css" rel="stylesheet" /> <script src="js_test1.js"></script> <script src="js_test2.js"></script> <script src="js_test3.js"></script> <title>Optimeret</title> </head> |
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js_test1.js"></script> <link href="css_test1.css" rel="stylesheet" /> <link href="css_test2.css" rel="stylesheet" /> <script src="js_test2.js"></script> <script src="js_test3.js"></script> <link href="css_test3.css" rel="stylesheet" /> <title>Ikke optimeret</title> </head> |
Det er også muligt at få Javascript filerne, til at blive hentet parallelt med både CSS og billed filer. Men dette vil jeg skrive på et andet tidspunkt.
Opret bruger