Open homobulla opened 6 years ago
页面的缓存状态由Response Headers决定。
Response Headers
Age:23146 Cache-Control:public,max-age=2592000 (public:指定响应会被缓存，并且在多用户间共享, max-age:设置缓存最大的有效时间) Date:Tue, 28 Nov 2017 12:26:41 GMT ETag:W/"5a1cf09a-63c6" (基于内容生成) Expires:Thu, 28 Dec 2017 05:27:45 GMT Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT ( 服务器端文件的最后修改时间) Vary:Accept-Encoding
Expires是HTTP/1.0中的定义缓存的字段，它规定了缓存过期的一个绝对时间。Cache-Control:max-age=2592000是HTTP/1.1定义的关于缓存的字段，它规定了缓存过期的一个相对时间。优先级上当然是版本高的优先了，max-age > Expires。
这就是强缓存阶段，当浏览器再次试图访问这个CSS文件，发现有这个文件的缓存，那么就判断根据上一次的响应判断是否过期，如果没过期，使用缓存。加载文件，OVER！
多说一点：关于缓存是从磁盘中获取还是从内存中获取，查找了很多资料，得出了一个较为可信的结论：Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。这就可以比较合理的解释了为什么同一个资源有时是from memory cache有时是from disk cache的问题了。
利用这两个字段浏览器可以进入协商缓存阶段，当浏览器再次试图访问这个CSS文件，发现缓存过期，于是会在本次请求的请求头里携带If-Moified-Since和If-None-Match这两个字段，服务器通过这两个字段来判断资源是否有修改，如果有修改则返回状态码200和新的内容，如果没有修改返回状态码304，浏览器收到200状态码，该咋处理就咋处理(相当于首次访问这个文件了)，发现返回304，于是知道了本地缓存虽然过期但仍然可以用，于是加载本地缓存。然后根据新的返回的响应头来设置缓存。(这一步有所差异，发现不同浏览器的处理是不同的，chrome会为304设置缓存，firefox则不会)😑
具体两个字段携带的内容如下(分别和上面的Last-Modified、ETag携带的值对应)：
If-Moified-Since: Tue, 28 Nov 2017 05:14:02 GMT If-None-Match: W/"5a1cf09a-63c6"
最后一张图展示过程：
参考资料：
浏览器的缓存
缓存在宏观上分两类：
微观上分三类：
浏览器的缓存策略
页面的缓存状态由
Response Headers决定。1.强缓存阶段
Expires是HTTP/1.0中的定义缓存的字段，它规定了缓存过期的一个绝对时间。Cache-Control:max-age=2592000是HTTP/1.1定义的关于缓存的字段，它规定了缓存过期的一个相对时间。优先级上当然是版本高的优先了，max-age > Expires。
这就是强缓存阶段，当浏览器再次试图访问这个CSS文件，发现有这个文件的缓存，那么就判断根据上一次的响应判断是否过期，如果没过期，使用缓存。加载文件，OVER！
多说一点：关于缓存是从磁盘中获取还是从内存中获取，查找了很多资料，得出了一个较为可信的结论：Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。这就可以比较合理的解释了为什么同一个资源有时是from memory cache有时是from disk cache的问题了。
2.协商缓存阶段
利用这两个字段浏览器可以进入协商缓存阶段，当浏览器再次试图访问这个CSS文件，发现缓存过期，于是会在本次请求的请求头里携带If-Moified-Since和If-None-Match这两个字段，服务器通过这两个字段来判断资源是否有修改，如果有修改则返回状态码200和新的内容，如果没有修改返回状态码304，浏览器收到200状态码，该咋处理就咋处理(相当于首次访问这个文件了)，发现返回304，于是知道了本地缓存虽然过期但仍然可以用，于是加载本地缓存。然后根据新的返回的响应头来设置缓存。(这一步有所差异，发现不同浏览器的处理是不同的，chrome会为304设置缓存，firefox则不会)😑
具体两个字段携带的内容如下(分别和上面的Last-Modified、ETag携带的值对应)：
最后一张图展示过程：
参考资料：