2010-01-20 11 views
25

Ich möchte Bilder, CSS und Javascript clientseitig im Browser zwischengespeichert haben, wenn sie eine Webseite laden. Es gibt so viele verschiedene Arten von Caching Ich bin verwirrt, welche mit asp.net mvc verwenden.Wie css, Bilder und js cachen?

Wäre es auch möglich, dass der Browser nach neuen oder geänderten Versionen dieser Dateien sucht?

Danke!

Antwort

6

Browser kümmern sich um dies für Sie automatisch, eigentlich. Sie müssen aus dem Weg gehen, um sie dazu zu bringen, css, js, html und Bilder NICHT zu cachen.

Ich bin nicht so vertraut mit ASP MVC, aber ich denke, sie Art der Zwischenspeicherung Sie denken, ist Opcode-Caching für Ihre erstellte dynamische Ausgabe Server-Seite?

+0

Die Dinge sind nicht wirklich so einfach. Caching ist wichtig, wenn Sie sich für eine fehlerfreie und gut funktionierende Website interessieren. Sie möchten vermeiden, dass Besucher Inhalte erneut herunterladen müssen, aber Sie möchten verhindern, dass Besucher veraltete Inhalte erhalten. In ASP.NET MVC verwende ich einen Ansatz, der einen MD5-Hash in der URL enthält, der dies ohne zu viele Gedanken nach der Einrichtung erreicht. Überprüfen Sie [meine Antwort hier] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351) für den Quellcode. –

+0

@Drew Sicher, das war nicht als Überblick über Caching gedacht. Erklären Sie dem Fragesteller, dass die Standardeinstellungen in Browsern und Servern nicht so schlecht sind, wenn Sie keine feinere Kontrolle benötigen. Apache ist normalerweise so konfiguriert, dass es ETags usw. bedient, und Browser gehen normalerweise mit 304s einher. Haben Sie Ihre Lösung überprüft, und das ist eine gute Idee! Ich werde diese Idee wahrscheinlich bald in Django verwenden. – JAL

-2

Das clientseitige Caching wird von Browsern automatisch ausgeführt, wenn Sie properly setCache-Control headers und web.config festlegen. So:

<system.webServer> 
    <staticContent> 
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" /> 
    </staticContent> 
</system.webServer> 
+3

Es ist wirklich nicht so einfach. Sie müssen die entsprechenden Header in der HTTP-Antwort angeben. Darüber hinaus müssen Sie Browsern mitteilen, dass sie ihren Cache bei Änderungen des Inhalts irgendwie ungültig machen sollen. Andernfalls schlägt die Site fehl, bis sie eine Hard Refresh durchführen. –

43

Sie müssen Cache-Steuerkopfzeilen auf dem Server festlegen. Sie können dies tun, indem Sie diese in Ihrer web.config kleben:

<system.webServer> 
    <staticContent> 
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
    </staticContent> 
</system.webServer> 

Dies würde nun dem Browser mitteilen, auch für neue Inhalte auf alles für 30 Tage statisch zu überprüfen.

Für Ihre zweite Frage, stellen Sie einen Mechanismus zum Hinzufügen einer Querystring zum Inhalt. In meinem aktuellen Projekt komprimieren und kombinieren wir Javascript und CSS als Teil des Builds. Wenn Links auf der Seite setzen ist aussieht:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script> 

Die Abfragezeichenfolgeflag die Zahl Major.Minor.0.Changeset ist und Änderungen jederzeit drücken wir einen Build, den Client so dass es erneut zu holen. Das gleiche passiert genau auf Stylesheets in ihrem <link> Element.

+0

Würde clientcache auch den HTML-Code zwischenspeichern? Ich möchte meine Kontobereiche, die Ajax stark beanspruchen, beschleunigen, indem ich nur die Skripte, CSS und Bilder (nicht den HTML-Code) im Cache speichere. Was würden Sie dafür empfehlen? – chobo

+0

@chobo: Dies würde nur den statischen Inhalt beeinflussen ... das ist eine Richtung zu IIS 7, wie man mit Dingen umgeht, die ASP.Net nicht hat (images, css, js). Alles, was dynamisch ist wie ein Aspx, erhält ** NOT ** diesen Header und würde nicht zwischengespeichert werden. –

+0

Die Verwendung von Abfragezeichenfolgen für Versionen bedeutet, dass einige Proxyserver die Datei nicht zwischenspeichern. Lieber direkt in die URL einfügen. Und wenn Sie das tun, verwenden Sie einen MD5-Hash des Dateiinhalts und tauschen das Konzept der Versionierung gegen das Identitätskonzept aus. Ich habe einige [Quellcode hier] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351), die zeigt, wie ich es im Moment mache . Würde mich über Gedanken und Feedback freuen. –

4

@Paul Creasey und @Salsa sind beide korrekt, dass Browser standardmäßig mit dem Caching umgehen, solange die Verbindung gleich ist.

Wie bereits erwähnt, führt dies zu einem Problem, wenn Sie diese Dateien aktualisieren müssen, da Sie nicht garantieren können, dass der Browser des Clients nach einer aktualisierten Version sucht. In vielen Fällen tun sie dies nur, nachdem eine bestimmte Zeit verstrichen ist, was zu einer unangenehmen Benutzererfahrung führen kann.

Es gibt eine Reihe von Fragen, die bereits auf dieser Site gestellt wurden, um zu erfahren, wie man die Client-Browser mit refresh the cache alarmiert. Kurz gesagt, alle verlassen sich darauf, den Link zu ändern, wenn Sie den Inhalt der Datei ändern.

Sie einen Parameter an die URL anhängen können, die nur für das Caching verwendet werden wie zum Beispiel:

<script src="/myJavascript.js?version=4"></script> 

Dann ändern Sie einfach die Versionsnummer, wenn Sie den Inhalt ändern und eine Client-Seite refresh ala zwingen müssen this answer.

0

Dies ist am besten in IIS oder in Ihrer Konfigurationsdatei getan - stellen Sie sicher, dass Ihre CSS/JS/Bilder nie ablaufen.

Wenn Sie sie aus Ihrem Code beziehen, empfehle ich, eine Version oder ein Build-Datum an den Dateinamen anzuhängen, z. script.js?20100120, so dass Sie, wenn Sie Änderungen vornehmen, die Version nur ändern müssen, um eine Aktualisierung von allen Browsern zu erzwingen, die sie zwischengespeichert haben.

1

Werfen Sie einen Blick auf die answer I posted here für eine Lösung, die den Vorteil der Verwendung von Caching maximiert und vermeidet Probleme mit benötigen Benutzer zu ‚harten‘ refresh (Ctrl +F5).

Es verwendet einen MD5-Hash des Inhalts selbst in der URL, so dass die URL gleich bleibt, solange die Datei die gleiche ist, was wirklich das Ziel ist. Die Hash-Berechnung ist sehr schnell und wird im Speicher auf dem Server zwischengespeichert, so dass das Rendern von Seiten nicht merklich verlangsamt wird. Das Ganze wird in Mikrosekunden gemessen, und die Vorteile waren bisher (auf my site for scuba divers) genial. Ich verwende es für alle Bilder, CSS und JS mit Ausnahme von Bildern aus CSS-Dateien, da sie auf meiner Site noch nicht servergeneriert sind.