JavaScript richtig im HTML-Code platzieren

This blog post has been published on 2010-07-26 and may be out of date.

Zurück zur “Webseiten beschleunigen” – Übersicht

3.) JavaScript richtig im HTML-Code platzieren

Zudem sollte man sich überlegen wo man seinen JavaScript Code im HTML-Code platziert, da irgendwelche Effekte für das Menü usw. auch später geladen werden können, so dass erst-einmal die Webseite (Bilder… ) geladen werden kann, sollte jedoch vor dem  </body> platziert werden.


Im allgemeinen kann man jedoch sagen, dass CSS- sowie Javascript-Daten zusammen-gefasst werden können, um HTTP-Requests an dem Server zu verringern. So sollte man also seine CSS- und Javascript-Daten, welche gemeinsam jedoch in verschiedenen Dateien auf einer Webseite genutzt werden, jeweils zu einer einzigen Datei zusammengefasst werden.


Beispiel (ganz schlecht):

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />< script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

Hier wird der Download der Dateien stylesheet2.css und stylesheet3.css blockiert, weil die JS-Dateien dazwischen den HTML-Baum verändern könnten.



Beispiel (besser aber noch immer schlecht):

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>

In diesem Beispiel kann man schon mal 100ms einsparen, jedoch können Javascript-Daten nicht parallel heruntergeladen werden…



Beispiel (auch schlecht):

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" > document.write("Hello world!");</script>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

Zuerst wird die Ausführung des Inline-Style-Befehls durch stylesheet1.css verzögert. Anschließend verhindert die Inline-Anweisung wiederum, dass die Stylesheets parallel heruntergeladen werden können.


Beispiel (gut):

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" > document.write("Hello world!");</script>
</head>


Zuerst alle externen Ressourcen einbinden. Alle werden parallel heruntergeladen. Anschließend das Inline-Script. Natürlich sollte das JavaScript möglichst weit unten in den Body stehen, da es genauso das laden von Bildern verzögert.


weitere derartige Beispiele:
code.google.com


Mit folgendem Code können auch JavaScript-Daten parallel geladen werden. Einfach das Array anpassen und fertig…

<script type="text/javascript"> (function() {
var s = [
"/javascripts/script1.js",
"/javascripts/script2.js",
"/javascripts/script3.js",
"/javascripts/script4.js",
"/javascripts/script5.js"
];
var sc = "script", tp = "text/javascript", sa = "setAttribute", doc = document, ua = window.navigator.userAgent;
for(var i=0, l=s.length; i<l; ++i) {
if(ua.indexOf("MSIE")!==-1 || ua.indexOf("WebKit")!==-1) {
doc.writeln("<" + sc + " type="" + tp + "" src="" + s[i] + "" defer></" + sc + "<");
t[sa]("src", s[i]);
t[sa]("type", tp);
doc.getElementsByTagName("head")[0].appendChild(t);
} else {
var t=doc.createElement(sc);
t.setAttribute("src", s[i]);
t.setAttribute("type", tp);
doc.getElementsByTagName("head")[0].appendChild(t);
}
}
})();
</script>


Außerdem könnte man JavaScript Dateien dynamisch nachladen, so dass diese nur geladen werden wenn man diese auch braucht.

Include ("com.iskitz.ajile.examples.IncludeExample");
function testInclude()
{
if("undefined" != typeof com.iskitz.ajile.examples)
if("undefined" != typeof com.iskitz.ajile.examples.IncludeExample)
com.iskitz.ajile.examples.IncludeExample();
else alert( "Include test was unsuccessful :(nn"
+ "Failed to Include [ com.iskitz.ajile.examples.IncludeExample.js ]");
}
/** InludeExample.js: **********************************************************/
Namespace ("com.iskitz.ajile.examples");
com.iskitz.ajile.examples.IncludeExample = function()
{
var wasImported = typeof window["IncludeExample"] != "undefined";
alert( "[ com.iskitz.ajile.examples.IncludeExample ] was "
+ (wasImported ? "Included *and* Imported." : "successfully Included!"));
};

weitere derartige Beispiele:
ajile.iskitz.com


Tipps:

  • alle CSS-Datei per link-tag im Header-Bereich direkt hintereinander schreiben
  • alle Script-Tags direkt vor Body-Bereich (wenn möglich)
  • möglichst keine JS-Anweisungen (inline oder extern) zwischen CSS-Dateien setzen
  • keine JS-Inline-Anweisungen zwischen mehreren Referenzierungen auf JS-Dateien
  • JS-Inline-Anweisungen vermeiden, da diese vom Browser nicht als Datei zwischengespeichert werden können

Published by

voku

Lars Moelleken | Ich bin root, ich darf das!

%d bloggers like this: