Browser HTTP Caching Principle analysis

Transferred from: http://www.cnblogs.com/tzyy/p/4908165.html

Browser Caching principle:

1, the browser first access to the server resource/index.html, in the browser does not have a cache file, directly to the server to send a request, the server returns a number of 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, and the browser caches the request of the/index.html path to the local

2, the second time the browser access to the service resource/index.html, because the local already has the cache file under this path, so this time not directly to the server to send the request

1) First cache expiration judgment, the browser based on the cache expiration time set in @1, determine whether the cache file expires

Scenario 1: No expiration: Do not send a request to the server, directly using the files in the cache, we can see in the browser console 200K, when the situation is full use of the cache, the browser and the server without any interaction

Scenario 2: If it has expired, the request is sent to the server, which takes the @1 setting file modification time and ETag

And then to determine the resource updates, the server according to the browser sent over the file modification time, judging from the browser last request, the file has not changed, according to the ETag, judging the contents of the file since the last request, there is no change,

Scenario One: If the conclusion of the two judgments is that the file has not been modified, then the server will not send index.html content to the browser, but directly tell it, the content has not been modified, you use your side of the cache bar ~304 not Modified At this point the browser will get index.html content from the local, the situation is more than the protocol cache, this is the browser and the server is an interactive

Scenario Two: If the modification time and the file content has a change, the server will accept the request, followed by the same operation as @1

A picture of the

Cache Related Header field {is the cache setting a front-end setting or a backend? }

Request Cache Related header fields

①cache-control used to make cache expiration judgments

Common directives:

• No-cache does not directly use the cache, always initiates a request to the server

• Max-age cache expiration Time, is a time value, such as 3,600 seconds, set to 0 when the effect is equivalent to No-cache

• The s-maxage to the cache proxy, which is not valid for the server that returns the resource directly, and ignores the value of Max-age when S-maxage is in effect

• Only-if-cached If there is a cache, only use the cache, if the cache file problems, the request will also be problematic

②pragma used to make cache expiration judgments

It can take value No-cache

This is a http1.0 legacy field that will be overwritten by Cache-control when it and Cache-control are present at the same time.

③if-match/if-none-match used to make resources to update the judgment

This 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 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 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 No-cache

• The s-maxage to the cache proxy, which is not valid for the server that returns the resource directly, and ignores the value of Max-age when S-maxage is in effect

• Private/public default is private, cached only in one browser, and cache can be shared by multiple users when set to public

②etag used to set entity labels generated from resource content

This value has strong tag and weak tag, the difference is calculated differently, only the strong tag will be updated when the resource changes immediately, the request header of the If-match/if-none-match field will return this value to the server

③age

This field is used to tell the client how long ago the response was created, in seconds, when the cache server returned the resource and must create this field

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