Javascript

Optimierter Zugriff

image.jpg

© Internet Magazin

Der Google Closure Compiler prüft Ihr Skript, entfernt Füllzeichen und optimiert Ihre Programierung.

Innerhalb von Javascript können Sie ganz ohne Probleme mehrstufige Arrays aufbauen und auf diese dann zugreifen. Dies verursacht jedoch Probleme bei der Performance, da Javascript für den Zugriff auf ein Element der dritten Ebene immer drei Schritte benötigt.

Deswegen sollten Sie für Elemente, auf die Sie wiederholt zugreifen, auch eine separate Variable definieren. Anstelle von meinArray. Element sollten Sie sich eine Variable aufbauen, die folgendermaßen aussieht:

Var iElement = meinArray.Element

Damit ersparen Sie Javascript pro Zugriff einen ganzen Schritt.

Platzierung von Javascript

Eine HTML-Seite wird stets von oben nach unten abgearbeitet. Javascript wird dabei normalerweise im HTML-Header integriert. Dadurch wird vor den Inhalten der Website zuerst der komplette Code geladen. Wird die Javascript-Funktionalität nicht zu Beginn des Aufrufs der Seite benötigt, sollten Sie diesen als Letztes laden, indem Sie den Aufruf in den Body-Bereich der Seite verlegen.

Oft ist dies nicht möglich - hier sollten Sie den Einsatz eines Frameworks abwägen.

Einsatz eines Frameworks

Viele Limitierungen von Javascript, die Sie im Standard nur mit zahlreichen Umwegen erreichen, sind mit Frameworks einfacher und vor allem auch im Hinblick auf die Geschwindigkeit effizienter zu erreichen. Die populärsten Vertreter dieser Gattung sind sicherlich JScript, Mootools und Prototype.

Darüber hinaus gibt es jedoch zahlreiche weitere, die teilweise für unterschiedliche Anforderungen optimiert sind. Eine gute Übersicht über populäre Frameworks und deren Schwerpunkte finden Sie beispielsweise bei Wikipedia (http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks).

Umgang mit DOM

Versuchen Sie mit einer minimalen Anzahl an DOM-Zugriffen auszukommen. Planen Sie beispielsweise, ein Listelement zu füllen, dann sollten Sie dies in einem Schritt machen und nicht jedes Element einzeln. Nach jeder Änderung eines DOM-Elements auf dem Bildschirm erneuert der Browser die Darstellung.

Im Beispiel soll eine Sammlung von Elementen, die zuvor zusammengestellt wurde - meine_Elemente - einem Container mit div-Elementen hinzugefügt werden. Die Sammlung besteht bereits, das Beispiel deckt nur die Sammlung der div-Elemente und das Hinzufügen ab.

Im Normalfall lesen Sie diese über eine getElement-Funktion ein und fügen anschließend die neuen Elemente ein.

var div_ele = document.getElements ByTagName ("div"); for ( var i = 0; i < div_ele.length; i++ ) { for ( var e = 0; e < meine_Elemente. length; e++ ) { div[i].appendChild( meine_Elemente [e].cloneNode(true) ); } }

Einen deutlichen Performance-Gewinn erhalten Sie, indem Sie die Anzahl der DOM-Zugriffe durch den Einsatz des Javascript-Objekts documentFragment vermeiden.

var div = document. getElementsByTagName("div"); var fragment = document. createDocumentFragment(); for ( var e = 0; e < meine_Elemente. length; e++ ) { fragment.appendChild( meine_Elemente [e] ); } for ( var i = 0; i < div.length; i++ ) { div[i].appendChild ( fragment.cloneNode(true) ); }

HTML-Collection-Objekte

Innerhalb von HTML gibt es eine Reihe von Collection- Objekten, wie beispielsweise document.forms oder document. images. Der Zugriff auf diese Objekte erfolgt mit Methoden wie getElementsBy TagName oder getElementsByClassName.

Neben den bekannten Problemen mit DOM-Objekten gibt es noch eine weitere Problematik, welche auf einer DOM-1- Spezifikation beruht und festlegt, dass Collections innerhalb von DOM eine Beschreibung des aktuellen Zustands darstellen. Damit führt jede Änderung einer Collection direkt zum Neuaufbau. Fügen Sie beispielsweise einer Sammlung von div-Elementen ein neues hinzu, generieren Sie unter Umständen eine Endlosschleife, ohne dies bewusst wahrzunehmen.

var div_sammlung = document. getElementsByTagName('div'); for (var i=0; i < div_sammlung. length; i++ ) { var div = document.createElement ("div"); document.appendChild(div); }

Speichern Sie für eine solche Konstellation einfach den Wert des Zählers zwischen und greifen Sie auf diesen als Abbruchkriterium wieder zu.

for (var i=0, laenge = div_sammlung. length; i < laenge; i++ )

CSS-Änderungen per Javascript

Ein ähnliches Phänomen erwartet Sie bei den Änderungen von Styles über Javascript. Bei jedem Zugriff auf die Eigenschaft eines Objekts führt Ihr Browser eine direkte Anpassung des Elements durch und baut die Webseite neu auf. Dieses Verhalten können Sie nicht gänzlich eliminieren, jedoch ist es möglich, diese mithilfe von CSS-Klassen zu minimieren.

In diesem Kontext verändern Sie nicht nur eine Eigenschaft eines Elements, sondern beliebig viele, die in der Klasse zusammengefasst sind, in einem Durchgang. Damit ersparen Sie sich unter Umständen einige unnötige Neuaufbauten von Elementen der Webseite.

Code komprimieren

image.jpg

© Internet Magazin

Der Javascript Compressor entfernt unnötige Füllzeichen.

Jedes Skript enthält in der Regel Zeilenumbrüche, Tabulatoren und Leerzeichen, damit bei der Entwicklung die Übersichtlichkeit nicht verlorengeht. Die Summe dieser für Javascript überflüssigen Zeichen beeinflusst letzten Endes auch die Größe der Datei.

Nachdem Sie Ihre Entwicklung abgeschlossen haben, sollten Sie diese Zeichen entfernen. Dazu existieren glücklicherweise zahlreiche Hilfsmittel - Sie müssen sich nicht selbst ans Löschen machen. Ein Skript, welches die Arbeit für Sie erledigt ist beispielsweise der Javascript Compressor (http://javascriptcompressor.com ).

Sie fügen in diese Online-Anwendung lediglich Ihren Code ein und erhalten ein bereinig-tes Skript ohne unnötige Leerzeichen. Dieses Verfahren können Sie im Übrigen auch für Ihre CSS-Dateien anwenden.

Der Interpreter erkennt die notwendigen Formatierungsbefehle auch ohne zusätzliche Seitenumbrüche. Verzichten Sie in diesem Zusammenhang auch auf die Integration des kompletten Javascript Codes in Ihre HTML-Seite und lagern Sie diesen aus. CSS- und Javascript-Dateien werden durch Ihren Browser gecacht. Wird die Seite erneut geladen, gilt dies nur für den HTML-Code. Dadurch ersparen Sie sich einige Kilobyte, die bei jedem erneuten Zugriff auf die Seite ansonsten wieder vom Server abgerufen werden.

Darüber hinaus sollten Sie nie mit mehreren Javascript-Dateien arbeiten. Fassen Sie den ausgelagerten Code in einer Datei zusammen. Damit ersparen Sie sich die mehrfachen Dateizugriffe.

Code Optimizer

Haben Sie all diese Hinweise bereits bei der Erstellung Ihrer Skripte beachtet, sollten Sie abschließend Ihre Entwicklung noch durch einen Code Optimizer prüfen lassen. Google liefert mit dem Closure Compiler ein Tool, das sowohl ungenutzten Code identifiziert als auch bestehenden Code optimiert. Der Compiler lässt sich entweder lokal als jar-File nutzen oder Sie verwenden die Online-Variante (http://closure-compiler.appspot.com/home).

Bevor das Programm mit der Optimierung beginnt, prüft es die Syntax auf Korrektheit. Nach der Eingabe des Beispielcodes fällt auf, dass der Optimizer als Erstes alle Leerzeichen entfernt und längere Variablen durch Buchstaben ersetzt.

Anschließend versucht der Optimizer, Programmcode zusammenzufassen, beispielsweise Elemente außerhalb einer for-Bedingung in die Schleifenbedingung hineinzuziehen. In unseren Beispielen verwandelte der Optimizer eine bewusst genutzte while-Schleife in eine for-Schleife. Es bleibt also Vorsicht angesagt bei der Verwendung solcher Programme.

Gehen Sie bei der Entwicklung mit Javascript umsichtig vor und testen Sie dabei auch verschiedene Varianten auf Ihre Ausführungsgeschwindigkeit. Nutzen Sie dazu die Browser unterschiedlicher Hersteller, da die Modelle von Internet Explorer, Firefox und Chrome sehr unterschiedlich auf die verschiedenen Optimierungsmaßnahmen reagieren.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".