一、什么是请求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
微信扫一扫
支付宝扫一扫