Browser cache
1, the first time the browser opens a Web page access to resources, according to header returned (response header) information to tell how to cache resources.
2, subsequent browser requests
3, when the browser requests a resource, the resource cache will first obtain the header information, determines whether a cache hit strong (cache-control and information expires), if the resource information acquired directly from the hit cache , including cache header information, this request does not communicate with the server, and returns the status code 200
4. If there is no strong hit cache, the browser sends a request to the server, the request carries the first time about the cache returns the header field information (Last-Modified / if-Modified -Since and ETag / the if-None-Match)
. 5, by the server comparison result according to whether the negotiation header information cache hit. If hit, the service returns the corresponding header header header information in response to new information to update the cache, and a 304 status code, but does not return the contents of the resource, it tells the browser can get directly from the cache; otherwise, it returns the latest resource content.
// 协商缓存
// 第一次返回的响应头
Last-Modified: Mon, 02 Jul 2018 08:21:56 GMT
etag: "20e340c70bd7c739e5e633b5c0ee705a"
// 如果强缓存失效，则请求的时候，浏览器会带上第一次响应头的Last-Modified 和 etag的值得
If-Modified-Since: Mon, 02 Jul 2018 08:21:56 GMT // 上次返回的Last-Modified的值
If-None-Match： "20e340c70bd7c739e5e633b5c0ee705a" // 上次返回的etag的值Flowchart is as follows:
The difference between strong and consultation Cache Cache:
Cache | access to resources in the form | state code | sends a request to the server
--- |: -: | --- | - |
strong cache | taken from the cache | 200 (from cache) | No, direct access from the cache
negotiation cache | it from cache | 304 (not modified) | that the server tells the browser cache is available
Consultations cache header field
Response headers:
1.etag: When the server responds, telling the browser current resources (generation rule determined by the server) that uniquely identifies the server.
2.Last-Modified: indicates that the last modified time response resources.
Request headers:
1.If-None-Match: 当资源过期时候，浏览器法相响应头里有Etag，则再次向服务器请求时带上请求头if-none-match（值是etag的值）。服务器收到请求进行对比，决定返回200 或者304
2、If-Modified-Since:当资源过期时（浏览器判断cache-control标识的max-age过期），发现响应头具有last-Modified声明，则再次像服务器请求时带上if-modified-since，表示请求时间。服务器收到请求后发现有if-modified-since则与被请求资源的最后修改时间进行对比（last-modified），若修改时间较新（大），说明资源又被改过，则返回最新资源，http 200 ok。若最后时间较小，说明资源无修改，响应http 304走缓存
为什么既有last-modified 还有etag，两者并存的好处？
http1.1中etag的出现主要是为了解决几个last-modified比较难解决的问题
一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)。
某些服务器不能精确的得到文件的最后修改时间。
这时，利用Etag能够更加准确的控制缓存，因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
用户行为对缓存的影响
| 用户操作 | Expires/Cache-Control | Last-Modified/Etag |
|---|---|---|
| 地址栏回车 | 有效 | 有效 |
| 页面链接跳转 | 有效 | 有效 |
| 新开窗口 | 有效 | 有效 |
| 前进后退 | 有效 | 有效 |
| F5刷新 | 无效 | 有效 |
| Ctrl+F5强制刷新 | 无效 | 无效 |
文章只是之前在网上学习的笔记，如有雷同，请联系