Browser cache mechanism

Recently, during PAGE analysis, we found that the status of most cached content changed to 304 during page F5 refresh. I wanted to see why. The results showed that someone in the garden had thoroughly analyzed it.

 

Original address: browser cache mechanism

 

Browser cache mechanism, in factMainlyHTTPProtocol-defined cache mechanism (for example, Expires; Cache-control). However, there is also a non-HTTP cache mechanism. For example, with the HTML Meta tag, Web developers can add the <meta> tag to the

 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 

 

 

The above code tells the browser that the current page is not cached and needs to be pulled from the server for each access. It is easy to use, but only some browsers support it, and none of the cache proxy servers support it, because the proxy does not parse the HTML content itself.

Next I will mainly introduce HTTPProtocol-defined cache mechanism.

Expires Policy

Expires is the header field of the Web Server Response Message.Browser before expiration timeThe browser can directly cache data from the browser without further requests.

Below is the response header of the jquery. js web Server pulled by the browser in the baby PK project:

 

Note: The Date header field indicates the message sending time. The description format of the time is defined by rfc822. For example, Date: Mon, 31 Dec 2001 04: 25: 57GMT.

The Web server tells the browser that the cached file can be used before 03:30:01 on January 28. The time for sending the request is 03:25:01, that is, the cache is 5 minutes.

However, Expires is an HTTP 1.0 feature. Currently, HTTP 1.1 is used by default in all browsers, so its function is basically ignored.

Cache-control policy (important)

Cache-Control and Expires both specify the current resource.Validity PeriodTo control whether the browser directly retrieves data from the browser cache or resends the request to the server. Only Cache-ControlSelect more and set more details, If both are setPriority higherExpires.

HttpProtocol header Cache-Control:

The value can be public.Private, No-cache, No-store, No-transform, Must-revalidate, Proxy-revalidateMax-age The instructions in each message are as follows:

In the above request, the Cache-Control header returned by the web server is set to max-age = 300, that is, 5 minutes (this is not necessary because it is consistent with the Expires time above ).

 

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since must be used with Cache-Control.

L Last-Modified: indicates the Last modification time of the response resource. When the web server responds to the request, it informs the browser of the last modification time of the resource.

L If-Modified-Since: When a resource expires (max-age identified by Cache-Control is used) and the resource has a Last-Modified declaration, the header is added when a request is sent to the web server again.If-Modified-Since, Indicating the request time.WebAfter receiving the request, the server finds the header If-Modified-Since.Compare with the last modification time of the requested resource. If the last modification time is relatively new, it indicates that the resource has been modified, the system will respond to the content of the entire resource (written in the Response Message package), HTTP 200; if the last modification time is relatively old, if no new changes are made to the resource, the system responds to HTTP 304 (no package body is required, saving browsing) and notifies the browser to continue using the saved cache.

Etag/If-None-Match

Etag/If-None-Match must also be used with Cache-Control.

L Etag: indicates the unique identifier of the current resource on the server when the web server responds to the request ).ApacheMedium, ETagThe default value is the INode), Size (Size) And the last modification time (MTime)) For HashThe.

L If-None-Match: when the resource expires (using the max-age marked by Cache-Control), it is found that the resource has an Etage declaration, if-None-Match (EtagValue).WebAfter receiving the request, the server finds the header If-None-Match.Compare with the corresponding verification string of the requested resource and decide to return 200Or 304.

What is Etag generated when Last-Modified is generated?

You may think that using Last-Modified is enough to let the browser know whether the local cached copy is new enough. Why does Etag still need to be used? The emergence of Etag in HTTP1.1 mainly aims to solve several problems that are hard to solve by Last-Modified:

L The Last modification of the Last-Modified annotation can only be accurate to seconds. If some files are Modified multiple times within one second, the Last-Modified annotation cannot accurately mark the modification time of the object.

L if some files are generated on a regular basis, the Last-Modified changes while the content does not change, resulting in the file being unable to use the cache.

L there may be situations where the server does not accurately obtain the file modification time or is inconsistent with the proxy server time.

Etag is the unique identifier of the corresponding resource automatically generated by the server or generated by the developer on the server. It can control the cache more accurately.Last-ModifiedAnd ETagYes, it can be used together, and the server will first verify ETag, Will continue to compare with the Last-Modified, And finally decide whether to return 304.

User behavior and Cache

Browser cache behavior is also related to user behavior !!!

User operations	Expires/Cache-Control	Last-Modified/Etag
Enter the address bar	Valid	Valid
Page Link jump	Valid	Valid
New window	Valid	Valid
Forward and backward	Valid	Valid
F5Refresh	Invalid	Valid
Ctrl + F5Refresh	Invalid	Invalid

Summary

Browser's first request:

 

When the browser requests again:

 

 

 

 

Supplement:

In addition to the six methods described by the author, user behavior and cache can be divided into two types:

User operations	Expires/Cache-Control	Last-Modified/Etag
Enter the address bar	Valid	Valid
Page Link jump	Valid	Valid
New window	Valid	Valid
Forward and backward	Valid	Valid
F5Refresh	Invalid	Valid
Ctrl + F5Refresh	Invalid	Invalid
Refresh button	Invalid	Invalid
Click another software (QQ) to open the page	Valid	Valid

 

Cache-Control and Expires

Expires has a disadvantage. The returned expiration time is the time on the server side, which causes a problem: if the client time differs greatly from the server time, the error is very large, therefore, in HTTP 1.1, Cache-Control: max-age = seconds is used.

Expires = max-age + "current request time for each download"

So after the page is re-downloaded, The expires will be re-calculated, but the last-modified will not change.

Refer to a picture prepared by others for representation: