Browser caching mechanism

Some of the file data needs to be cached during the recent project, so we can sort out some information about the browser caching mechanism.

Summary:
1. Expires Expiration Time
2, Cache-control cache mechanism [MAX-AGE=300] cache time 300 means 5 minutes
3, Last-modified last modified time corresponding to the request head has If-modified-since
4, Etag Unique identifier generated by the server corresponding to the request header has If-no-match
Priority: Etag > Last-modified > Expires

Browser caching mechanism, in fact, is mainly the HTTP protocol definition of the caching mechanism (such as: Expires; Cache-control, etc.).
But there are also non-HTTP protocol-defined caching mechanisms, such as the use of HTML Meta tags, web developers can be in the HTML page The code is as follows:

<http-equiv= "Pragma"  content= "No-cache">

The purpose of the above code is to tell the browser that the current page is not cached, each access needs to go to the server pull.
It is easy to use, but only some browsers can support it, and all cache proxies are not supported because the agent does not parse the HTML content itself.

Here I mainly describe the caching mechanism defined by the HTTP protocol.

1. Expires strategy
Expires is a Web server response message header field that, in response to an HTTP request, tells the browser that the browser can cache data directly from the browser before the expiration time, without having to request it again.

2. Cache-control Strategy
Cache-control is consistent with expires, which indicates the validity of the current resource, whether the browser caches data directly from the browser or re-sends the request to the server.
But Cache-control more choice, more detailed settings, if set at the same time, its priority is higher than expires.

<1>http protocol Header Cache-control: values can be public, private, No-cache, No-store, No-transform, Must-revalidate, Proxy-revalidate, Max-age
The instructions in each message have the following meanings:
(1) Public indicates that the response can be cached by any buffer.
(2) Private indicates that the entire or partial response message for a single user cannot be shared with the cache. This allows the server to simply describe a partial response message for the user, and this response message is not valid for another user's request.
(3) No-cache indicates that the request or response message cannot be cached
(4) No-store is used to prevent the inadvertent release of important information. Sending in the request message will make the request and response messages do not use the cache.
(5) Max-age indicates that the client can receive a response that is not longer than the specified time (in seconds).
(6) Min-fresh indicates that the client can receive a response that is less than the current time plus a specified time.
(7) Max-stale indicates that the client can receive a response message that exceeds the timeout period. If you specify a value for the Max-stale message, the client can receive a response message that exceeds the specified value for the timeout period.

<2>last-modified/if-modified-since
Last-modified/if-modified-since to be used with Cache-control.
(1) Last-modified: Indicates the last modification time of this response resource. When the Web server responds to a request, it tells the browser the last modification time of the resource.
(2) If-modified-since: When the resource expires (using the Max-age identified by Cache-control) and the discovery resource has a last-modified declaration, the request to the Web server is again taken with If-modified-since. Represents the request time.
When the Web server receives the request, it finds that the header if-modified-since is compared to the last modification time of the requested resource.
If the last modification time is newer, indicating that the resource has been changed, then response to the entire resource content (written in the response message packet), HTTP 200;
If the last modification time is older, indicating that there are no new modifications to the resource, respond to HTTP 304 and tell the browser to continue using the saved cache.

<3>etag/if-none-match
Etag/if-none-match should also be used in conjunction with Cache-control.
(1) When the Etag:web server responds to a request, it tells the browser the unique identity of the current resource on the server (the build rule is determined by the server).
In Apache, the value of the ETag, by default, is obtained by hashing the file's index section (INode), size, and last modified time (MTime).
(2) If-none-match: When a resource expires (using Cache-control-identified max-age) and the discovery resource has a etage claim, it is requested again with the top If-none-match (etag value) to the Web server.
When the Web server receives the request, it finds that the header if-none-match is compared to the corresponding check string for the requested resource and decides to return 200 or 304.

3, ask questions:
<1> since we have last-modified, why do we need the etag?
A: The HTTP1.1 of the etag is mainly to solve a few last-modified more difficult to solve the problem:
(1) The last modification of the Last-modified label can only be accurate to the second level, if some files within 1 seconds, has been modified multiple times, it will not be able to accurately mark the file modification time
(2) If some files are generated on a regular basis, and sometimes the content does not change, but the last-modified changes, causing the file to be unable to use the cache
(3) It is possible that the server did not accurately obtain the file modification time, or inconsistent with the proxy server time and other situations
An etag is a unique identifier on the server side of a server that is automatically generated or generated by the developer, allowing more accurate control of the cache.
Therefore last-modified and etag can be used together, the server will first verify the etag, consistent with the case, will continue to compare to last-modified, and finally decide whether to return 304.

<2> which requests cannot be cached?
A. Requests that cannot be cached by the browser:
(1) HTTP message header contains Cache-control:no-cache,pragma:no-cache, or cache-control:max-age=0, etc. to tell the browser not to cache the request
(2) A dynamic request that determines the input content according to the cookie, authentication information, etc. cannot be cached
(3) After the request of HTTPS security encryption (also someone after testing found that IE actually added cache-control:max-age information in the head, Firefox after the head joined Cache-control:public, Ability to cache HTTPS resources)
(4) Post request cannot be cached
(5) The HTTP response header does not contain Last-modified/etag, and requests that do not contain cache-control/expires cannot be cached

4, note: Generally speaking, you can set the main page (index.html) cache time setting is relatively short, some settings do not cache, so that the page file is new;
Want to use the new JS file, modify the page <script src= "test.js?version=v1.2" ..., so the browser is to pull the new JS.

5. In the message header of the HTTP request and response, the common cache-related message headers are:

Browser caching mechanism