In einer Umgebung mit mindestens 500 ms Latenz über 2G Mobilfunkverbindungen (~ 0,1mbps), ist die schnellste und effizienteste Möglichkeit, ungefähr 10kb von css und js in etwa 5-10 Dateien auf dem Server an den Client zu senden ?Inline vs enthalten js und CSS?
kann ich von drei Möglichkeiten denken:
- alle js in einer Datei kombiniert und alle CSS in eine Datei
- Verknüpfung aller CSS und JS Dateien nacheinander
- inline alles
Ich weiß, google verwendet Inline, aber das ist wahrscheinlich nur um Server-Sockets zu speichern. 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 über 10 verschiedene 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, so dass jeder von diesen machbar ist. 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 erfordert nur drei Anfragen an den Server, und der dritte benötigt nur eine Anfrage vom Server (die wenigen Bilder ignorierend) wir könnten auf einigen der Seiten haben).
Betätigt 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 unter Verwendung von /path/to/file.ext?md5-hash-of-file ändert. Außerdem wird alles gezippt, wo immer es möglich ist.
EDIT:
denke ich, ich sollte die beiden Optionen klären ich für die Nummer zwei gefunden. Ist es eine gute Idee, eine einzige Datei für CSS und JS auf der gesamten 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 eine kombinierte 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.
1 bedeutet weniger Anforderungen gesendet werden, aber wie Sie Cache-Header festlegen, sollte es nicht viel ausmachen. Wie für 3, ist Ihre Seite dynamisch generiert? Wenn dies der Fall ist, wird es nicht zwischengespeichert und das Einfügen von CSS/JS wäre eine schreckliche Idee. Wie für Android/iOS Caching-Dateien oder nicht, hängt das von der Größe dieser Dateien ab. –
Wenn Sie die AJAX-Navigation verwenden, ist Inline einfacher und erfordert nicht immer eine Bandbreitenverschwendung: ex; tausche den Körper aus und lasse inline js/css im Kopf. Wenn Sie die Seite häufig aktualisieren, erzielen einige extern zwischengespeicherte URLs im Allgemeinen die besten Ergebnisse. Beachten Sie, dass zwei 50kb-Dateien auf 2g in der Regel schneller als 1 100kb-Datei übertragen werden, da die Pipeline verlegt ist. Wenn Sie jedoch viel Verzögerung haben, ist es möglicherweise schneller, eine URL als zwei zu suchen/zu kopieren. – dandavis
alle Seiten werden dynamisch generiert, PHP, so Caching würde dann überhaupt nicht funktionieren. Haben Sie eine Vorstellung davon, welche Dateigrößen zwischengespeichert werden? –