-
背景
相同内容静态资源,可以通过读取本地缓存的静态资源,以达到提高网页性能,读取本地缓存速度比从服务器上获取速度快,并且没有网络IO
-
缓存原理
-
缓存参数
Cache-Control
- 代理与浏览器都可以缓存 -- pubilc
- 仅仅浏览器可以缓存 -- private
- 禁止浏览器缓存 -- no-cache
- 缓存过期时间,单位秒 -- max-age=
-
Demo
Cache-Control: "max-age=100,private"
-
缓存方案
1. 浏览器端缓存静态资源
2. 服务器端通过对静态资源进行md5运算,运算的值会放在文件名后面
3. 然后会在静态资源引用中引用新的静态资源从而使用最新的静态资源
-
缓存验证
- Last-Modified + If-Modified-Since
Last-Modified 是静态资源上次修改时间
//1. 服务器在响应头中返回1个头 Last-Modified 包含当前静态资源的上次修改时间
//2. 浏览器请求时会携带 If-Modified-Since 给服务端
//3. 服务端会读取这个If-Modified-Since获取客户端缓存静态资源上一次修改时间对比保存在服务器端静态资源上次修改时间,如果一致则返回空,头部包含Last-Modified为If-Modified-Since值一样,不一样返回新的Last-Modified与新的静态资源
//4. 客户端对应Last-Modified决定使用本地缓存还是缓存新的静态资源并使用
- Etag + if-none-match
Etag 是静态文件的数字前面
// 1. 服务器端响应时将静态资源文件进行MD5运算产生文件的签名,返回给客户端
// 2. 客户端下次请求会携带 if-none-match 头给服务端,服务端可以读取该值然后比较该值,如果相等则直接返回一样的Etag,不返回静态资源,如果不一样返回新的Etag并返回新的静态资源
// 3. 客户端对比Etag决定使用本地缓存还是缓存新的静态资源并使用