JavaScript richtig im HTML-Code platzieren

closeDieser Beitrag wurde vor mehr als drei Monaten veröffentlicht. Bedenke bitte, dass die hier angebotene Information nicht mehr aktuell und gültig sein könnte. Informiere dich daher bitte auch an anderer Stelle über dieses Thema. Sollten sich neue Informationen ergeben haben, so kannst du mich auch gerne auf diese über einen Kommentar hinweisen. Vielen Dank!

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

  • http://www.markus-arlt.de/ Markus

    Auf mehrere Domains verteilen ist auch ganz gut… Also Scripts eine Domains, Bilder eine Domain und eben die normale Domain der Seite.

    • Daniel

      Ganz auf Inlineanweisungen zu verzichten ist kaum möglich, ist es dann besser auch kleinste Anweisungen auszulagern?

      • Markus

        Kommt natürlich auch darauf an wieviel es ist. Es gibt Fälle da sollte man das Stylesheet sogar besser inline machen, wenn es nur sehr wenig ist. Aber bei Scripts heißt es ja nicht das Du für jede Anweisung eine .js Datei erstellst, Du kannst ja locker alles in eine zum Beispiel scripts.js packen.

        • Daniel

          Ich stecke noch ein wenig in den Anfängerschuhen was JS angeht. Verstehe ich es richtig, dass ich Element bezogene Funktionen (document.getElementById) lieber inline schreiben sollte? Zumindest muss ich es ja wenn das Element vor der Einbindung der Datei nicht auftaucht oder?
          Danke Marcus.