Ist das Laden von Webpage-Ressourcen in eine einzelne HTML-Datei schneller?

Question

Ist das Laden von Webpage-Ressourcen in eine einzelne HTML-Datei schneller?

8

Was wäre, wenn ich einen Übersetzungsschritt für meine Website hätte, der alle externen Skripte und Stile in eine einzige HTML-Datei mit eingebetteten <script> und <style> -Tags verwandelt hätte? Würde dies die Seitenladezeiten verbessern, da keine zusätzlichen GETs für die externen Dateien gesendet werden müssen? Wenn ja, warum wird das nicht öfter gemacht?

javascript html css performance page-load-time

oink 22.06.2016, 04:21

quelle

2 Antworten

0

Ja, es wird die Ladezeit der Seite verbessern, aber trotzdem wird diese Methode aus folgenden Gründen nicht oft verwendet:

Debugging wird schwierig sein.
Wenn wir später updaten wollen, wird es auch nicht so einfach sein.
Getrennte CSS- und JS-Dateien entfernen diese Probleme

Und yeah, für schnelleres Laden der Seite, können Sie ein BUILD SYSTEM wie GRUNT, GULP, BRUNCH usw. für bessere Leistung verwenden.

v_tom 22.06.2016 04:32

quelle

Tags und Links javascript html css performance page-load-time

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Angular 2: Bindung an Funktionen aus Komponentenvorlagen

score 5 · Accepted Answer

Im Allgemeinen nicht zu sagen, weil es sehr situativ ist.

Wenn Sie Ressourcen von vielen verschiedenen Servern beziehen, können diese Anfragen das Laden Ihrer Seite verlangsamen (besonders mit einigen schlechten DNS auf der Besucherseite).
Das Anfordern vieler verschiedener Dateien kann das Laden der Seite verlangsamen, auch wenn sie vom selben Ursprung / Server stammen.
Denken Sie daran, nicht jeder hat Gigabit-Internet (oder sogar auf Megabit-Ebene). Wenn Sie also alles direkt in Ihre HTML-Datei einfügen (Inlining oder Verwendung von Daten-URIs), reduzieren Sie auf jeden Fall den Netzwerkaufwand (weniger Anfragen, weniger Header, etc.).
Außerdem (und dadurch wird der vorherige Punkt noch schlimmer) werden auch viele andere Funktionen, die oft dazu verwendet werden, die Seitenladezeiten zu reduzieren, durchbrochen. Zum Beispiel können Ressourcen nicht zwischengespeichert werden - weder lokal noch auf einem Proxy - und werden immer übertragen. Dies kann sowohl für den Besucher als auch für die gastgebende Partei teuer sein.

Der beste Weg, dies zu erreichen, ist oft der Mittelweg, wenn Ladezeiten ein Problem für Sie sind:

Wenn Sie Skripts von Drittanbietern verwenden, z. jQuery, greifen Sie diese von einem öffentlich gehosteten CDN, das auch von anderen Seiten verwendet wird. Wenn Sie Glück haben, wird der Browser Ihres Besuchers eine zwischengespeicherte Kopie haben und die Anfrage nicht ausführen.
Ihre eigenen Skripts sollten komprimiert und möglicherweise in einem einzigen Skript zusammengefasst werden (Tools wie "Browserify", "Webpack" usw.). Dies darf nicht oft wechselnde Teile enthalten, da diese Sie zwingen würden, noch mehr Daten zu übertragen.
Wenn Sie irgendwelche Skripte oder Ressourcen haben, die wirklich nur ein Teil Ihrer aktuellen Besuchererfahrung sind (wie eingeloggter Status, in den Benutzereinstellungen ausgewählte Farben usw.), ist es in Ordnung, diese direkt in die Eltern einzutragen HTML-Datei, wenn diese Datei sowieso angepasst wird und sie als separate Dateien liefert, würde nicht funktionieren oder würde mehr Overhead verursachen. Ein perfektes Beispiel dafür wären CSRF-Token. Tun Sie dies nicht, wenn Sie in der Lage sind, eine statische HTML-Datei zu liefern, die jedoch von Javascript gefüllt / aktualisiert wird.