Browser HTTP Caching principle analysis

Chapter Directory Browser cache principle text version description a map to cache related header field Request cache related Header field Response cache Related Header field entity header cache related fields cache configuration some considerations

Before the project encountered a lot of browser cache related issues, also on the Internet to check the data, the server configuration, to ensure that the client load server resources speed and resource effectiveness. Recently carefully looked at the next HTTP protocol and cache-related properties, summed up. Browser Caching Principles Text Version Description

① browser access to server resources for the first time/index.html

There is no cache file in the browser and the request is sent directly to the server.

The server returns a $ OK, the entity returns the contents of the index.html file, and sets a cache expiration time, a file modification time, an entity tag that is computed based on the index.html content, or the etag.

The browser caches requests for/index.html paths locally.

② Browser Access server resources for the second time/index.html

This time, the request is not sent directly to the server because the cache file is already in the path.

First, cache expiration is judged. The browser determines whether the cache file expires based on the cache expiration time set in ①.

Scenario One: If there is no expiration, then do not send a request to the server, directly using the results in the cache, we can see in the browser console the "from cache", when the situation is full use of the cache, the browser and the server does not have any interaction.

Scenario Two: If it is expired, the request is sent to the server, where the file modification time set in ① is taken, and the ETag

Then, make a resource update decision. The server according to the browser passed the file modification time, judging from the browser after the last request, the file has not been modified, according to the ETag, judging the file content has not changed since the last request

Situation one: If the conclusion of the two judgments is that the file has not been modified, then the server will not give the browser to send index.html content, directly tell it, the file has not been modified, you use your side of the cache bar--304 not Modified, The browser will now get the contents of the index.html from the local cache. This is called the protocol cache, where there is a request interaction between the browser and the server.

Scenario Two: If the modification time and the content of the file is judged by any one of the failed, the server will accept the request, after the operation with ①

My writing ability may be limited, in order to describe this process as clearly as possible, the following figure

Cache related header fields Request Cache related header fields

①cache-control   used to make cache expiration judgments common directives: No-cache   Do not directly use the cache, always initiate a request to the server Max-age   cache expiration time, is a time value, such as 3,600 seconds, When set to 0, the effect is equivalent to No-cache s-maxage   to the cache proxy, which is invalid for the server that directly returns the resource, and when S-maxage is in effect, the value of Max-age is ignored only-if-cached if there is a cache, Use only the cache, if the cache file problems, the request will also be a problem ② pragma   to do cache expiration judgment     It can be value No-cache     This is a http1.0 left field, when it and Cache-control exist at the same time, it will be Cache-control cover ③ if-match/if-none-match   used to do resources update judgment     This command will pass the ETag in the cache to the server, the server uses it to compare with the server-side resource ETag, if the inconsistency proves that the resource has been modified and needs to respond to the request for a $ OK
④ if-modified-since    used to do the resource update judgment     This command will pass the file's last cache file update time to the server, the server determines whether the file is modified after this point in time, if it has been modified, it needs to respond to the request is OK Response cache related header fields

①cache-control used to set the cache expiration time Common directives: No-cache let the client not directly use the cache, always make a request to the server, do not set the default is this, the top screenshot of the request is omitted, so the client does not directly use the cache. Max-age cache expiration Time, is a time value, such as 3,600 seconds, set to 0 when the effect is equivalent to the No-cache s-maxage to the cache proxy instruction, the direct return to the resource of the server is invalid, when the s-maxage takes effect, the value of Max-age is ignored Private/public default is private, only in one browser cache, set to public cache can be shared by multiple users ②etag used to set the entity tag generated by the resource content this value has strong tag and weak tag, the difference is the calculation method is different, only strong tag will As soon as the resource is updated, the If-match/if-none-match field in the request header returns the value to the server ③age This field is used to tell the client how long the response was created, in seconds, This field entity header cache related fields must be created when the cache server returns a resource

The head of response may also include the entity header, which is immediately behind the response header.

①last-modified-time--used to set resource last modified time

②exprire--Setting file Expiration time

The function of this field is the same as the Cache-control, and the difference is that it directly specifies a cache expiration point, which is susceptible to client time.

This is also a legacy field, and there are some considerations for the Cache-control to overwrite the cache configuration When it is present at the same time

① only get requests are cached, post requests are not

②etag when resources are distributed across multiple machines, the Etag generated by different servers may not be the same for the same resource, causing the 304 protocol cache to expire and the client to fetch resources directly from the server. You can modify the way the server-side ETag is generated, generating the same etag based on the content of the resource.

③ system on-line, update resources, you can attach the resource URI after the resource modification time, SVN version number, file MD5 and other information, so that users can avoid downloading to the cached old files

④ observe the performance of chrome found that through the link or Address bar access, will first determine whether the cache expires, and then determine whether the slow resources update, F5 Refresh, will skip the cache expiration judgment, directly request the server, determine whether the resources are updated.

Author Tzyy/original link http://www.cnblogs.com/tzyy/p/4908165.html