浏览器缓存学习札记
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
缓存的类型有很多种,服务器缓存,浏览器缓存,代理缓存等。本文主要讲一下浏览器的缓存原理,主要是依赖HTTP协议来控制。
使用缓存有以下优点
- 减少冗余的数据传输
- 缓解网络瓶颈的问题
- 降低了对服务器的要求
- 降低了距离时延
缓存原理
我们知道浏览器端发送的一个常规的HTTP请求,得经过三次握手阶段,影响响应速度有服务器、网络、距离等原因。这过程的优化手段非常的多,包括前段和服务端,若是能够命中缓存,直接获取到请求的内容,则大大的提高了用户体验。
缓存分为命中与未命中,命中则直接获取。未命中的话还有再验证过程,也就是新鲜度检查;若再验证命中则返回304,还是未命中就返回200。
常用的缓存头部有:
- Cache-Control
- Expires
- If-Modified-Since
- Last-Modified
- If-None-Match
- ETag
需要说明的是Cache-Control是HTTP/1.1才支持的,优先级比Expires要高。一般通过设置max-age的值控制缓存的时间,以秒为单位。文档在缓存过期之前,无需与服务器打交道。一旦过期,就必须与服务器进行核对,询问文档是否被修改过。
Last-Modified和ETag是条件请求(Conditional Request)相关的两个字段。如果一个缓存收到了针对一个页面的请求,它发送一个验证请求询问服务器页面是否已经更改,在HTTP头里面带上ETag和If Modify Since头。
If-Modified-Since配合Last-Modified工作。服务器修改过会将Last-Modified附加上去,If-Modified-Since是缓存副本的最后修改时间。同理If-None-Match是配合Etag工作的。但Etag的优先级高于Last-Modified,也就是说条件请求的时候先去判断ETag。
既然有Last-Modified,为什么还要用ETag字段呢?因为如果在一秒钟之内对一个文件进行两次更改,Last-Modified就会不正确。因此,HTTP/1.1利用Entity Tag头提供了更加严格的验证。
缓存机制示意图第一次请求示意图:
第二次请求示意图:
缓存还跟用户的行为有关
用户操作 Expires/Cache-Control Last-Modified/Etag 地址栏回车 有效 有效 页面链接跳转 有效 有效 新开窗口 有效 有效 前进、后退 有效 有效 F5刷新 无效 有效 Ctrl+F5刷新 无效 无效
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
近期评论