一、什么是 if-modified-since
if-modified-since 是一个 HTTP 协议中的头信息,其作用是告诉服务器获取资源的时间。与资源上次修改时间进行对比,判断是否需要重新获取资源。
如果客户端已经有过该资源,而该资源没有发生任何修改,那么服务器会返回状态码为 304。这时客户端就可以直接使用本地缓存的该资源,从而提高页面的加载速度。
二、 if-modified-since 的实现原理
if-modified-since 使用的是 HTTP 协议中的条件请求机制。它是通过客户端在请求头中加上 If-Modified-Since 字段来实现的。
当客户端第一次请求资源时,服务器会将该资源的相关信息以及 Last-Modified 字段一起返回给客户端。客户端将 Last-Modified 存储在缓存中。
当客户端再次请求资源时,在请求头中添加 If-Modified-Since 字段,其值为客户端记录的 Last-Modified 值。服务器接收到请求后,会将该值与该资源的 Last-Modified 值进行比较。若相同,则返回 304 状态码,告诉客户端使用本地缓存。否则服务器会返回新的资源,并更新 Last-Modified 值。
三、 if-modified-since 的应用场景
if-modified-since 主要用于静态资源的缓存,比如图片、CSS、JS 等。这样客户端在第一次请求之后,如果该资源没有发生变化,就可以使用本地缓存,提高网页加载速度。
除了静态资源以外,if-modified-since 还可以用于动态页面的缓存。比如在博客网站上,可以使用 if-modified-since 缓存博客文章页面。这样当用户二次访问同一篇文章时,如果文章没有发生修改,就可以直接使用本地缓存,提高打开速度。
四、 if-modified-since 的使用示例
// 服务器端代码 const fs = require('fs'); const http = require('http'); const path = require('path'); const server = http.createServer((req, res) => { const filename = path.join(__dirname, 'public', req.url); fs.stat(filename, (err, stats) => { if (err) { res.statusCode = 404; res.end('404 Not Found'); return; } const lastModified = stats.mtime.toUTCString(); if (req.headers['if-modified-since'] === lastModified) { res.statusCode = 304; res.end(); return; } res.setHeader('Last-Modified', lastModified); fs.createReadStream(filename).pipe(res); }); }); server.listen(3000, () => { console.log('Server is listening on port 3000'); });
// 客户端代码if-modified-since Demo <script src="http://localhost:3000/index.js"></script>