JavaScript richtig im HTML-Code platzieren

closeThis post was published more than three months ago. Please note that the information offered here may no longer be current and valid. Therefore, please inform yourself about this topic elsewhere. If there is any new information, you can also send me a comment. Thank you so much!

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!