キャッシュを比較 (ネゴシエート)
キャッシュを使用するか、データを再フェッチするかを比較して決定します。これにより、ネットワーク リクエストが削減され、パフォーマンスが向上します。
コントラスト キャッシュの仕組み
クライアントが初めてサーバーをリクエストすると、サーバーはデータをキャッシュし、クライアントに送信されるキャッシュ識別子を生成します。クライアントがサーバーを 2 回目にリクエストすると、キャッシュ識別子は文字として送信されます。サーバー、サーバーはキャッシュ識別子に従って判断します。キャッシュ識別子が同じ場合、サーバーはキャッシュが期限切れかどうかを判断します。そうでない場合、サーバーは 304 を返し、クライアントにキャッシュを使用するように指示します。キャッシュ識別子が異なる場合、サーバーは 200 を返し、同時に新しいデータを返します。
- クライアント：
if-modified-since - サーバー:
Last-Modified最終更新時刻を比較してコンテンツを返します
欠点は、コンテンツが変更されずに変更時間が変更された場合、コンテンツが再度読み取られることです。時刻は正確ではなく (秒まで正確ではありません)、1 秒以内に複数回変更された場合は、コンテンツが再読み込みされません。監視される。
次にファイルの更新時刻が正しいかどうかを判断し、同じであれば直接304を返してリードキャッシュに伝えます。
新しいcache.jsファイル
const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");
const server = http.createServer((req, res) => {
const {
pathname } = url.parse(req.url);
const filePath = path.join(__dirname, pathname);
console.log(pathname);
res.setHeader("Cache-Control", "no-cache");
// 第二次请求会带上 if-modified-since 请求头
let ifModifiedSince = req.headers["if-modified-since"];
fs.stat(filePath, (err, statObj) => {
if (err) return res.end();
let lastModified = statObj.ctime.toGMTString();
// 判断文件的修改时间是否对的上，一样的话直接返回 304 告诉读取缓存
if (ifModifiedSince && lastModified === ifModifiedSince) {
res.statusCode = 304;
return res.end();
}
res.setHeader("Last-Modified", lastModified);
if (err) return (res.statusCode = 404), res.end("Not Found");
// 判断是否是文件
if (statObj.isFile()) {
fs.createReadStream(filePath).pipe(res);
} else {
res.statusCode = 404;
res.end("Not Found");
}
});
});
server.listen(5000);
次に、新しいパブリック フォルダーを作成し、追加しますindex.html。style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>凯小默测试对比缓存：通过修改时间</title>
</head>
<body>
<link rel="stylesheet" href="/public/style.css">
</body>
</html>
body {
background-color: seagreen;
}
サービスを開始し、 にアクセスするhttp://127.0.0.1:5000/public/index.htmlと、2 回目に要求されたリソースが 304 になることがわかります。
nodemon cache.js
ファイルを変更しstyle.css、背景をピンクに変更してアクセスを更新すると、ステータス コードが 200 に変更され、新しいリソースが読み取られたことがわかります。
body {
background-color: pink;
}
