LABjs – JavaScript On-Demand nachladen

Wer kennt das Problem nicht? Schnell hat man beim Einsatz von jQuery 5-6 Skript-Tags im Header, die nicht unbedingt kleine Javascripte laden. Neben jQuery selbst und den damit verbundenen Plugins kommen oft noch eigene Skripte zur Nutzung der geladenen Bibliotheken dazu. Das Problem an der Sache ist, das Skripte, die mittels des entsprechenden Tags geladen werden, synchron (also nicht parallel) geladen werden, da der Browser (korrekterweise) davon ausgeht, dass die Skripte deshalb in einer festen Reihenfolge stehen, da das letzte Skript eventuell das erste Skript benutzt. Ferner wird das Laden von CSS und Bildern blockiert.

In den meisten Fällen ist das jedoch Quatsch – vor allem bei jQuery Plugins. Klar das jQuery immer, als Erstes geladen werden muss, aber mehrere Plugins, die auf den Seiten mehrere vollkommen verschiedene Aufgaben erfüllen, könnten durchaus parallel geladen werden.

LABjs ermöglicht das definieren von Abhängigkeiten und das asynchrone Laden von JavaScript. Als Beispiel:

<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>

Wird zu:

<script>
   $LAB
   .script("framework.js").wait()
   .script("plugin.framework.js")
   .script("myplugin.framework.js").wait()
   .script("init.js");
</script>

Durch das wait() wird LABjs mitgeteilt, das alle Skripte, die zuvor in der Liste stehen zunächst ausgeführt und geladen sein müssen, bevor das mit wait versehene load ausgeführt wird. Eine nette Sache, die allerdings auch einen Nachteil hat!

Die Art und Weise wie eine Seite gerendert wird, ändert sich drastisch. Logischerweise wird LABjs erst, wenn das Event domready in Erscheinung tritt. Das wäre normalerweise der Zeitpunkt wo sofort durch Javascript das Aussehen einer Seite beeinflusst wird, stattdessen startet erst jetzt LABjs das Laden der Skripte – man wird also unter Umständen erst wesentlich später eine „korrekt aussehende“ Seite zu Gesicht bekommen. Um diesen Umstand zu mildern, bietet LABjs allerdings entsprechende Unterstützung, die darauf beruht, dass Content erst dann angezeigt wird, wenn er nicht mehr geändert werden muss.

Trotz dieses Umstandes geben die Programmierer von LABjs an, das eine Seite, die das Javascript benutzt um den Faktor 2-3 schneller wird!

Ähnliche Beiträge

jsPDF – PDF-Dateien mit JavaScript erzeugen PDF-Dateien sind aus der modernen Geschäftswelt nicht mehr wegzudenken, was insbesondere bedeutet das man diese in einer Applikation erzeugen muss. PD...
JavaScript & Canvas anstatt Visio Das Canvas-Element kann schön zeichnen und die Entwicklung geht klar vom Desktop weg hin zur Cloud, was dann fehlt sind die entsprechenden Lösungen. N...
Einfach mal eine Ansi-Grafik auf die Homepage pack... Früher, als alles noch besser war, und ich mich in Mailboxen herumgetrieben habe, gabs immer coole Ansi-Intros. Am Anfang waren es nur einfache Schrif...
Vereinfachte Formularerstellung mit Patterns Von irgendeinem Punkt an funktionieren Webseiten alle gleich: Slider auf die Startseite, die Usability von Formularen erhöhen und das bloß mit minimal...

Ein Kommentar

Schreibe einen Kommentar