先看一下 淘宝首页打开之后再刷新 之后Network 中的几个图片
两种方式.png
png图片.png
这里边用了内联图片, 也就是之前说的,直接请求了图片资源跟着dom一起返回 ,好处就是减少了http发到服务器请求这个资源 . http 请求数量变少.
script.png
那么问题来了 是什么让这三个文件的加载方式不一样 ?
- 理解cache-control所控制的缓存策略
- 学习理解last-modified和etag以及整个服务器端浏览器端的缓存流程
- 基于node实践以上缓存策略
Cache-Control
- max-age
- s-maxage
- private
- public
- no-cache
- no-store
第一个max-age
max-age.png
max-age 也就是缓存过期时间, 在max-age 以内的时间都读的是缓存里边的内容, 而不会再发请求到服务器获取资源,
expires 是http1.0里边的属性, cache-control 是http 1.1 之中加的属性, 专门用来控制缓存的. 设置了max-age 的优先级更高.
image.png
第二个s-maxage . 那么这个跟第一个有啥区别 ? s-maxage 也是设置一个最大的过期时间, 但是他设置的是访问public 类型的资源. 比如CDN上边的静态资源.能被很多用户访问和读取信息.
淘宝首页里边的设置了s-maxage的都是alicdn 里边的资源.
private 的缓存是用户只能自己访问的资源.
public 就是刚才说的静态资源 .
no-cache天猫中 对于用到的gif 文件用的都是no-cache 代表不缓存过期的资源，缓存会向服务器进行有效处理确认之后处理资源
还有部分的script 也是不缓存.
no-cache指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
no-store 是完全不存.
last-modified 有什么缺点?
- 某些服务器不能获取精确的修改时间
- 文件修改时间改了,但文件内容却没有变.
斗鱼首页的图片
etag.png
etag 是一个哈希值 , 如果变更 哈希值就变了 , 用于浏览器和服务器之间文件比较.
毕竟比较时间 不是特别精确地方式.
分级缓存策略
分级缓存策略.png
先说最上边, 新访问个网站,缓存肯定没有全部肯定取新的. 所以都是200 . 从服务器来取.
最下边. 在有效期内, 浏览器就直接去本地缓存的内容.
中间的304 ,就需要跟服务器对比是不是服务器那边发生变更了 ,浏览器还没有变? 如果服务器没有变化, 则返回304 Not Modified .这时候读的是本地的资源
总体上可以总结成2 张图
cache配置.png
分级缓存图.png
网友评论