说明:本篇文章以Chrome浏览器作为客户端,以Websrtom开启nodejs服务端,以请求图片资源示例做代码演示。
一、如何查看浏览器端的缓存
1、chrome://cache,如果出现如下界面,说明浏览器版本较高,不支持直接查看。请采用第二种方式。
2、使用chrome cache view工具
二、缓存控制
HTTP/1.1定义的 Cache-Control 头
用来区分对缓存机制的支持情况, 请求头和响应头都支持这个属性。通过它提供的不同的值来定义缓存策略。
1、禁止进行缓存
缓存中不得存储任何关于客户端请求和服务端响应的内容。每次由客户端发起的请求都会下载完整的响应内容。
Cache-Control: no-store
Cache-Control: no-cache, no-store, must-revalidate
2、强制确认缓存
如下头部定义,此方式下,每次有请求发出时,缓存会将此请求发到服务器(译者注:该请求应该会带有与本地缓存相关的验证字段),服务器端会验证请求中所描述的缓存是否过期,若未过期(注:实际就是返回304),则缓存才使用本地缓存副本。
Cache-Control: no-cache
3、私有缓存和公共缓存
“public” 指令表示该响应可以被任何中间人(译者注:比如中间代理、CDN等)缓存。若指定了”public”,则一些通常不被中间人缓存的页面(译者注:因为默认是private)(比如 带有HTTP验证信息(帐号密码)的页面 或 某些特定影响状态码的页面),将会被其缓存。
而 “private” 则表示该响应是专用于某单个用户的,中间人不能缓存此响应,该响应只能应用于浏览器私有缓存中。
Cache-Control: private
Cache-Control: public
4、缓存过期机制
过期机制中,最重要的指令是 “max-age=”,表示资源能够被缓存(保持新鲜)的最大时间。相对Expires而言,max-age是距离请求发起的时间的秒数。针对应用中那些不会改变的文件,通常可以手动设置一定的时长以保证缓存有效,例如图片、css、js等静态资源。
详情看下文关于缓存有效性的内容。
Cache-Control: max-age=31536000
5、缓存验证确认
当使用了 “must-revalidate” 指令,那就意味着缓存在考虑使用一个陈旧的资源时,必须先验证它的状态,已过期的缓存将不被使用。详情看下文关于缓存校验的内容。
Cache-Control: must-revalidate
三、图片数据请求示例——不使用缓存
nodejs开启服务端,便于Chrome请求数据。
数据交互如下:
http://localhost:8080 :返回字符串
http://localhost:8080/img: 返回图片资源。
server.js
const http = require("http")
const host = "127.0.0.1";
const port = 8080
const server = http.createServer();
const fs = require("fs")
server.on("request", (requstMsg, respone) => {
if (requstMsg.url === "/") {
respone.writeHead(200, "OK", {
"Content-Type": "text/html; charset=utf-8"});
respone.end("请求根路径");
} else if (requstMsg.url === "/img") {
const readStream = fs.createReadStream("../imgs/yxc.jpg")
respone.writeHead(200,"OK",{
"Content-Type":"image/jpeg"
})
readStream.pipe(respone);
}
})
server.listen(port, host, () => {
console.log("服务启动了")
})
说明:后续缓存代码处理,会以此代码为基础修改。
四、图片数据请求示例——使用强缓存
1、如何使用强缓存?
响应头添加Cache-Control