Browser HTTP Caching principle analysis

Http://www.cnblogs.com/tzyy/p/4908165.html

Chapter Catalogue

• Browser caching principles
• Text version Description
• A picture of the
• Cache Related header fields
• Request Cache Related header fields
• Response Cache Related header fields
• Entity Header cache related fields
• Some Considerations for cache configuration

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

A picture of the

Cache Related header fields

Request Cache Related header fields

①cache-control used to make cache expiration judgments Common directives: No-cache does not directly use the cache, always to the server to initiate a request Max-age cache expiration time, is a time value, such as 3,600 seconds, set to 0 when the effect is equivalent to No-caches-maxage to the cache proxy instructions, Invalid for the server that returns the resource directly, when the s-maxage takes effect, the value of Max-age is ignored only-if-cached if there is a cache, only use the cache, if the cache file problems, the request will also be a problem ②pragma used to do Cache expiration JudgmentIt can take a value no-cache this is a http1.0 left field, when it and Cache-control exist simultaneously, will be Cache-control overlay ③if-match/if-none-match used to do Resource Update judgmentThis instruction 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
④if-modified-since used to make resources to update the 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 is modified, it needs to respond to the request is OK

Response Cache Related header fields

①cache-control used to Set cache Expiration TimeCommon directives: No-cache let the client do not directly use the cache, always make a request to the server, do not set the default is this, the top 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-caches-maxage to the cache proxy instruction, the direct return to the resource of the server is invalid, when s-maxage effective, 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 up entity labels that are generated from resource contentThis value has a strong tag and weak tag, the difference is calculated differently, only the strong tag will be updated when the resource changes immediately, the If-match/if-none-match field in the request header will return this value to the server ③age this field to tell the client, How long ago This response was created, in seconds, the cache server must create this field when it returns a resource

Entity Header cache related fields

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, which is overwritten by the Cache-control when it is present

Some Considerations for cache configuration

① 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.

At present can only recall these, and later encountered a supplement it ~

Browser HTTP Caching principle analysis