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

JavaScript für Superheros JavaScript macht seit einigen Monaten eine ganz erhebliche Wandlung durch. Während bei den Frontend-Entwicklern immer mehr Funktionalität / Logik in J...
Syntax Highlighting in Javascript Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Fing...
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...
Blackbird – netter Ersatz für alert(); JavaScript Debugging ist meistens eine sehr dumme Angelegenheit, und hierbei rede ich jetzt nicht von "netten" Browsern, die console.log(); unterstütz...

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

Schreibe einen Kommentar

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