In einer Umgebung mit mindestens 500 ms Latenz über 2G mobile Verbindungen (~ 0,1mbps), was ist der schnellste und effizienteste Weg, um etwa 10kb von css und js, in etwa 5-10 Dateien auf dem Server, an die Klient?
Ich kann mir drei Möglichkeiten vorstellen:
Ich weiß, dass Google inline verwendet, aber das ist wahrscheinlich nur zum Speichern von Server Sockets. Sie sparen sogar RAM, indem sie im zustandslosen Modus laufen - sie vertrauen darauf, dass sich die Clients die Sitzungen für sie merken. Server Power ist überhaupt kein Problem.
Auf der anderen Seite scheinen Facebook ihre CSS automatisch zu generieren (ihre Namen sind Base64-codiert), aber in mehr als 10 verschiedenen Dateien an den Benutzer gesendet, und sie scheinen es nicht einmal so stark zu optimieren; nur ein paar Leerzeichen entfernen.
Ich übergebe bereits alle Dateien durch eine Funktion, die alles komprimiert, also sind alle von diesen machbar. Ich möchte nicht die erste Alternative wählen, weil es einfacher ist.
Die ersten beiden nutzen den Vorteil des Caching (der zweite ist etwas kleiner als der erste), aber der zweite benötigt nur drei Anfragen an den Server und der dritte benötigt nur eine Anfrage vom Server (die wenigen Bilder ignorierend, die wir haben) könnte auf einigen der Seiten haben).
Bettet Android / iOS js und css zwischen Neustarts des Browsers? Wenn nicht, klingt Inline besser.
Das einzige Ziel ist es, die durchschnittliche Ladezeit des Benutzers zu minimieren. Jeder Benutzer wird pro Tag etwa 100 Seitenaufrufe auf der Website ausgeben, wobei pro Tag etwa 40 CSS- und JS-Dateien angezeigt werden. Die CSS und JS ist im Wesentlichen statischen Inhalt. Es ist so eingestellt, dass es 30 Tage zwischenspeichert, und wir ändern die URL, wenn sich die Datei mit /path/to/file.ext?md5-hash-of-file ändert. Außerdem wird alles gezippt, wo immer es möglich ist.
BEARBEITEN:
Ich denke, ich sollte die zwei Optionen, die ich für Nummer zwei gefunden habe, klarstellen. Ist es eine gute Idee, eine einzige Datei für CSS und JS über die gesamte Website zu verwenden? Es würde nur zwei Anfragen verwenden und jedes doppelte (oder Septuple) Caching 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 im Prinzip ein kombiniertes CSS pro Ansicht, so dass jedes Mal, wenn Sie dieselbe Seite erneut anzeigen, der Inhalt zwischengespeichert wird. Einige js und css werden jedoch auf mehr als einer Seite verwendet.
Es hängt wirklich von der Verwendung ab. Für eine Seite mit nur einmaligen Besuchern würde ich empfehlen, alles einzustücken. Dies ermöglicht eine schnellere anfängliche Belastung (eine einzelne Anfrage im Vergleich zu mehreren Anfragen) und es ist einfacher zu arbeiten. Dies ist der Fall für Zielseiten, Hilfeseiten, Assistenten und ähnliche Einwegseiten.
Wenn Sie jedoch wiederkehrende Besucher erwarten, empfehle ich die Verwendung einer externen Datei. Während der erste Ladevorgang langsamer wird, erstellen Sie anschließend für diese Ressourcen eine Ladezeit von nahezu Null. Dies ist der Fall für die meisten Websites.
Das Problem mit # 2, das mit jeder Datei verknüpft ist, ist, dass der größte Faktor in der Ladezeit für kleine Elemente die Umlaufzeit und nicht die Dateigröße ist. Es dauert mehrere Runden, um die Verbindung einzurichten, um jede Datei zu erhalten. Dies bedeutet auch, dass Sie Ihre CSS- und JS-Dateien kombinieren sollten. In Ihrer Umgebung mit hoher Latenzzeit sind Rundreisen besonders schmerzhaft. Hier finden Sie googles Tipps zu Hin- und Rückfahrten
Wie andere bereits erwähnt haben, bedeutet # 3, inlining, dass Dateien nicht zwischengespeichert werden können. Es kann Ladezeiten wegen der vergrößerten Größe des HTML verlangsamen. Sie vermeiden jedoch die Hin- und Rückfahrtkosten.
In Ihrer Umgebung würde ich auch den HTML5-Anwendungscache empfehlen , um das Caching für CSS- und JS-Dateien zu optimieren. Sie müssten Ihre App konvertieren, um AJAX-Aufrufe zu verwenden, anstatt HTML-Seiten zu laden. Dadurch wird jedoch auch die erforderliche Datenübertragung reduziert.
Tags und Links javascript html android css http