Gibt es einen Vorteil, JavaScript- und CSS-Stylesheets dynamisch zu laden / zu entladen?
Hintergrund:
Ich stelle eine Website zusammen, die Ajax als primäre Methode zur Änderung des Inhalts verwendet. Auf diese Weise müssen der Hauptrahmen und die Bilder bei jedem Seitenwechsel nicht ständig neu geladen werden. Der Hauptrahmen hat sein eigenes site.css Stylesheet.
Frage 1:
Lohnt es sich, alle Stylesheet-Informationen in einem Stylesheet zusammenzufassen? Ich denke, dass dies die Website weniger modular machen würde. Jedes Mal, wenn eine neue Seite oder ein neuer Inhalt hinzugefügt oder entfernt wird, müsste die CSS aktualisiert werden (vorausgesetzt, dass der Inhalt andere Stilinformationen benötigt).
Frage 1.1:
Gleiche Frage aber mit Javascript.
Frage 2:
Wenn es (wie ich glaube) sinnvoll ist, mehrere Stylesheets zu verwenden, ist es vorteilhaft, ein Stylesheet zu entfernen, wenn es nicht verwendet wird. Zum Beispiel lade ich die profile.php-Seite, damit ich die profile.css dynamisch lade. Der Benutzer wechselt dann zur Seite "settings.php". Ich entlade die Datei "profile.css" und lade die Datei "settings.css". Wird dieses konstante Laden / Entladen zur Tankleistung oder sogar zur Website-Größe führen?
Frage 2.1
Gleiche Frage wie oben, aber auf JavaScript-Funktionen angewendet.
6 Antworten
Sobald Ihre JavaScript- oder CSS-Datei auf den Computer heruntergeladen wurde, wird sie von ihrem Browser zwischengespeichert. Somit entstehen Ihnen keine zusätzlichen Kosten für eine weitere HTTP-Anfrage. Lazy Laden der Skripte und Stylesheets könnte sinnvoll sein, aber es hat keinen Sinn, diese Web-Assets zu entladen, sobald sie bereits an den Client gesendet wurden.
Es ist gut, eine Art von Mechanismus zu verwenden, um Ihre Skripte und Stylesheets zu kompilieren, um die anfänglichen HTTP-Anfragen auf einen pro Asset-Typ zu minimieren. Nur ein Stylesheet und eine Javascript-Datei zu haben, wäre in vielen Fällen ein architektonischer Albtraum, aber das bedeutet nicht, dass Sie es dem Browser nicht so präsentieren können. Ich benutze .NET, also bin ich mir nicht sicher, wie Sie das in PHP handhaben, aber ich bin mir sicher, dass die Funktionalität da draußen ist.
Antwort 1:
Hier geht es um das Gleichgewicht. Sie sollten verschiedene CSS- und JS-Dateien behalten, diese jedoch alle vor der Bereitstellung in eine Datei zusammenfassen (eine CSS-Datei und eine JS-Datei). Im Grunde gibt es keine Notwendigkeit, mit einer großen Datei zu entwickeln, weil es Werkzeuge gibt, die sie für Sie kompilieren können.
Der schwierige Teil (abhängig von der Komplexität Ihrer Site) besteht darin, herauszufinden, welcher CSS- und JS-Code häufig genug verwendet wird, um auf jeder Seite aufgerufen zu werden. Wenn Sie Code haben, der nur auf einer Seite verwendet wird, sollten Sie ihn wahrscheinlich dynamisch laden ... es sei denn, Ihre ganze Site hat nur 5 Seiten. Wie gesagt, Balance.
Antwort 1.1 und 1.2:
Nein, nicht lohnenswert. Sobald Sie die CSS- und JS-Dateien geladen haben, werden sie auf dem Computer des Benutzers zwischengespeichert. Es ist also sinnlos, sie zu entladen.
Das riecht etwas vorzeitige Optimierung für mich. Schauen wir uns die Ladezeiten von SO an:
all.css- 46,8 Kb - Ladezeit 87 ms
Um den Punkt noch ein bisschen nach Hause zu bringen, hier sind die Ladezeiten für eine Menge anderer Dinge auf dieser speziellen SO-Seite (auf meinem vier Jahre alten Laptop über eine Glasfaserverbindung):
Und hier sind die relativen Größen von (einigen) dieser Komponenten:
Ich denke, die Takehome ist, dass wenn Sie den Rest Ihrer Website gut bauen, sollten Sie sich keine Sorgen über die Optimierung der letzten paar Millisekunden, bis sie wirklich zählen.
Frage 1
Ja, denn wie gesagt, wird die CSS nach dem Download zwischengespeichert. Aus diesem Grund ist es im Allgemeinen besser, wenn Sie Style-Informationen enthalten, diese nicht inline zu definieren. Sie können dies umgehen, indem Sie ein einfaches PHP-Skript verwenden, das den Inhaltstyp als CSS deklariert und dann Ihre individuellen CSS-Dateien als eins enthält.
%Vor%Beziehe dich dann einfach wie üblich auf ein Link-Tag.
%Vor%Frage 1.1
Gleiche Antwort wie vorher, benutze stattdessen:
%Vor%Frage 2
Nein. Nach dem Laden ist es immer im Speichercache verfügbar. Googles GWT Framework kompiliert alle externen Inhalte und überträgt sie als großes monolithisches Paket. Dies liegt daran, dass Sie nur zwei gleichzeitige HTTP_Requests pro Domäne ausführen können. Das ist auch, warum Yahoo Speed Guide empfiehlt, dass Sie Ihre CSS am Anfang der Seite und Ihr Javascript am unteren Rand des Body-Tags platzieren.
Frage 2.1
Nein. Aber versuchen Sie, Ihre externen Dateien klein zu halten. Reduzieren Sie den Produktionscode immer.
Antwort 1
Es mag zwar von Vorteil sein, Ihre CSS-Regeln nach Bedarf zu laden, aber ich würde davon abraten. Ganz einfach, weil dies einem einheitlichen Layout für Ihre Website oder Webanwendung entgegensteht. Ihr Design sollte auf allen Ihren Seiten standardisiert sein, und welche "Module" Sie auch über Ajax-Anfragen laden, sie sollten das gleiche Layout wie die primäre Seite verwenden. JQuery UI ist ein gutes Beispiel; ob Sie ein Widget verwenden oder nicht, es wird trotzdem heruntergeladen.
Wenn Sie jedoch bestimmte Styles auf die HTML-Bits anwenden müssen, die Sie von Ihren Anforderungen abrufen, können Sie diese Regeln einfach in einem <style> -Tag an den Abschnitt <head> angehängt haben, oder fügen Sie die CSS-Datei zu Ihrer <head> hinzu oder lassen Sie Ihre Regeln auf das style -Attribut Ihrer HTML-Elemente setzen.
Antwort 1.1
Wenn Sie JavaScript-Code nach Bedarf laden sollten, sollte dieser Code nicht zweimal neu geladen werden, es sei denn, Sie müssen den Code aus unbekannten Gründen wirklich neu laden ...
Aber in jedem Fall sollten weder CSS noch Javascript "entladen" werden, das hat keinen Sinn.
Antwort 2 und 2.1
Wenn Sie diese Frage vor ein paar Jahren gestellt hätten, wäre die Antwort wahrscheinlich gewesen, dass "das Laden eines einzelnen Stylesheets und / oder von Javascript besser ist", aber das stimmt nicht mehr wirklich. Mit der Internetverbindungsgeschwindigkeit und Computerleistung sind die Browser sehr effizient geworden und die Mühe ist den Leistungsgewinn (meistens) nicht wert. Wenn diese Ressourcen statisch sind (die URL ändert sich nicht), werden sie zwischengespeichert und wiederverwendet, so viele es auch gibt. Die Benutzer haben normalerweise nichts dagegen, wenn Warten erwartet wird ( siehe Abschnitt 2.10 ) oder wenn es das erste Mal ist.
Tags und Links javascript html css ajax