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:

%MINIFYHTMLed59b6a5e69ce2c4afb383158c8660f611%%MINIFYHTMLed59b6a5e69ce2c4afb383158c8660f612%%MINIFYHTMLed59b6a5e69ce2c4afb383158c8660f613%%MINIFYHTMLed59b6a5e69ce2c4afb383158c8660f614%

Wird zu:

%MINIFYHTMLed59b6a5e69ce2c4afb383158c8660f615%

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

d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...
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...

Ein Kommentar

Schreibe einen Kommentar