Share
So wie die Verwendung von JavaScript in den letzten Jahren in die Höhe geschossen ist, hat die schiere Anzahl von Skripts, die in eine durchschnittliche Webseite geladen werden, zugenommen. Mit diesen Skript-Tags wird viel Gepäck geliefert, z. B. Blockieren und mangelndes Abhängigkeitsmanagement.
Heute möchte ich Ihre Aufmerksamkeit auf eine Reihe von JavaScript-Loadern lenken, Mini-Toolkits, die das Hinzufügen und Laden von Skripts erheblich vereinfachen.
Die Seite wird nicht mehr angezeigt, während das Skript heruntergeladen wird.
JavaScript-Dateien, die mit der Skript Tag blockieren von Natur aus. Alles, was auf der Seite passiert oder geladen wird, wird angehalten, während das Skript heruntergeladen und ausgeführt wird. Denken Sie daran, dass dies für jedes Skript-Tag gilt. In einigen modernen Browsern können Sie diese Dateien zwar parallel herunterladen, der Rest der Seite ist jedoch weiterhin für sinnvolle Aktionen gesperrt.
Das mangelnde Abhängigkeitsmanagement ist ein großer Nachteil.
Als nächstes kommt das Problem der Behandlung von Abhängigkeiten. Für Ihre durchschnittliche Webseite benötigen Sie wahrscheinlich keine. Prüfen Sie, ob Ihre Bibliothek geladen ist, und fahren Sie fort. Für eine nicht triviale Webanwendung ist dies jedoch keine großartige Lösung. Sie müssen Skripts bedingt abhängig von Abhängigkeiten laden. Selbst dann müssen Sie noch herausfinden, in welcher Reihenfolge sie geladen werden. Sie können dies wahrscheinlich manuell für 3-4 Dateien tun, aber wenn sich die Dinge häufen, sind Sie mit einer automatisierten Lösung wahrscheinlich besser dran.
Die anfängliche Idee für diese Zusammenfassung wurde durch einen Post bei Hacker News ausgelöst, der vor etwa einem Monat eine Liste von JavaScript-Skriptladern erstellt hat. Ich sah, wie die Liste von 3 auf 10 stieg, bevor ich das Interesse verlor und weiterging.
Nun, da genug Zeit vergangen ist, denke ich, wird diese Liste ziemlich umfangreich sein. Leider ist mein Google-Fu ziemlich schwach und ich kann es nicht finden. Wenn es einem Benutzer mit Adleraugen gelingt, diesen Thread zu finden, poste ihn in den Kommentaren unten, damit ich darauf verlinken kann und meine Liste hoffentlich auch hier erweitern kann.
Diese Liste basiert auf Empfehlungen von hochrangigen Webentwicklern, die diese Tools in ihren Anwendungen verwenden.
Was meine Entscheidungen hier angeht, so stellt diese Liste eine Obermenge von Empfehlungen dar, die eingeflossen sind, nachdem ich einige der Front-End-Community gebeten hatte, sich mit den von ihnen verwendeten Lösungen zu beschäftigen. Einige der unten aufgeführten Lösungen können auch Abhängigkeiten verwalten, die meisten bleiben jedoch beim einfachen asynchronen Laden. Unabhängig von den zusätzlichen Feinheiten erledigt jedes der folgenden Skripts eine Sache, die absolut souverän ist - laden Sie JavaScripts mit minimalem Aufwand auf.
Also ohne weiteres und in keiner bestimmten Reihenfolge:
Head JS lädt Skripte parallel, egal wie viele davon und wie der Browser ist. Laden Sie Skripte wie Bilder. Verwenden Sie HTML5 und CSS3 sicher. CSS-Ziel für verschiedene Bildschirme, Pfade, Status und Browser. Machen Sie es zum einzigen Skript in Ihrem KOPF.
Autor: Tero Piirainen
Projekt-URL: Hier
Größe: 6,3 KB
Ähnliche Links:
LABjs (Loading und Blocking JavaScript) ist ein Allzweck-On-Demand-JavaScript-Ladeprogramm, mit dem Sie beliebige JavaScript-Ressourcen von jedem beliebigen Ort aus auf jede Seite laden können. Sie können auf einfache Weise angeben, welche Skripts Abhängigkeiten für die Ausführungsreihenfolge haben, und LABjs stellen die korrekte Ausführungsreihenfolge sicher. Dadurch ist die Verwendung von LABjs für praktisch jede JavaScript-Ressource sicher, unabhängig davon, ob Sie diese steuern oder hosten oder ob sie eigenständig ist oder Teil eines größeren Abhängigkeitsbaums von Ressourcen ist.
Autor: Kyle Simpson
Projekt-URL: Hier
Größe: 4,7 KB
Ähnliche Links:
RequireJS ist ein JavaScript-Datei- und -Modul-Loader. Es ist für die Verwendung im Browser optimiert, kann jedoch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. Die Verwendung eines modularen Skriptladers wie RequireJS verbessert die Geschwindigkeit und Qualität Ihres Codes.
Autor: James Burke
Projekt-URL: Hier
Größe: 13 KB
Ähnliche Links:
ControlJS ist ein JavaScript-Modul, das sowohl Inline-Skripts als auch externe Skripts verarbeitet, die Ausführung des Skripts verzögert, bis die Seite gerendert wurde. Das Herunterladen von Skripts und das Ausführen von Skripts ermöglichen die Integration einfacher HTML-Änderungen und keine Codeänderungen
Autor: Steve Souders
Projekt-URL: Hier
Größe: 3,6 KB
Ähnliche Links:
Das StealJS-Projekt ist eine Sammlung von befehls- und clientbasierten JavaScript-Dienstprogrammen, mit denen das Erstellen, Packen, Freigeben und Verwenden von JavaScript-Anwendungen vereinfacht wird. Enthält Module für Abhängigkeitsmanagement, JS-Komprimierung, Bereinigung und Protokollierung.
Autor: Brian Moschel
Projekt-URL: Hier
Größe: 11,4 KB
Ähnliche Links:
yepnope ist ein asynchroner, bedingter Ressourcenlader, der extrem schnell ist und nur die Skripts lädt, die Ihre Benutzer benötigen. Es funktioniert sowohl mit JavaScript als auch mit CSS und verfügt über eine vollständige Testsuite in QUnit, die Sie in Ihrem Satz unterstützter Browser ausführen können, um sicherzustellen, dass es funktioniert.
Autor: Alex Sexton und Ralph Holzmann
Projekt-URL: Hier
Größe: 3,4 KB
Ähnliche Links:
Der Loader ermöglicht das Bootstrapping einer konsistenten und hochmodernen CommonJS-Umgebung für jede unterstützte Plattform (auf Server und im Browser) und eignet sich daher ideal als Ziel für den Befehl commonjs und die Entwicklung von plattformübergreifenden Plattformen JavaScript-Anwendungen und -Bibliotheken.
Autor: Christoph Dorn
Projekt-URL: Hier
Größe: 22 KB
Ähnliche Links:
JSLoad ist ein Javascript-Dateilader, den wir für Instructables geschrieben haben. Sie geben ihm eine Reihe von Abhängigkeiten und Gruppierungen und laden die Dateien, die Sie benötigen, wenn der ausführende Code sie benötigt. Der wahre Nutzen von JSLoad liegt in der Fähigkeit, Abhängigkeiten mithilfe von Tags zu gruppieren.
Autor: Eric Nguyen
Projekt-URL: Hier
Größe: 9,8 KB
Ähnliche Links:
JsDefer bietet paralleles / serielles Laden basierend auf Definitionen, Abhängigkeiten und umhüllten im Vergleich zu nicht umhüllten Paketen. Außerdem wird festgelegt, ob Abhängigkeiten in separaten def-Dateien oder im Skript selbst definiert werden. Die Integration mit Deferred (wie in jQuery 1.5) ermöglicht oder vereinfacht viele Anwendungsfälle unter vielen Andere.
Autor: Boris Moore
Projekt-URL: Hier
Größe: 4,7 KB
Ähnliche Links:
JSL-Funktionen können bei Bedarf geladen werden, Browsercache-fähig, dynamisches asynchrones Laden von JavaScript, verzögertes Laden und Verhinderung doppelter Quellen unter einer Vielzahl anderer Funktionen.
Autor: Andres Vidal
Projekt-URL: Hier
Größe: 2,1 KB
Ähnliche Links:
Das Get-Dienstprogramm bietet einen Mechanismus zum Anhängen von Skript- und CSS-Ressourcen - einschließlich domänenübergreifender Ressourcen - an das DOM, nachdem die Seite geladen wurde.
Autor: Adam Moore
Projekt-URL: Hier
Größe: 17,9 KB
Ähnliche Links:
Mit DominateJS können Sie all Ihr JavaScript asynchron laden und die sequentielle Ausführung verschieben, bis die Seite geladen wird. DominateJS zielt darauf ab, eine browserübergreifende und zu 100% document.write-sichere Bibliothek zu sein! Dies ist eine stark modifizierte (und mächtige!) Evolution von ControlJS.
Autor: Chris Joel und Jason Benterou
Projekt-URL: Hier
Größe: 48 KB
load.js ist ein micro JS Lazy-Loader. Auf Chain.js aufgebaut, können Sie Ihre JS-Skripts nacheinander oder parallel laden und komplexe Abhängigkeitsketten handhaben.
Autor: Chris O'Hara
Projekt-URL: Hier
Größe: 2 KB
Ähnliche Links:
BravoJS ist eine Implementierung eines Entwurfs für CommonJS Modules / 2.0
Autor: Wes Garland
Projekt-URL: Hier
Größe: 10,7 KB
Bootstrap ist eine kleine Bibliothek zum dynamischen Laden von JavaScript-Dateien.
Sein primärer Anwendungsfall ist die Verwendung von JS-Dateien in Ihrem JS-Code, wenn diese verwendet werden.
Autor: Scott Koon
Projekt-URL: Hier
Größe: 1,3 KB
LazyLoad ist ein winziges (nur 904 Bytes vermindertes und gezipptes) JavaScript-Hilfsprogramm, das die Abhängigkeit von externen JavaScript- und CSS-Dateien erleichtert.
Wenn immer möglich, lädt LazyLoad automatisch Ressourcen parallel und stellt dabei die Ausführungsreihenfolge sicher, wenn Sie ein Array von zu ladenden URLs angeben. In Browsern, die die Ausführungsreihenfolge von asynchron geladenen Skripts nicht beibehalten, lädt LazyLoad die Skripts sicher nacheinander.
Autor: Ryan Grove
Projekt-URL: Hier
Größe: 1,6 KB
curl.js ist ein kleiner, aber sehr schneller AMD-kompatibler asynchroner Loader. Aktuelle Größe: 4,5 KB (2,1 KB) mit dem Closure Compiler von Google.
Wenn Sie curl.js für Nicht-AMD-Module (normale Javascript-Dateien) verwenden möchten, möchten Sie die Version mit den js! Plugin eingebaut. Möglicherweise möchten Sie auch das domReady-Modul einbauen. Der kombinierte curl + js + domReady-Loader ist immer noch nur 6,1 KB (2,7 KB)..
Autor: John Hann
Projekt-URL: Hier
Größe: 5 KB
$ script.js ist ein asynchroner JavaScript-Loader und Abhängigkeitsmanager mit erstaunlich beeindruckendem geringem Footprint. Wie viele andere Skriptladeprogramme können Sie mit $ script.js Skriptressourcen nach Bedarf von einer beliebigen URL laden und nicht das Laden anderer Ressourcen wie CSS und Bilder blockieren.
Autor: Dustin Diaz
Projekt-URL: Hier
Größe: 1,4 KB
NBL.js ist ein kleines Skript, das Ihre HTML-Seiten schneller lädt, indem Sie alle Ihre JavaScript-Dateien asynchron (parallel) mit dem Rest Ihrer Seite laden. Wenn Sie normalerweise zwei oder drei Skripts in Ihre Seite einfügen, wartet der Browser darauf, dass sie ausgeführt werden, bevor Ihre Seite angezeigt wird.
Autor: Berklee
Projekt-URL: Hier
Größe: 971 B
Ähnliche Links:
Während jedes der oben aufgeführten Tools das Laden von Skripts auf etwas einzigartige Weise abwickelt, sollten Sie unbedingt Ihre Tests durchführen, wenn Sie entscheiden, welches das richtige für Sie ist.
Wie ich bereits erwähnt habe, wenn Sie der Meinung sind, dass ein Lader hier sein sollte, dies aber nicht ist, schreiben Sie uns eine Zeile und wir werden die Zusammenfassung entsprechend aktualisieren.
Accentsconagua