您的位置:

if-modified-since 的使用与应用

一、什么是 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>