http 缓存
为了让页面加载的更快,尽可能减少网络请求的数量和体积。
1 强制缓存
强制缓存实现的步骤:
- 当客户端需要服务器的资源时,会向服务器发送 http 请求。
- 服务器在初次接收到客户端正确的请求时,会向客户端返回对应的资源。当服务器认为某种资源是长期不发生改变的时,就会在该请求返回时,设置响应头为 cache-control: max-age=31536000 ,max-age 的内容是以秒为单位的时间值。
- 浏览器接收了服务端的响应。
- 浏览器并非初次向服务器发送请求时,浏览器会通过 max-age 的时间来判断缓存是否失效。如果没有失效,则请求不会发送到服务器,所需要的资源直接从本地缓存中获取;如果已经失效,则请求会发送到服务器,此时,服务器返回200的状态码,并继续判断当前所请求的资源是否可以进行强制缓存如果可以进行强制缓存,则携带 cache-control 头,并设置强制缓存时间,如果不能进行强制缓存不设置缓存时间。
总的来说:核心就是判断 cache-control 的时间是否过期,没过期就直接用;当缓存失效,服务端会在请求时,再给一次 cache-control。特别要注意的是能否进行缓存的条件,是服务端响应头设置的。
cache-control可以设置的值:
- max-age: 设置缓存时间,最大过期时间
- no-cache: 不用本地缓存,正常向服务器端请求
- no-store:不用本地缓存和服务端缓存,直接让服务端重新发送
- private: 只允许最终用户(最终接受的设备,如PC)缓存
- public: 中间的路由也可以缓存
2 协商缓存(对比缓存)
协商缓存实现的步骤:
- 当客户端需要服务器的资源时,会向服务器发送 http 请求。
- 服务器在初次接收到客户端正确的请求时,会向客户端返回对应的资源。当服务器认为某种资源是可以进行协商缓存时,就会设置响应头为 Last-Modified或Etag。
- 浏览器接收了服务端的响应。
- 浏览器并非初次向服务器发送请求时,服务端会判断请求头中的 If-Modified-Since或If-None-Match,对于前者是判断资源的的最后修改时间,如果修改时间与服务器相同,即可从本地资源中直接取出对应的资源;对于后者是判断资源生成的唯一标识是否相同,如果与服务器相同,即可从本地资源中直接取出对应的资源。
总的来说:核心就是服务器判断 客户端资源是否和服务端资源一样,一致则返回304,否则返回200和最新的资源及资源标识符。
Last-Modified 记录资源的最后修改时间,单位是秒;Etag 是资源的唯一标识,是一段区别不同资源的字符串具有唯一性。两者都可以作为协商缓存的区分条件,可以一起使用,如果要只选择一个作为判断条件,最好选择 Etag,因为Last-Modified 只能精确到秒级,如果资源被重复生成,而内容不变,则Etag更精确(Etag是根据资源内容计算的,只要资源不发生改变,Etag生成的结果就不会发生改变)
3 两种缓存的区别
发生强制缓存时,客户端的请求不会发送到服务端。而协商缓存还是需要将请求发给服务端的。