您的位置:

请求304:缓存优化的重要一步

一、什么是请求304?

请求304,即HTTP协议状态码中的“Not Modified”,表示客户端发送的请求资源未被修改过,服务器返回该状态码,告诉客户端可以直接使用缓存数据,不需要再次请求该资源。这样可以有效减少网络传输数据量,加快网页显示速度,提高用户体验。

二、为什么要使用请求304?

常规的HTTP请求会将所有资源都重新请求一遍,这样无论资源是否被修改都会重新传输一遍数据。这种不必要的网络传输会带来很多负荷,影响网页的加载速度和用户体验。

而使用请求304,可以实现缓存命中,不用重新下载文件,只需获取元数据,减轻了服务器的负担,提高了页面加载速度,节省了带宽资源,降低了成本。

三、如何使用请求304?

要使用请求304,需要在HTTP头部添加一些特殊的信息来控制浏览器缓存。例如:指定资源缓存时间,设置Etag标记等。

// 服务端代码示例
const fs = require('fs');
const http = require('http');
const path = require('path');
const md5 = require('md5');

http.createServer((req, res) => {
  const fileName = path.resolve(__dirname, './public/index.html');
  
  fs.readFile(fileName, (err, data) => {
    if (err) {
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('文件不存在!');
    } else {
      const etag = md5(data);
      const lastModified = fs.statSync(fileName).mtime.toUTCString();
      const ifNoneMatch = req.headers['if-none-match'];
      const ifModifiedSince = req.headers['if-modified-since'];
      
      if (etag === ifNoneMatch || lastModified === ifModifiedSince) {
        res.writeHead(304, { 'Content-Type': 'text/plain' });
        res.end();
      } else {
        res.writeHead(200, { 
          'Content-Type': 'text/html', 
          'Cache-Control': 'max-age=30', // 缓存时间 30s 
          'Last-Modified': lastModified, // 最后修改时间 
          'Etag': etag, // Etag 标记 
        });
        res.end(data);
      }
    }
  });
}).listen(3000);

四、请求304的注意事项

请求304需要配合缓存机制使用,控制缓存时间和缓存的范围。同时,需要注意以下两点:

1、缓存文件不一定会被跨站脚本攻击(XSS)利用,但是一定会减少缓存时间,在安全性和效率之间进行取舍。

2、Etag和Last-Modified必须同时存在,如果某个浏览器不支持Etag,该请求将会失效。

五、应用请求304的场景

请求304多用于一些静态的资源文件,例如JavaScript、CSS、图片等。减少文件请求的次数,同时启用浏览器缓存,提高数据的交互效率。

此外,在数据量较大的情况下,请求304可以显著降低网络传输量,减小数据压力,提高用户体验。