[Overview of Web Cache Mechanism] 2-Web browser cache mechanism

ArticleDirectory

• Use HTML meta tags
• Use cache-related HTTP message headers
• Cache-control and expires
• Last-modified/etag and cache-control/expires
• Last-modified and etag
• User operation behavior and Cache

=== Index ====

[Overview of Web Cache Mechanism] 1-roles and types of Web Cache

[Overview of Web Cache Mechanism] 2-Web browser cache mechanism

[Overview of Web Cache Mechanism] 3-how to build a cacheable site

[Overview of Web Cache Mechanism] 4-Web Cache Mechanism in the HTML5 Era

[Overview of Web Cache Mechanism] 5-new ideas on Cache Mechanism in the web app age

================

How Web Cache works

All caches are based on a set of rules to help them decide when to use cached copies to provide services (assuming a copy is available, it is not destroyed or recycled or modified without deletion ). Some of these rules are defined in the Protocol (such as HTTP 1.0 and 1.1), and others are set by the cache Administrator (such as dBA, browser users, proxy server administrators, or application developers ).

Browser cache rules

For browser cache, these rules are defined in the HTTP header and the meta tag of the HTML page. They are fromFreshnessAndCheck ValueTo determine whether the browser can directly use cached copies, you must go to the source server to obtain the updated version.

Freshness (expiration mechanism): Indicates the validity period of the cached copy. A cached copy must meet the following conditions, and the browser will regard it as valid and new enough:

1. It contains the complete expiration time control header (HTTP header) and is still in the validity period;
2. The browser has used this cached copy and checked its freshness in a session;

In either case, the browser directly retrieves copies from the cache and renders them.

Verification value (Verification Mechanism ):When the server returns a resource, it sometimes carries the object tag etag (entity tag) of the resource in the control header. It can be used as the verification identifier of the browser request again. If the check mark does not match, the resource has been modified or expired, and the browser needs to obtain the resource content again.

Browser cache control using HTML meta tags

Web developers can add <meta> tags to CodeAs follows:

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

You can test whether your browser supports: Pragma no-Cache test.

Use cache-related HTTP message headers

The complete HTTP interaction process of a URI is composed of HTTP requests and HTTP responses. For more information about HTTP, see Hypertext Transfer Protocol-HTTP/1.1 and HTTP protocol details.

In the HTTP request and response message headers, common cache-related message headers include:

 

Cache-control and expires

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 setHigher than expires.

Last-modified/etag and cache-control/expires

When last-modified/etag is configured, the browser accesses the uniform URI resource again.Will send the requestAsk the server if the file has been modified. If not, the server will send only one 304 back to the browser, telling the browser to directly fetch data from its local cache; if the modification is made, the entire data will be sent to the browser again;

Cache-control/expires are different. If the local cache is detected to be valid for a period of time, the browser directly uses the local copy,No request is sent. When both are used together, the cache-control/expires priority is higher than last-modified/etag. That is, when the local copy is found to be in the validity period according to cache-control/expires, the request will not be sent again to the server for last-modified or etag.

Generally, cache-control/expires is used together with last-modified/etag, because even if the server sets the cache time, when you click "refresh, the browser will ignore the cache and continue sending requests to the server. In this case, last-modified/etag will be able to use 304 well, thus reducing the response overhead.

Last-modified and etag

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:

1. The last modification of the last-modified annotation can only be accurateSecondsIf a file is modified multiple times within one second, it cannot accurately mark the file freshness.
2. If some files are generated on a regular basis, when the content does not change, but the last-modified changes, the file cannot use the cache.
3. 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-modified and etag can be used together,The server verifies etag first.In the case of consistency, the system will continue to compare the last-modified, and finally decide whether to return 304. For more information about etag server generation rules and strong/weak etag, see Interactive encyclopedia-etag and HTTP header definition.

User operation behavior and Cache

When a user uses a browser, There will be various operations, such as entering the address and press enter, and pressing F5 to refresh. What will these actions affect the cache?

As shown in the preceding table, when you press F5 to refresh, The expires/cache-control settings are ignored and the request is sent to the server again, the last-modified/etag is valid, and the server determines whether the system returns 304 or 200 based on the actual situation. When the user uses Ctrl + F5 to force refresh, however, all cache mechanisms will expire and resources will be pulled from the server again.

Interesting sharing:

Browser cache mechanism: Comparison of operations performed by different browsers on users

The magic function and usage of HTTP 304 Client Cache Optimization: forcibly compares the last-modified time of the file at the code level to ensure that the user can still return 304 normally when refreshing with Ctrl + F5

 

Which requests cannot be cached?

Requests that cannot be cached by the browser:

1. The HTTP header contains cache-control: No-cache, Pragma: No-cache, or cache-control: Max-age = 0, which indicates that the browser does not need to cache requests.
2. Dynamic requests that determine the input content based on cookies and authentication information cannot be cached.
3. After HTTPS secure encryption requests (some tests have found that IE actually adds cache-control: Max-age information to the header, and Firefox adds cache-control: public to the header, caching HTTPS resources. See seven misunderstandings about HTTPS.)
4. POST requests cannot be cached
5. Requests that do not contain the last-modified/etag or cache-control/expires in the HTTP Response Header cannot be cached.