Zum Hauptinhalt springen

Was ist Cache? ⚡

Eines der Geheimnisse für schnell ladende Websites ist der Cache! Ich erkläre Ihnen, was Cache ist und wie er funktioniert, sodass es auch Anfänger leicht verstehen können!

Cache mit dem Alltag vergleichen?​

Vergleichen wir Cache mit einem Notizblock auf dem Schreibtisch.

Die Geschichte des Notizblocks 📝​

Ohne Notizblock (ohne Cache):

Jedes Mal, wenn Sie die Telefonnummer eines Freundes brauchen
1. Schublade öffnen
2. Telefonbuch herausnehmen
3. Nummer suchen
4. Telefonbuch wieder zurücklegen
→ Kostet jedes Mal Zeit 😓

Mit Notizblock (mit Cache):

Häufig verwendete Nummern auf dem Notizblock auf dem Schreibtisch notieren
1. Notizblock anschauen
2. Sofort anrufen!
→ Schnell und praktisch ⚡

Cache funktioniert genauso!

Häufig verwendete Daten
vorübergehend in der Nähe speichern
→ Schneller Zugriff!

Definition von Cache​

Cache

  • Häufig verwendete Daten vorübergehend in einem schnellen Speicher aufbewahren
  • Geschwindigkeitsverbesserung ist das Ziel
  • Original bleibt unverändert, nur Kopie wird gespeichert

Warum brauchen wir Cache?​

Geschwindigkeitsvergleich​

Daten vom Server abrufen:
Browser → (Internet) → Server → Daten → (Internet) → Browser
Zeit: 500ms (langsam 🐌)

Daten aus dem Cache abrufen:
Browser → Lokaler Cache → Daten
Zeit: 10ms (schnell ⚡)

→ 50-mal schneller!

Cache-Typen​

1. Browser-Cache 🌐​

Im Webbrowser gespeicherter Cache

Erster Besuch:
Browser → Server: "Bitte gib mir index.html"
Server → Browser: [Dateiübertragung + "Du kannst es cachen"]
Browser: Datei speichern

Nächster Besuch:
Browser: "Ah, ist im Cache!" → Sofort verwenden
→ Schnelles Laden ohne Serveranfrage ⚡

Was gespeichert wird:

  • HTML-Dateien
  • CSS-Dateien
  • JavaScript-Dateien
  • Bilder (Logos, Icons usw.)
  • Schriftarten

2. CDN-Cache 🌍​

Verteilte Speicherung auf Servern weltweit

Benutzer (Deutschland) → CDN-Server (Berlin) → Inhalt
                  ↓
            Schnelle Antwort ⚡

vs

Benutzer (Deutschland) → Original-Server (USA) → Inhalt
                  ↓
            Langsame Antwort 🐌

3. Server-Cache 💾​

Daten auf dem Server cachen

Datenbankabfrageergebnisse cachen
API-Antworten cachen
Berechnungsergebnisse cachen

4. Speicher-Cache (RAM) 🧠​

Im Computerspeicher gespeichert

Geschwindigkeitsreihenfolge:
Speicher-Cache (am schnellsten) ⚡⚡⚡
Festplatten-Cache (schnell) ⚡⚡
Netzwerk (langsam) ⚡

Cache-Funktionsprozess​

1. Erste Anfrage (Cache Miss)​

1. Browser: "Brauche logo.png!"
2. Cache prüfen: "Nicht da?"
3. Server anfragen: "Bitte gib mir logo.png"
4. Server-Antwort: [Datei + Cache-Richtlinie]
5. Datei verwenden + Im Cache speichern

2. Zweite Anfrage (Cache Hit)​

1. Browser: "Brauche logo.png!"
2. Cache prüfen: "Ist da!" ✅
3. Sofort aus dem Cache verwenden
→ Keine Serveranfrage ⚡

Cache-Steuerungs-Header​

Der Server teilt dem Browser mit, wie er cachen soll:

Cache-Control​

Cache-Control: max-age=3600
→ Cache für 3600 Sekunden (1 Stunde) verwenden

Cache-Control: no-cache
→ Jedes Mal beim Server überprüfen

Cache-Control: no-store
→ Nicht cachen

Cache-Control: public
→ Jeder kann cachen

Cache-Control: private
→ Nur der Browser des Benutzers kann cachen

Expires​

Expires: Wed, 21 Oct 2025 07:28:00 GMT
→ Cache ist bis zu diesem Datum gültig

ETag​

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
→ Eindeutige Kennung der Datei
→ Prüfen, ob die Datei geändert wurde

Cache-Validierung​

Bedingte Anfrage​

Browser → Server: "Ich habe die Datei, hat sie sich geändert?"
           If-None-Match: "33a64df55..."

Server → Browser: "Nicht geändert!"
           304 Not Modified

Browser: "Dann verwende ich den Cache!" ✅
Wenn die Datei geändert wurde:
Server → Browser: "Hat sich geändert!"
           200 OK + neue Datei

Vorteile von Cache​

✅ Schnelle Ladegeschwindigkeit​

Erster Besuch: 3 Sekunden
Zweiter Besuch: 0,5 Sekunden ⚡
→ 6-mal schneller!

✅ Reduzierung der Serverlast​

1 Million Besucher
→ 90% benötigen keine Serveranfrage dank Cache
→ Server verarbeitet nur 100.000 Anfragen

✅ Kostensenkung​

Reduzierung des Netzwerkverkehrs
→ Senkung der Serverkosten 💰

✅ Offline-Nutzung​

Gecachte Seiten
können ohne Internet angesehen werden

Nachteile von Cache​

❌ Veralteter Inhalt​

Auch wenn die Datei aktualisiert wird
wird die alte Version aus dem Cache verwendet

❌ Speicherplatzbenutzung​

Wenn sich Cache ansammelt
nimmt er Speicherplatz ein

❌ Cache-Verwaltung erforderlich​

Angemessene Ablaufzeit einstellen
Cache-Invalidierungsstrategie erforderlich

Cache-Probleme lösen​

Problem 1: Aktualisierung wird nicht angezeigt!​

Lösungen:

  1. Erzwungenes Neuladen (Hard Refresh)
Windows: Strg + F5
Mac: Cmd + Shift + R
  1. Cache löschen
Chrome: Einstellungen → Browserdaten löschen → Cache
  1. Inkognito-Modus
Strg + Shift + N (Chrome)
→ Verwendet keinen Cache

Problem 2: Dateinamen ändern (Cache Busting)​

Lösung für Entwickler:

<!-- Schlechtes Beispiel -->
<link rel="stylesheet" href="style.css">

<!-- Gutes Beispiel: Versionsnummer hinzufügen -->
<link rel="stylesheet" href="style.css?v=1.2.3">

<!-- Besseres Beispiel: Datei-Hash -->
<link rel="stylesheet" href="style.abc123.css">

Wenn sich die Datei ändert, ändert sich auch der Name und sie wird neu heruntergeladen!

Cache-Strategien​

1. Statische Ressourcen (ändern sich nicht)​

Logos, Icons, Bibliotheken

Cache-Control: max-age=31536000, immutable
→ 1 Jahr cachen (Garantie keine Änderung)

2. Häufig aktualisierter Inhalt​

Nachrichtenartikel, Produktliste

Cache-Control: max-age=300
→ Nur 5 Minuten cachen

3. Persönliche Informationen​

Benutzerprofil, Kontoinformationen

Cache-Control: private, no-cache
→ Nur Browser des Benutzers, jedes Mal validieren

4. Niemals cachen​

Zahlungsseite, sensible Informationen

Cache-Control: no-store
→ Cachen verboten

Cache-Verwaltung im Browser​

Chrome-Entwicklertools​

F12 → Registerkarte Network
→ Cache in der Spalte "Size" überprüfen

(disk cache) = Aus Festplatten-Cache geladen
(memory cache) = Aus Speicher-Cache geladen
Größe anzeigen = Vom Server heruntergeladen

Cache löschen​

Chrome:

Einstellungen → Datenschutz und Sicherheit
→ Browserdaten löschen
→ Bilder und Dateien im Cache markieren
→ Löschen

Praktische Anwendungsbeispiele​

Beispiel 1: Bild-Caching​

Erster Besuch:
GET /logo.png
← 200 OK (1MB heruntergeladen, 500ms)
Cache-Control: max-age=86400

Nächster Besuch:
GET /logo.png
← (disk cache) (0KB, 10ms)
→ 50-mal schneller! ⚡

Beispiel 2: CSS-Datei​

<link rel="stylesheet" href="styles.abc123.css">

Cache-Control: max-age=31536000, immutable
→ 1 Jahr cachen, Hash im Dateinamen enthalten
→ Name ändert sich auch bei Dateiänderung

Beispiel 3: API-Antwort-Caching​

// Server-Antwort
Cache-Control: max-age=60

// Wenn Sie dieselbe API innerhalb von 1 Minute aufrufen
→ Gecachte Antwort verwenden
→ Serverlast reduzieren

Häufig gestellte Fragen (FAQ)​

A:

  • Cache: Dateispeicherung (schnelles Laden)
  • Cookie: Speicherung kleiner Daten (Zustand beibehalten)

F2: Muss man den Cache häufig löschen?​

A: Normalerweise nicht!

  • Browser verwaltet automatisch
  • Löscht automatisch alte, wenn Platz fehlt
  • Nur manuell löschen, wenn Probleme auftreten

F3: Cache im Inkognito-Modus?​

A: Nur temporärer Cache

  • Alles wird beim Schließen des Fensters gelöscht
  • Verwendet keinen vorhandenen Cache

F4: Wie groß ist die Cache-Kapazität?​

A: Variiert je nach Browser:

  • Chrome: ~50MB pro Website
  • Gesamt-Cache: ~einige GB

F5: Wird Cache auch auf Mobilgeräten verwendet?​

A: Ja! Funktioniert gleich.

  • Spart Daten
  • Schnelles Laden

Cache-Invalidierung (Cache Invalidation)​

Eines der schwierigsten Probleme in der Informatik:

"Wann sollte man den Cache löschen?"

Strategien​

  1. Zeitbasiert
Automatisches Ablaufen alle 10 Minuten
  1. Ereignisbasiert
Cache bei Datenaktualisierung löschen
  1. Versionsverwaltung
Version/Hash im Dateinamen enthalten

Nächste Schritte 🚀​

Wenn Sie Cache verstanden haben:

  1. ✅ Was ist ein Cookie? - Eine andere Browser-Speichermethode
  2. ✅ HTTP-Anfrage/Antwort verstehen - Wie Cache-Header funktionieren
  3. ✅ Was ist ein VPN? - Internetsicherheit

Zusammenfassung​

Cache ist die Magie, die das Web schnell macht! ⚡

Punkte zum Merken:

  • Cache = Temporärer Speicher
  • Ziel: Geschwindigkeitsverbesserung
  • Häufig verwendete Daten speichern
  • Automatisch verwaltet, keine Sorge nötig
  • Nur bei Problemen löschen

Dank Cache laden Websites schnell. Versuchen Sie beim nächsten Surfen im Web, den Cache bei der Arbeit zu spüren! 🚀