So verwenden Sie Node zum Implementieren des statischen Datei-Cachings

Cache

Beim Browser-Caching speichert der Browser zuvor angeforderte Dateien im Cache, damit sie beim nächsten Zugriff wiederverwendet werden können. Dadurch wird Bandbreite gespart, die Zugriffsgeschwindigkeit erhöht und die Serverbelastung verringert.

Klassifizierung des Cache-Standorts

Speichercache: Cache im Speicher, der beim Schließen des Browsers gelöscht wird, speichert normalerweise einige JS-Bibliotheken

Festplattencache: Der Cache auf der Festplatte wird nach dem Schließen des Browsers nicht sofort gelöscht. Darin werden normalerweise große Dateien gespeichert, beispielsweise Bildressourcen und Symboldateibibliotheken wie iconFont.

Der Unterschied zwischen den beiden:

1. Lesegeschwindigkeit: Der Speichercache speichert die aktuell analysierten Dateien im Browser-Tab-Prozess zwischen, sodass sie beim nächsten Verwenden schnell gelesen werden können.

Der Festplattencache schreibt den Cache direkt in die Festplattendatei. Das Lesen des Caches erfordert E/A-Operationen (Lesevorgänge) an der im Cache gespeicherten Festplattendatei und anschließendes erneutes Parsen des Cacheinhalts. Er ist langsamer als der Speichercache.

2. Aktualität: Der Speichercache wird beim Prozess des Tabs gespeichert und beim Schließen des Tabs geleert;

Festplattencache: Ich weiß nicht, wann er gelöscht wird (ich hoffe, jemand kann Informationen hinzufügen)

3. Priorität: Der Speichercache ist größer als der Festplattencache

Bei großen Dateien ist es sehr wahrscheinlich, dass sie nicht im Speicher abgelegt werden, andernfalls ist dies vorzuziehen. Derzeit scheint es, dass der Speicherort des Browser-Cache aus Code-Sicht nicht gesteuert werden kann.

Header „Cacheeinstellungen“

Cache-Steuerung

1. Cache-Steuerung: max-age = 10 // Alle innerhalb von 10 Sekunden erneut gesendeten Anfragen treffen direkt auf den starken Cache, ohne eine Anfrage an den Server zu stellen, sondern lesen einfach den Browser-Cache
2. Cache-Control: no-cache //Deaktiviert erzwungenes Caching. Jedes Mal wird eine Anfrage an den Server gestellt und die Anfrage wird auch im Browser-Cache gespeichert (im Grunde durch Aushandlung zwischengespeichert).
3. Cache-Control: no-store // Fordert den Server jedes Mal an und speichert ihn nicht im Browser zwischen, was keinem Cache entspricht
Code kopieren

Läuft ab:

Kompatibel mit Browsern niedrigerer Versionen. Dies dient zum Einstellen der absoluten Zeit, zum Abrufen der aktuellen Zeit des Servers und der aktuellen Zeit des Browsers zum Vergleichen (normalerweise gibt es eine Abweichung, die ein Produkt von http1.0 ist). Wenn gleichzeitig eine Cache-Steuerung vorhanden ist, hat die Cache-Steuerung eine höhere Priorität.

• last-modified: Wird beim Aushandeln des Caches paarweise mit If-Modified-Since verwendet; der Wert des If-Modified-Since-Anforderungsheaders entspricht dem Wert des last-modified-Antwortheaders des Servers. Der Server vergleicht die Änderungszeit der angeforderten Ressource. Wenn sie gleich sind, wird der Verhandlungscache getroffen und 304 zurückgegeben. Der Browser kann den Cache lesen.
• Etag: Ressourcenkennung (auch Fingerabdruck genannt, normalerweise ein MD5-Wert), wird beim Aushandeln des Cache verwendet, um zu vergleichen, ob die Datei geändert wurde; erscheint paarweise mit If-None-Match

Etag wird hauptsächlich verwendet, um einige Probleme zu lösen, die Last-Modified nicht lösen kann.

1. Einige Dateien werden möglicherweise regelmäßig geändert, aber ihr Inhalt ändert sich nicht (nur die Änderungszeit ändert sich). Zu diesem Zeitpunkt möchten wir nicht, dass der Client denkt, die Datei sei geändert worden, und sie erneut abruft.

2. Manche Dateien werden sehr häufig geändert, z. B. in weniger als einer Sekunde (z. B. N-mal innerhalb von 1 Sekunde), und If-Modified-Since kann solche feinen Details nicht überprüfen.

3. Einige Server können den letzten Änderungszeitpunkt der Datei nicht genau ermitteln.

4. Vergleich der Etag-Priorität, wenn sowohl Etag als auch Last-Modify vorhanden sind

Aktuelles Projekt: HTML erlaubt kein Caching. Das im HTML referenzierte JS hat eine eindeutige Versionsnummer als Grundlage. Bei erneutem Zugriff wird auf das neuste HTML zugegriffen. Sofern sich das referenzierte JS oder andere Dateiversionsnummern nicht geändert haben, wird direkt der lokale Cache verwendet.

Node implementiert statisches Datei-Caching

Dateistruktur

public entspricht den statischen Ressourcen, die wir zum Testen verwenden

Starker Cache

Ideen

• Erstellen eines Dienstes
• Die erste Anfrage besteht darin, den Anfragepfad zu analysieren, und fs.createReadStream().pipe() liest die Datei
• Setzen Sie den Antwortheader Cache-Control: max-age=10, um die relative Zeit des Caches zu stärken

Code-Implementierung

const http = erfordern("http");
const url = erfordern("url");
const fs = erfordern("fs");
const path = require("Pfad");
// Dateipfad empfangen und das der Datei entsprechende Dateitypformat zurückgeben const mime = require("mime"); //npm i mime 

const server = http.createServer((req, res) => {
  let { Pfadname, Abfrage } = url.parse(req.url, true);
  //__dirname verkettet den absoluten Pfad des Ordners, in dem sich die aktuelle Datei befindet, mit dem angeforderten Pathlet filePath = path.join(__dirname, "public", pathname);
  console.log(req.url);//Aktualisiere die Seite wiederholt innerhalb von 10 Sekunden, um zu sehen, ob sie kontinuierlich gedruckt wird. Wenn sie den starken Cache erreicht, wird sie alle 10 Sekunden gedruckt.// Lege die Header-Cache-Informationen fest. Innerhalb der angegebenen Cache-Zeit muss der Client keine erneute Anforderung an den Server initiieren.res.setHeader("Cache-Control", "max-age=10"); // Lege die Cache-Dauer fest; die Priorität der aktuellen Anforderungszeit + des maximalen Alters ist höher als Expires.res.setHeader("Expires", new Date(Date.now() + 10).toUTCString()); // Kompatibel mit Browsern niedrigerer Versionen. Dies dient zum Festlegen der absoluten Zeit und zum Abrufen der aktuellen Zeit des Servers.// Rufe den Anforderungspfad ab, um festzustellen, ob es sich um eine Datei oder ein Dateiverzeichnis handelt.fs.stat(filePath, function (err, statObj) {
    // Wenn die URL falsch analysiert wird, schlägt die Anforderung fehl und die entsprechende URL-Ressource wird nicht gefunden. Es wird 404 zurückgegeben.
    wenn (Fehler) {
      res.statusCode = 404;
      res.end("NICHT GEFUNDEN");
    } anders {
      // Wenn es sich um eine Datei handelt, verwenden Sie lesbaren Stream + Pipe, um den Dateiinhalt zu lesen, verwenden Sie MIME, um das Dateiinhaltsformat abzurufen, und stellen Sie den Kodierungsstandard auf UTF-8 ein.
      wenn (statObj.isFile()) {
        fs.createReadStream(Dateipfad).pipe(res);
        res.setHeader(
          "Inhaltstyp",
          mime.getType(Dateipfad) + ";charset=utf-8"
        );
      } anders {
        // Wenn es sich um ein Dateiverzeichnis handelt, suchen Sie die entsprechende index.html im Verzeichnis
        let htmlPath = Pfad.join(Dateipfad, "index.html");
        // fs.access ermittelt, ob der verknüpfte Pfad zugänglich ist fs.access(htmlPath, function (err) {
          wenn (Fehler) {
            // Unzugängliche Einstellungen Statuscode 404
            res.statusCode = 404;
            res.end("NICHT GEFUNDEN");
          } anders {
            //Zugänglich, verwenden Sie lesbaren Stream plus Pipe, um den Dateiinhalt zu lesen fs.createReadStream(htmlPath).pipe(res);
            res.setHeader("Inhaltstyp", "text/html;charset=utf-8");
          }
        });
      }
    }
  });
  // Sie können den Dienst starten, indem Sie nodemon cache.js unter http://localhost:3000/ ausführen. 
});
server.listen(3000, () => {
  console.log("Serverstart 3000");
});

Effektanzeige

Verhandlungscache

Erfolg

Ideen

• Erstellen eines Dienstes
• Die erste Anfrage besteht darin, den Anfragepfad zu analysieren, und fs.createReadStream().pipe() liest die Datei
• Setzen Sie den Antwortheader Last-modified und geben Sie ihn an den Browser zurück
• Fordern Sie es erneut an und vergleichen Sie den Browser-IF-Last-Modified- und den aktuellen Ressourcenänderungszeitpunkt. Wenn sie gleich sind, wird der Verhandlungscache getroffen und der Antwortcode 304 zurückgegeben. Andernfalls wird die letzte dem Pfad entsprechende Ressource zurückgegeben und der Antwortcode 200

Code-Implementierung

const http = erfordern("http");
const url = erfordern("url");
const fs = erfordern("fs");
const path = require("Pfad");
const mime = erfordern("mime");


  let filePath = path.join(__dirname, "public", Pfadname);
  Konsole.log(erforderliche URL);
  fs.stat(Dateipfad, Funktion (err, statObj) {
    wenn (Fehler) {
      res.statusCode = 404;
      res.end("NICHT GEFUNDEN");
    } anders {
      wenn (statObj.isFile()) {
        // Bestimmen Sie die Änderungszeit des vom Browser angeforderten Dateipfads über statObj.ctime
        const ctime = statObj.ctime.toUTCString();
        // Browser-Anforderungsheader if-modified-since === die letzte Änderungszeit der Datei. Wenn der Verhandlungscache erreicht wird, wird 304 zurückgegeben. Ressource im Browsercache anfordern if (req.headers["if-modified-since"] === ctime) {
          res.statusCode = 304; //Gehe zum Browser-Cache, um res.end(); zu finden. //
        } anders {
          // if-modified-since !== die letzte Änderungszeit der Datei, der Antwortheader Last-modified setzt die Änderungszeit der aktuellen Anforderungsdatei auf den entsprechenden Wert von last-modify-since in der nächsten Browseranforderung res.setHeader("Last-modified", ctime);
          fs.createReadStream(Dateipfad).pipe(res);
          res.setHeader(
            "Inhaltstyp",
            mime.getType(Dateipfad) + ";charset=utf-8"
          );
        }
      } anders {
        fs.access(htmlPfad, Funktion (Fehler) {
          wenn (Fehler) {
            // Unzugängliche Einstellungen Statuscode 404
            res.statusCode = 404;
            res.end("NICHT GEFUNDEN");
          } anders {
            fs.createReadStream(htmlPath).pipe(res);
            res.setHeader("Inhaltstyp", "text/html;charset=utf-8");
          }
        });
      }
    }
  });
  // Sie können den Dienst starten, indem Sie nodemon cache2.js unter http://localhost:3000/ ausführen. 
});
server.listen(3000, () => {
  console.log("Serverstart 3000");
});

Effektanzeige

console.log(req.url); wird bei jedem Aktualisieren der Seite ausgeführt. Der Server wird angefordert, aber der Server gibt 304 zurück. Der Verhandlungscache wird erreicht und der Browser kann die zwischengespeicherten Ressourcen direkt lesen.

Erfolg

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung von Node zum Implementieren des statischen Datei-Cachings. Weitere relevante Inhalte zum statischen Datei-Caching von Node finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!