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

jQuery.sheet – Excel Spreadsheets für jQuery Es gibt da durchaus ein oder zwei Sachen, in denen man sich in Javascript die Finger bricht und man froh ist, dass es zum Beispiel jQuery gibt. Sinnvo...
Skalierbare JavaScript Application Architektur Ich habe gerade bei Nettuts ein interessantes Video gefunden, das ich euch nicht vorenthalten möchte. In rund einer Stunde erklärt Nicholas Zakas eine...
Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...

Ein Kommentar

Schreibe einen Kommentar