Browser caching mechanism

Expires policy

Expires is the web server response header field, which tells the browser that the browser can read data directly from the browser cache before the expiration time when responding to HTTP requests without requiring another request.

The web server tells the browser to use the cache file before GMT: Tue, 27 Jun 2017 02:15:13.

Expires is the content defined by HTTP 1.0. Now most browsers use HTTP 1.1 by default, so it is less effective.

Cache-Control

1. Cache control header

Cache control is the first field to control cache behavior in http。 Cache control can control whether the browser accesses data directly from the browser cache or resends the request to the server.Cache control has more options and more detailed settings. If it is set at the same time, its priority is higher than expires

2. Cache control in request header

request headerincache-controlThere are several optional values for:no-cahce,no-store,max-age,max-stale,min-fresh,only-if-cached

In the browser, there are two main ways to initiate a request:

• When a link is opened, the browser will automatically initiate a request. In this process, there is no way to specifyrequest headerMediumcache-control, in the requestcache-controlIt is specified by the browser, different browserscache-controlThe value of will vary, usuallycache-controlThe value ismax-age=0

• In JavaScript, we can make requests through Ajax, and throughxhr.setRequestHeader('cache-control', 'xxx')To specify the requestedcache-controlThe value.

cache-controlThere are many values of, so how do different values affect the browser’s processing of requests? After my testing (using chrome, opera browser), in most cases（request headerMediumcache-controlThe value is:no-store，max-age，max-stale，min-fresh，only-if-cached, response content is setmax-age）, if the requested resource does not expire, the browser will not send a request to the server, but directly obtain the resource from the browser cache; if the requested resource expires, the browser will send a request to the server, waiting for the response of the server, if the server determines that the resource has not been modified, it will return304The status code tells the browser to fetch the data in the cache directly; if the resource changes, the server will return the new resource and return200Status code (server is throughif-Modified-Sinceandif-None-MatchTo determine whether the resource has been modified.

However, there are two exceptions:

• If inrequest headerDesignated incache-controlThe value isno-cache, the browser will make a request to the server,Re request resources from serverNo matter whether the local resource expires or changes, the server will also resend the resource.

• If inrequest headerDesignated incache-controlThe value ismag-age=0, the browser will send a request to the server and wait for the server’s response. If the server determines that the resource has not been modified, it will return304The status code tells the browser to fetch the data in the cache directly. If the resource changes, the server will return the new resource and return200Status code.

3. Cache control in response header

response headerMediumcache-controlIndicates how browsers cache response content

Cache response instruction	Explain
no-cache	Do not cache expired resources. You must confirm the validity to the server before providing cache resources
no-store	Do not cache anything in response
max-age	Maximum age value of response
public	Indicates that the response can be cached by any object (including the client sending the request, the proxy server, and so on)
private	Indicates that the response can only be cached by a single user, not as a shared cache (that is, the proxy server cannot cache it)
must-revalidate	The cache must verify the state of the old resource before it can be used, and the expired resource cannot be used.
no-transform	Agent cannot change media type
proxy-revalidate	Require the intermediate cache server to reconfirm the response validity of the cache
s-maxage	Maximum age value of the public cache server response for the cache server

The browser will accept the response from the server according toresponse headerMediumcache-controlTo decide what to do with the response content, here are some commoncache-controlinstructions

• no-cache:no-cacheDoes not mean not cache expired resources. A resource’scache-controlThe value isno-cacheWhen the resource is requested again, the browser will send a request to the server to confirm whether the resource has been modified. If it has not been modified, the server will return the response status code 304, and the browser will obtain the resource from the cache. If the resource in the server has been modified, the server will return the new resource, and return the response status code 200, and the browser will obtain the resource from the response body source

• no-store:no-storeIt represents not caching, if the responsecache-controlThe value isno-store, the browser will not cache the response body. When the resource is requested again, the browser will send a request to get the resource from the server.

• max-age: when the server returns the response’scache-controlThe value ismax-age=xxxWithin the time range specified by Max age, the browser will not reconfirm the validity of the resource (whether the resource in the server has changed). That is to say, when the resource is requested again, the browser will obtain the resource directly from the cache. At this time, it will not send a request to the server, but there will be a response status code（200 OK from disk cache）When the time range specified by Max age is exceeded, the browser will send a request to the server to confirm whether the resources in the server are consistent with those in the cache. If they are consistent, the response status code 304 (not Modified). The browser obtains resources directly from the cache. If the resources on the server side change, the server will return a new resource and response status code 200. The browser obtains resources from the response body.

Last modified and if modified since

Last modified indicates the last modification time of the server-side file, which requires andcache-controlCommon use,Is a way to check whether the server-side resources are updated。 When the browser makes a request again, it delivers theIf-Modified-SinceHead of the newspaper, askLast-ModifiedWhether the resource has been modified after the time point. If it is not modified, the response status code is 304 and cache is used; if it is modified, go to the server again to request resources. The response status code is 200 and the resources are the latest resources of the server.

Etag and if none match

ETageThe server generates a hash string according to the entity content, which can identify the state of resources and control the cache more accurately. When the browser requests it again, it delivers it to the serverif-None-MatchHeader, the server will compare the Etage value of the resource withif-None-MathTo determine whether the resource has been modified, if not, the response status code is 304, using cache; if modified, the latest resource is returned, the response status code is 200, and the resource is the latest resource of the server.

Last modified vs. Etag

Last-modifiedIt can be used together with Etag. The server will give priority to Etag verification. If it is consistent, it will continue to compare with last modified. Finally, it was decided whether to return to 304

Using Etag can solve some problems of last modified:

1. Some servers cannot accurately get the last modification time of resources, so it is impossible to judge whether the resources are updated by the last modification time 
2. If the resource is modified frequently, it can be modified within seconds, while last modified can only be accurate to seconds 
3. The last modification time of some resources has changed, but the content has not changed. Using Etag means that the resources have not been modified.

Using the caching process

Strong cache and negotiation cache

• Strong cache: do not send a request to the server to confirm whether the resource is valid, and obtain the resource directly from the cache

• Negotiation cache: before fetching resources from the cache, first send a request to the server to confirm whether the resources are valid (expired). If the resources are valid (the resources have not been changed), the server returns a response status code 304 to inform the browser that the local cache can continue to be used. If the resources are invalid (the resources have been changed), the server returns a new resource and response status code 200, which will not be used at this time Locally retired resources.

The impact of user behavior on cache

Stealing a graph on the Internet to illustrate the impact of user behavior on cache

• After testing, we have reservations about the view that F5 refresh will cause expires / cache control to be invalid

Reference material

On Web Caching
Caching mechanism of web browser
MDN: Cache-Control