Javascript

Viele Wege führen zum Ziel, doch nicht Jeder ist optimal. Hier werden die bestmöglichen Wege aufgeführt und erklärt.
Antworten
Doc Olson
Beiträge: 536
Registriert: Mo 10. Mai 2010, 08:54

Javascript

Beitrag von Doc Olson »

Es gibt mehrere Möglichkeiten, Javascript in ein Template einzubinden:

1. direktes Einbetten des Codes in HTML:

Code: Alles auswählen

<p>blah</p>
<script type="text/javascript">
<!--
alert('ich bin ein JS Popup');
-->
</script>
<p>blubb</p>
2. Einbinden externer Javascript-Dateien im <head> Bereich der Seite:

Code: Alles auswählen

<head>
<script type="text/javascript" src="includes/general.js"></script>
</head>
3. Einbinden externer Javascript-Dateien an beliebiger Stelle im HTML-Code:

Code: Alles auswählen

<p>blah</p>
<script type="text/javascript" src="includes/general.js"></script>
<p>blubb</p>
4. Einbinden externer Javascript-Dateien am ENDE des HTML Dokuments (vor </body>):

Code: Alles auswählen

<p>blubb</p>
<script type="text/javascript" src="includes/general.js"></script>
</body>
Funktionieren tun sie im Grunde Alle. Die beste Variante ist allerdings 4..

Warum ist das so?

1. Hier wird der gesamte Javascript Code bei jedem Aufruf der Seite mitgeladen. Bei einem Zweizeiler mag das nicht dramatisch sein, bei längerem Code kann das die Ladezeit einer Seite aber schon spürbar verlangsamen. Besser ist es, den Code in eine externe Datei auszulagern. Diese wird in der Regel vom Browser nur ein mal geladen und dann im Cache vorgehalten. Der JS-Code wird also nicht immer neu geladen.

2. Hier wird der Code zwar in eine externe Datei ausgelagert, allerdings wird dieser immer gleich zu Beginn der Seite geladen und ausgeführt bevor die weiteren Elemente der Seite aufgebaut werden. Dies verzögert den Seitenaufbau bzw. die Ladezeit.

3. Im Grunde das gleiche Problem, wie bei 2.

4. Hier wird der HTML-Quellcode komplett geladen und dargestellt. Erst dann folgt die Verarbeitung des JS-Codes.

DOCH ACHTUNG:

Man muss unterscheiden, ob es sich bei dem einzubindenen Code um Bibliotheken (Funktionen, Klassen) oder um konkrete Anweisungen handelt. Werden konkrete Anweisungen vom Browser geladen, werden diese unmittelbar ausgeführt und das kann zu Problemen führen.

Beispiel:

Code: Alles auswählen

<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
<!--
alert(document.getElementById('test').firstChild.data);
-->
</script>
<p id="test">Ich bin der Inhalt von 'test'.</p>
</body>
Das wird nicht funktionieren, weil <p id="test"> zum Zeitpunkt der Ausführung des JS-Codes noch nicht existiert.

Code: Alles auswählen

<html>
<head>
<title>Test</title>
</head>
<body>
<p id="test">Ich bin der Inhalt von 'test'.</p>
<script type="text/javascript">
<!--
alert(document.getElementById('test').firstChild.data);
-->
</script>
</body>
Dies hingegen würde funktionieren, weil das Element <p id="test"> bereits existiert zum Zeitpunkt der Ausführung.

Konkretes Beispiel: Einbindung der Javascript Bibliothek jQuery.

Im Ordner 'javascript' des Template-Ordners sollte eine Datei namens 'bottom.js.php' existieren. Wenn nicht, kann man diese einfach anlegen. Diese Datei wird stets am Ende eines Seitenaufbaus inkludiert. Alles, was man hier einträgt wird im Quellcode unmittelbar vor dem schließenden </body> Tag platziert. Dies ist eine normale PHP-Datei, was hier eingebaut wird, muss also nicht auf Javascript beschränkt sein.

Code: Alles auswählen

<?php

// Zunächst den relativen Pfad zu den Javascript-Dateien in einer Variable speichern.

$jspath = 'templates/' . CURRENT_TEMPLATE . '/javascript';

// jetzt können hier die einzubindenden JS-Dateien per echo ausgegeben werden
echo '<script type="text/javascript" src="' . $jspath . '/jquery-1.4.2.min.js"></script>'."\n";

// ggf. noch weitere jQuery Plugins
echo '<script type="text/javascript" src="' . $jspath . '/jquery.countdown.js"></script>'."\n";
echo '<script type="text/javascript" src="' . $jspath . '/jquery.countdown-de.js"></script>'."\n";
echo '<script type="text/javascript" src="' . $jspath . '/thickbox.js"></script>'."\n";

// zum Schluß(!) noch eine eigene JS-Datei, in der wir alle Anweisungen/Funktionsaufrufe platzieren
echo '<script type="text/javascript" src="' . $jspath . '/custom.js"></script>'."\n";
Wichtig ist die Reihenfolge. Die Plugins und die custom.js erwarten, dass die jQuery Bibliothek bereits geladen ist.

Die custom.js kann zum Beispiel so aussehen:

Code: Alles auswählen

// Funktion für den Aufruf des "Seite Drucken" Dialogs
function print_product(prd_id)
{
	window.open('print_product_info.php?products_id=' + prd_id, 'popup', 'toolbar=0, width=640, height=600');
}

/* 
konkrete Anweisungen, die die Seite per JS manipulieren. Diese dürfen erst ausgeführt werden, wenn das Laden der Seite vollständig abgeschloßen ist. Deswegen werden diese Anweisungen erst mit dem Ereignis "$(document).ready" ausgeführt. 
*/

$(document).ready(function() {
       alert('Die Webseite ist nun vollständig geladen');

       /* weitere Anweisungen hier */
});
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Javascript

Beitrag von Xantiva »

Yahoo hat sich vor einiger Zeit schon intensiv mit der "Performance von Webseiten" auseinander gesetzt: http://developer.yahoo.com/performance/rules.html
Grundsätzlich geht es dabei um die Frage: Was passiert in der Zeit zwischen dem Aufruf einer Webseite und der Anzeige der kompletten Webseite?

Wenn man keine gravierenden Schnitzer in der Programmierung / Datenbank gemacht hat, ist der Anteil für die Sammlung der Daten und die Erzeugung der Webseite eher gering. Sehr viel Zeit geht beim Laden der benötigten Komponenten wie CSS, Grafiken oder eben JavaScript drauf. (Beispiel JavaScript: http://developer.yahoo.com/performance/ ... #js_bottom) Mit Tools wie YSlow für den Firefox kann man seine eigene Webseite analysieren und den Aufbau des Templates entsprechend optimieren.

Ein schneller Seitenaufbau ist für den Besucher (bei Online-Shops = potentielle Kunden!) sehr angenehm. (Wer hat noch keine Seite verlassen, weil nach 10 Sekunden immer noch nichts zu sehen war?) Spätestens seit Google in den Webmaster Tools die Ladezeiten auswertet, sollte jedem klar sein, dass hier u. U. sehr viel Potential verborgen liegt.

Auf den Punkt gebracht:
  • CSS: Extern und am Anfang einbinden,
  • Anzahl der Grafiken reduzieren, ggf. mit Sprites arbeiten,
  • Javascript: minified, zusammenfassen und am Ende einbinden.
Wer noch an die Serverkonfiguration kommt, kann noch mehr machen: Komprimierung aktivieren, etc.

Ciao,
Mike
Mein Shop: http://www.basteln-selbermachen.de
Antworten