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