We often encounter such a scenario in web development, there are some larger and commonly used resources (such as images, documents, js, css), open at page initialization time does not need to use, but the user interaction with the page when the action triggers certain conditions need these resources (for example, we may not be open microblogging to see trending, but most of the time we'll see the click-hot search hot search news).
So the question is, if the user clicks to view trending, we went to load trending data corresponding resources required, it is very passive. Because in the most commonly used functions, to wait for time-consuming, this is actually not a very good experience for the user. So, our first thought is to load some resources to advance these browser cache, this paper describes two different http caching mechanism.
A, http1.0-- use Expires, Last-Modified
Forced cache : In http1.0 era, when the client to acquire pictures, documents and other resources from the address cache, we respond by setting the Expires header field to a given point in time, on the request and with the resource response body together back to the client browser, and together are stored in the cache, then the next time we request the same path address to get resource request to obtain forced browser from the cache and return a 200 status code. When the local time of the browser over time Expires field is set, the cache resource failure, need to go again when the server requests the path to re-access to resources.
Cache consultations : some possible changes in the larger resources, we need them to make timely updates, but want to continue to use this cache in an efficient manner, then we will no longer use Expires, but using the Last-Modified field to a resource record of the last modification time, this field together with the same resource on return together to the client. When the browser requests the second path, incidentally, the value of this field into the request header, but this time will change a field name into If-Modified-Since, if the server's resources to change, then this is certainly the resource file there will be a new change modification time, the server will be a new time and a contrast of old time, inconsistencies are found, the new resources into the response body, the new response time into the head, returned to the client, the client to update the cache resources, 200 status code. If the new time is consistent with the old time, indicating that the resource has not changed, the return status code 304 Not Modified, after receipt browser, you can take resources from the cache. The following is a detailed process steps:
1⃣️ . According to a particular client obtains path resources, then the server side basic information automatic packaging http target resource (including response header, in response to the body), the Expires indicate when the resource expires, Last-Modified indicates the last resource Change the time.
2⃣️ . Browser to get resources into the cache, we need to use.
3⃣️ . When the user needs to use the resource function, first check is mandatory buffer cache or consultation, direct access to the former, if both Last-Modified, Expires exist to force the cache priority. If the cache is again only consultative same path sends the request to the server at this time of the request header that came on the last modified time of the resource .
4⃣️ . According to the basic server path information, check the latest resources, is consistent with the basic information requested. If the same result is returned 304 NotModified, this time not to return to the server resources, but then return to a basic redundant information indicates that the client cache resources available. If not, 200 and the latest resources, as well as basic information about the latest resource status code is returned. When the request fails, that is, when the back-end server hang up, here is the return to 304 and continue to use the old cached resources.
Example 304 returns http1.0 follows:
A, http1.1-- using the Cache-Control, age, Etag
In the pictures, we found that the head has returned Cache-Control, Etag these fields, in fact, these are also server-side browser cache control used for the field, but was later upgraded new entrants. When using http1.0 we found that when the time is inconsistent with the local time server, or a cluster deployment, geographical span is too large, it is easy to cause problems cache miss, but at the same time there are two consistent modification of files with each other replace the time, it is difficult to respond in a timely browser. Therefore, we think, can not be directly set a period of time, rather than time point the way to go for an effective check on the resources using the resource content hash value, the hash value to verify the resource changes, this is http1. 1. In http1.1, the cache will still be divided into mandatory consultation cache in two ways, but for the time, content verification method has been optimized.
Forced Cache : 1⃣️ client requests the first address path access to resources, in this case the server response header set into two fields: age and Cache-Control. age is used to indicate the presence of resources in the client cache for how long, because it is the first to obtain resources, so initialized to zero. Cache-Control to indicate validity of the resource, i.e., how long it is present in the client cache, e.g. Cache-Control: max-age =represented within 3600 seconds, the cache is valid resource can be directly used.
When 2⃣️ within 3600 seconds, the client requests the same path, forcibly acquired from the cache, and returns a status code 200.
3⃣️一旦资源占据缓存的时间超过3600秒，客户端重新从服务器获取资源，返回状态码200。
协商缓存：1⃣️客户端第一次获取资源时，服务器在返回头放入字段Cache-Control和Etag。此时的Cache-Control与强制缓存的有点不同，不再是max-age和时间段，而是一个字符串固定值"no-cache"。Etag中放入的值一般为资源内容的哈希或者散列值。与返回体中的资源一同返回给客户端，并将其持久化至缓存。
2⃣️客户端需要再次用到这个地址路径下的资源时，先去缓存中查看该资源的Cache-Control的值，发现为"no-cache"，这时客户端知道了，需要先去后台做资源是否发生变化的校验，于是将该资源的Etag值发给后台，这里Etag的字段名发生变化，变成If-None-Match。
3⃣️后台接收请求旧Etag后与最新的Etag进行比较，若一致，返回304，若不一致，返回200，并在响应体中放一份最新资源，响应头中放一份最新Etag。
4⃣️强制缓存与协商缓存并存时：即Cache-Control值为"max-age=3600,no-cache"，以强制缓存优先。
注：在上图中我们发现1.0和1.1两种写法并存，其实是为了更好的兼容低版本浏览器，因为两个版本各自校验并不冲突。