Um diesen Faktor zu minimieren, kann man jedoch folgende Lösungen einsetzen:

Compressoren

Compressoren analysieren den Quellcode einer Datei und entfernen Zeilenumbrüche, -einschübe und kommentare. Zudem werden Variablen- bzw. Funktionsnamen gegen einzelne Buchstaben bzw. Zahlen ausgetauscht. Die eigentlichen Namen, gehen hierbei jedoch nicht verloren, sondern werden in ein separates Index-Objekt ausgelagert. Das so entstandene Konstrukt wird in eine eval-Funktion gepackt, so dass der entstandene String vom Browser interpretiert werden kann.

Tools:

JavaScript-Online-Compressor: dean.edwards.name

Java-Compressor: YUI Compressor

gzip

gzip ist ein Kompressions-Format, dass von jedem gängigen Browser gelesen und ausgewertet werden kann. Eine JavaScript-Datei muss hierzu nur als gzip-Archiv verpackt werden und kann danach wie eine normale JavaScript Datei in den HTML-Quellcode eingebunden werden. Wichtig hierbei ist jedoch, dass die Endung “gz” nicht mit angegeben wird.

Beispiel:

//Einbindung der Datei foo.js.gz
<script src="foo.js" type="text/javascript"></script>

Tools & Links:

gzip-Packer: 7-zip

Apache-Tutorial: Auslieferung komprimierter Inhalte

Fazit

Um eine maximale Datenkompression zu erhalten, kombiniert man am besten die oben erwähnten Lösungen. Um sich ein Bild von der so erzielten Volumeneinsparung machen zu können, kann man folgenden Link empfehlen:

CompressorRater

Folgendes Beispiel soll dies verdeutlichen:

dojox.cometd.subscribe('/foo/test', this, 'foo' );
dojox.cometd.unsubscribe('/foo/test', this, 'foo' );
dojox.cometd.subscribe('/foo/test', this, 'foo' );
dojox.cometd.unsubscribe('/foo/test', this, 'foo' );
dojox.cometd.subscribe('/foo/test', this, 'foo' );
dojox.cometd.publish( '/foo/test', { } );

In diesem aufgezeigten Fall, deaktiviert dojox zwar den gebuchten Kanal, jedoch nur temporär, was dazu führt, dass nach dem Publish die Funktion “foo” 3x aufgerufen wird. Da dieser Bug auch in der Version 0.9 von Dojo noch vorhanden ist, gibt es einen Patch, der jedoch manuell nachgetragen werden muss.

Eine Anleitung hierzu findet man unter:

dojox-cometd-fix

Der CSS-Regel-Name, muss …

• aus Buchstaben und Zahlen bestehen
• mit einem Buchstaben beginnen

Dumm nur, wenn man sich bei jedem Aufruf einer Seite eine ID generieren lässt und diese einmal mit einem Buchstaben bzw. mit einer Zahl beginnt. Dann wird die Fehlersuche zur Suche nach der Nadel im Heuhaufen.

Die Schwerpunkte bei der Entwicklung des Frameworks lagen auf folgenden Punkten:

• strikte Trennung von HTML, JavaScript und CSS
• Erweiterung der Funktionsbibliotheken von HTML-Elementen
• Erweiterung der Funktionsbibliotheken von Objekten
• AJAX mit Berechnung einer prozentualen Fortschrittsanzeige
• Bearbeitung von CSS-Eigenschaften direkt in der Stylesheet-Datei
• Adaption von Funktionen zwischen IE und Firefox

Download:

TribalFX Version 0.75

TribalFX API Version 0.75

Beispiel: Event-Listener:
//IE
object.attachEvent( 'onclick', callMe );
//Firefox
object.addEventListener( 'click', callMe, false );


In solchen Fällen muss meist auf Programmierweichen oder Workarounds zurückgegriffen werden, was wiederum die Übersichtlichkeit des Codes nicht gerade fördert und den Quellcode nur sinnlos aufbläht.

Beispiel: Weiche Event-Listener
if( object.addEventListener ) {
object.addEventListener( 'click', callMe, false );
} else {
object.attachEvent( 'onclick', callMe );
}

Beispiel: Workaround Event-Listener:
function addEventToObject( object, e, func ) {
var oldhandler = object[ e ];
object[ e ] = ( typeof object[ e ] != 'function' ) ? func : function( e ) {
oldhandler( e );
func( e );
};
}


Kann man nicht auf Weichen und Workarounds, speziell beim Internet Explorer und Firefox, komplett verzichten?

Javascript besitzt unter anderem die prototype-Funktion, mit der es möglich ist eigene Methoden bzw. Klassen zu überschreiben aber auch DOM-Objekte zu erweitern. Diese grundlegende Funktionalität unterstützten zunächst erst einmal beide Browser.

Folgende DOM-Objekte sind verfügbar:

• Object
• Array
• String
• Number
• Date
• Function
• RegExp
• Boolean

Mit dieser Erkenntnis, lässt sich nun schon einmal die Weiche bzw. der Workaround z.B. für einen allgemein gültigen Event-Listener aufheben.

Beispiel: attachEvent()
Object.prototype.attachEvent = function( type, handler ) {
handler.eventHandler = function( e ) {
window.event = e;
return handler();
};
this.addEventListener( type.replace( /on/, '' ), handler.eventHandler, false );
}

Das Überschreiben einer vom DOM-Objekt vorgegebenen Funktion ignoriert bei diesem aufgezeigten Lösungsansatz der IE jedoch.

Der kleine aber feine Unterschied

Der Firefox jedoch kann mit dem nun aufgezeigten Lösungsansatz nicht nur eigens erstellt Methoden, Klassen und bestehende DOM-Objekte, sondern auch DOM-Interfaces überschreiben bzw. diese um einzelne Methoden erweitern.

Auflistung einiger DOM-Interfaces:

• HTMLCollection
• HTMLDocument
• HTMLElement
• Node
• Event
• CSSStyleDeclaration

Aufbauend auf dieser Erkenntnis ist es möglich dem Firefox auch die Getter und Setter des IE beizubringen.

Beispiel: event.keyCode für den Firefox
Event.prototype.__defineGetter__( 'keyCode', function() {
return this.which;
} );


Hierbei muss man jedoch aufpassen, dass die Getter und Setter zentral in einer Datei für den FF definiert werden und mit einer Weiche vor dem Zugriff des IE geschützt sind, da sich dieser ansonsten mit einer Fehlermeldung melden kann, wenn der Debugger-Modus eingestellt ist. Man sieht, um eine Weiche kommt man nicht ganz rum

Quellen:
Document Object Model (DOM)
Extending JavaScript Objects and Classes
IE Emu for Moz