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

小蓝 • 2024-12-31 11:49 • 编程

一、什么是请求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可以显著降低网络传输量，减小数据压力，提高用户体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303041.html