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

Wieso man Javascript nicht im Head lädt (und im Fo... Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...
PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Mit Numeral.js Zahlen formatieren Normalerweise ist der Konstrukt ja wie folgt: MySQL->PHP->Form->PHP->MySQL - das ist ganz nett, bietet aber einige Fallstricke. Normalerwe...
cryptico.js – Verschlüsseln in JavaScript Ajax ist ne lustige Sache, vor allem wenn man die Daten unverschlüsselt durch die Gegend schickt ;) Bei manchen Daten ist das kein Problem, aber späte...

Eine Antwort auf „LABjs – JavaScript On-Demand nachladen“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.