Was ist besser für JavaScript Ladezeit: Komprimiert alle in einer großen Datei oder alle asynchron geladen werden?

Question

Eine einfache Frage, die ich bin mir nicht sicher, ob es eine kurze Antwort gibt!

Beschreibung:
Ich habe ein Datei von JavaScript, die hier in einer Webseite geladen wird, sind einige Notizen über sie:

• Sie sind alle kommt aus der gleichen Domain (kein Cross-Domain-Laden erforderlich)
• Sie sind identisch rund um die Website.
• Es gibt mehrere Dateien, wie jQuery und 5 andere Plugins und meine eigene Anwendung Skript, das auf ihnen basiert.
• Ihre Größe alle komprimiert = 224KB, (kombiniere ich alle Dateien in einer Datei dann ich komprimieren sie einmal YUI Compressor mit 2

Problem
Ich habe gehört, dass 224KB nicht ideal ist in einer Datei zu sein! und es sollte aufgeteilt in mehrere Dateien mit maximal 44KB sein jeder .. Ich kann mich nicht erinnern, als ich habe davon gehört und ich bin nicht sicher, ob es effektiv ist es in mehrere Dateien aufgeteilt, aber es ist wahr, dass 224KB dauert lange zu Last zum ersten Mal betrachtet, dass die Website mit Bildern und CSS natürlich geladen wird.

Ich habe die Notwendigkeit für die frühe Belastung von JavaScript-Datei minimiert und es auf dem Boden gelegt, so weit ist dies ein guter Fortschritt, aber ich brauche es zu laden assynchounosly mit der HTML-Zeit zu gewinnen? Quelle und die decission zu machen ist:

Ja oder Nein?
Halten Sie es in einer komprimierten großer Datei? oder sie in viele komprimierten Datei zu spalten und geladen ein asynchron (Ich bin mir bewusst, die die Abhängigkeit Probleme im Zusammenhang mit der Handhabung)?

Answer 1

Es hängt davon ab, was die Website ist und wie wichtig die erste Ladezeit ist für sie.

Unabhängig davon, dass, obwohl, würde ich wahrscheinlich laden JQuery und Sachen wie das von einem öffentlichen CDN. Ein großer Vorteil ist, dass es vielleicht sogar schon im Cache gespeichert werden, wenn sie nie auf Ihrer Website gewesen sein.

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Das Cappuccino-Team ist ein großer Befürworter einer Datei - sie einen JavaScript-Framework machen. Apps, die mit ihrem Werkzeug wird erwartet, dass eine gewisse Ladezeit haben.

http: // Cappuccino .org / diskutieren / 2009/11/11 / just-one-Datei-mit-Cappuccino-0-8 /

Answer 2

Ein weiterer Vorteil der Lade JQuery und von einem öffentlichen CDN würde die erhöhten Anforderungen durch Ziel verwendet. Ich glaube, dass der Client auf 2 Anfragen pro Domain beschränkt ist, so durch das Laden jquery von Google, und ein Plugin von jquery und Ihre benutzerdefinierten App-Code aus Ihrer eigenen Domain, kann der Browser diese ausführen gleichzeitig anstatt für die ersten beiden warten und dann eine dritte Anforderung ausgibt.

Ich denke, dies ist eine weitere Leistungsverbesserung gegenüber einer großen Datei auch. Auch wenn Sie, dass 1-Datei in 2 geteilt durch, könnte es mit 2 gleichzeitigen Anfragen aus dem Browser abgerufen wird möglicherweise die Ladezeit zu verbessern.

Answer 3

Hier ist, was wir unseren Web-App schnell zu machen angetan haben.

Die wichtigsten JS und CSS-Dateien werden komprimiert und setzen inline mit dem HTML-Markup.
Die weißen Flächen des HTML entfernt, und die Bilder werden auf data:image/png durch einen Shell-Skript umgewandelt.

Die Größe ist ~ 400kb aber zwischengespeichert und gzip.
Die mobile Version des Web-App ist die gleiche, aber bei ~ 250 kb. Es bedeutet, dass die ganze App ist bereit zu laufen, wie eine ausführbare Datei, in einem einzigen HTTP-Aufruf.

Dann wird ein zweiter HTTP-Aufruf die Daten (JSON) erhalten, und wir verwenden PURE es in HTML zu machen mit die vorhandenen Markups in der Seite als Vorlagen.

Die App in Module unterteilt sind, werden nur die gemeinsame Module auf diese Weise vorgespannt ist.
Die andere kommen, wenn sie vom Benutzer angefordert.

Answer 4

Es gibt keine genaue Antwort auf diese Frage. Es ziemlich viel hängt davon ab, wie und wann Sie die Verwendung dieser Dateien machen.

Normalerweise wollen Sie nur JS-Dateien auf Pageload herunterladen, die von dem Web-App universell erforderlich ist. Modulspezifische oder seitenspezifische JS-Dateien sollten nicht in dem Haupt-JS-Download komprimiert werden und würden im Idealfall bei Bedarf geladen werden.

Auch diese Frage ist nur gültig, wenn Sie Benutzererfahrung betroffen sind für Erstbenutzer. Die JS-Dateien sowieso zwischengespeichert werden würden für jeden anderen Besuch.