Inline vs enthalten js und css?

In einer Umgebung mit mindestens 500ms Latenz über 2G mobile Verbindungen (~ 0.1mbps), was ist die schnellste und effizienteste Art, um etwa 10kb CSS und js, in etwa 5-10 Dateien auf dem Server, an den Client zu senden?

Ich kann an drei Optionen denken:

  1. Kombiniert alle js zu einer Datei und alle css zu einer Datei
  2. Verknüpfung aller CSS- und Js-Dateien eins nach dem anderen
  3. Inline alles

Ich weiß, dass Google Inline verwendet, aber das ist wohl nur um Server-Sockets zu sparen. Sie sparen sogar den RAM, indem sie im staatenlosen Modus laufen – sie vertrauen den Klienten, sich an die Sessions zu erinnern. Server-Power ist überhaupt kein Problem.

Auf der anderen Seite scheinen facebook ihr CSS zu autogenerieren (ihre Namen sind base64 codiert), aber in über 10 verschiedene Dateien, die an den Benutzer gesendet werden, und sie scheinen es nicht einmal so stark zu optimieren; Nur einige Whitespace Entfernung.

Ich gebe schon alle Dateien durch eine Funktion, die alles komprimiert, so dass jeder von ihnen machbar ist. Ich möchte nicht die erste Alternative wählen, weil es einfacher ist.

Die ersten beiden nutzt das Caching (die zweite ein bisschen weniger als die erste), aber die zweite benötigt nur drei Anfragen an den Server, und die dritte benötigt nur eine Anfrage vom Server (ignorieren die wenigen Bilder, die wir haben könnten Einige der Seiten).

Ist Android / iOS Cache js und CSS über Neustarts des Browsers? Wenn nicht, dann klingt Inline besser.

Das einzige Ziel ist es, die durchschnittliche Ladezeit des Benutzers zu minimieren. Jeder Benutzer wird etwa 100 Seiten Lasten auf der Website pro Tag, sehen etwa 40 css und js Dateien pro Tag. Die css und js ist grundsätzlich statischer Inhalt. Es ist eingestellt, um 30 Tage zu cache, und wir ändern die URL, wenn die Datei ändert sich mit /path/to/file.ext?md5-hash-of-file . Außerdem wird alles soweit wie möglich verschoben.

BEARBEITEN:

Ich denke, ich sollte die beiden Optionen, die ich für die Nummer zwei gefunden habe, klären. Ist es eine gute Idee, eine einzelne Datei für CSS und Js über die gesamte Website zu verwenden? Es würde nur zwei Anfragen verwenden und jede doppelte (oder septuple) Zwischenspeicherung entfernen, da eine einzelne Funktion in zwei oder mehr verschiedenen kombinierten js-Dateien ist, aber ein Download von bis zu 1MB klingt nicht so gut.

Heute ist es grundsätzlich eine kombinierte CSS pro Ansicht, also jedes Mal, wenn du dieselbe Seite wieder siehst, wird der Inhalt zwischengespeichert Allerdings werden einige js und css auf mehr als einer Seite verwendet.

  • Machen facebook Login Arbeit mit einem Android Webview
  • Kann ich javax.script in Android-Entwicklung verwenden und wenn ja wie?
  • Warum hochgeladenes Audio ist korrupt, wenn der Upload eindeutig erfolgreich ist?
  • Wie kann ich html5 Textfeld machen, um Nummernblock anzuzeigen?
  • Pass und Rückgabe der Werte aus Javascript und Android und verwenden Sie als Telefon Lücke Plugin
  • Debug-Javascript in Android Emulator mit Telefongap
  • Cordova: Nicht in der Lage, die Datei auf Android mit Cordova zu kopieren
  • Touchend nicht abfeuern nach Touchmove auf Android 4.x?
  • 3 Solutions collect form web for “Inline vs enthalten js und css?”

    Inline-CSS und Javascript wird Ihre Seite so schwer.its eine sehr gute Praxis, um alle Ihre Stylesheets und alle Javascript-Dateien in einem zusammenfassen und sie in Ihre page.this wird Ihre Seite sehr schnell im Vergleich zu Inline-Stile.

    Es hängt wirklich von der Nutzung ab. Für eine Seite mit nur einer Zeit Besucher , würde ich empfehlen, alles inlining. Dies macht für eine schnellere Anfangsbelastung (eine einzelne Anfrage vs mehrere Anfragen) und einfacher zu arbeiten mit. Dies ist der Fall für Landing Pages, Hilfe Seiten, Assistenten und ähnliche Einweg-Seiten.

    Allerdings, wenn Sie wiederkehrende Besucher erwarten, würde ich empfehlen, eine externe Datei zu verwenden. Während die erste Ladung langsamer sein wird, machst du es bei nahezu null Ladezeit für diese Vermögenswerte. Dies ist der Fall für die meisten Webseiten.

    Das Problem mit # 2, die Verknüpfung zu jeder Datei, ist, dass der größte Faktor in der Ladezeit für kleine Elemente ist rund Reisezeit, nicht Dateigröße. Es dauert mehrere Rundfahrten, um die Verbindung aufzubauen, um jede Datei zu erhalten. Das bedeutet auch, dass du deine CSS- und Js-Dateien kombinierst. In Ihrer High-Latency-Umgebung werden Rundfahrten besonders schmerzhaft sein. Hier ist google's Ratschläge für Rundreisen

    Wie andere schon erwähnt haben, bedeutet # 3, Inlining, dass Dateien nicht zwischengespeichert werden können. Es kann verlangsamen Ladezeiten wegen der erhöhten Größe der html. Allerdings vermeiden Sie die Hin- und Rückfahrt.

    In deiner Umgebung würde ich auch empfehlen , den HTML5-Anwendungs-Cache zu betrachten, um das Caching für CSS- und JS-Dateien zu optimieren. Du musst deine App umwandeln, um AJAX-Anrufe zu verwenden, anstatt html-Seiten zu laden, aber das macht auch die benötigte Datenübertragung.

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.