浏览器缓存之强缓存和协商缓存

为什么需要缓存?

- 缓存的优点:

1.减少对服务器的访问次数,减轻了服务器的压力

2.节省用户网络带宽(就是省钱,带宽都是按流量算钱的)

3.从缓存读取更匀速减少等待优化了用户体验

- 缓存的缺点

资源被缓存后用户不能及时获取不到最新的资源,所以缓存不能乱用

强缓存

涉及的http头:

1.expires: 资源的过期时间 是一个绝对时间

2.cache-control: 多个字段组合对缓存的控制 为了解决expires是绝对时间可能不准的弊端

        - max-age: 缓存生效的时间长度 单位是s 在expires上加了一个最大可用时长

        - no-cache: 设置浏览器不能直接用缓存,必须先询问服务器缓存是否有效才能使用缓存

        - no-store: 禁止缓存,只能从服务器端获取最新资源

浏览器会根据expires来判断缓存是否可用

expires和cache-control同时设置后者优先级更高

因为expires是绝对时间,客户端和服务端的时间可能会误差,客户端的时间是可以手动设置的,所以有弊端,所以才有了cache-control,它的max-age是相对时间,还能设置浏览器用不用缓存机制

协商缓存

因为强缓存是客户端处理是否读取缓存的,不会请求服务器验证缓存是否可用,只要没到expires的过期时间就会一直使用,导致服务器在expires时间内资源发生了变化客户端获取不到最新资源,于是就有了协商缓存和服务器进行协商缓存是否可用

涉及的http头:

1.last-modify/if-modified-since 文件最后修改时间

2.etag/if-none-match 文件的唯一标识 文件修改就会生成一个新的唯一标识

last-modify和etag同时设置服务器会优先验证etag,etag一致再验证last-modify,如果都一致则返回304让浏览器读缓存,否则返回最新的资源

上述的http头都是成对使用的,浏览器首次请求资源服务器响应头会返回一个last-modify或者etag,浏览器再次请求同一资源时就会在请求头中设置另一个头将其带过去给服务器验证

既生last-modify何生etag?

http1.1中的etag是解决last-modify的弊端:

- last-modify只能精确到秒级,如果一个资源的last-modify和if-modified-since在一秒内发生修改会导致时间不准缓存失效拿不到最新的资源

- 有些定期生成的文件也会导致last-modify发生变化但是文件内容并没有变化导致缓存无法复用

- 可能存在服务器没有设置准确的最后修改时间或者与代理服务器的时间不一致等情况导致缓存照样更新

浏览器加载资源过程

1.浏览器首次请求资源:

2.浏览器加载已经请求过的资源

响应头总结

1.强缓存

响应头：

cache-control: max-age: 60

expires: 过期时间

如果没过期，直接用，如果过期了， 发请求

2.协商缓存

响应头：

last-modify: 时间 最后修改时间

etag: 服务器文件的唯一标志

请求头：

if-modify-since: 上次返回的last-modify

if-none-match: 上次返回的etag

对一些周期性固定不变的数据使用强缓存,对一些变化频繁的数据使用协商缓存,协商缓存验证优先级大于强缓存

请求响应头总结

浏览器要求服务器特定行为,设置请求头

服务器要求浏览器特定行为,设置响应头