Home > Developer > Web Develop
Browser cache mechanism (1), browser cache mechanism
One of the browser cache mechanisms (Classic cache)
1. About browser cacheBecause the new HTML5 application cache has been used in the claimed project, and the classic cache has been used, such as setting max-age and Etag, I have been using it for a long time without going into the principle. The weather on the weekend is not good, so I am too lazy to go out. I just need time to summarize it.
I remember when I read the HTTP authoritative guide last year, there was a chapter dedicated to browser caching. A year passed too fast, and the passing time was like a good girl who disappeared from the crowd, seeing her marry someone else. Here I divide browser cache into two types: Classic browser cache (hereinafter referred to as classic cache) and HTML5 application cache.
The typical browser Cache is mainly set by several response variables, such as Cache-Control (Set max-age to specify the number of seconds when the document is in the freshness period) and Pragma (Pragma is mainly used for HTTP1.0, HTTP1.1 uses Cache-Control), Expires (not recommended because it specifies the absolute expiration date rather than the relative number of seconds), Etag and Last_Modified. Etag corresponds to If_None_Match (abbreviated as INM) in the request header, and Last_Modified corresponds to If_Modified_Since (abbreviated as IMS ). the new HTML5 application cache supports offline document storage, which makes offline document data effective and reduces traffic and is used more on mobile terminals.
2. Classic CacheBy default, apache adds Etag and Last_Modified to the response of documents such as html, images, and css. In this way, INM and IMS will be included in the next request. If the document content is Not Modified, 304 Not Modified will be returned, and then the cached files can be retrieved from the cache; if the document has been modified since that time point, the system returns the 200 and new content of the document. The following uses apache to test the effects of cache-control, expires, INM, and IMS.
2.1 Cache-Control and ExpiresMy apache version is 2.4.10. The configuration is as follows. I have set Cache-Control for the html file and Expires, and disabled the Last-Modified response header and Etag.
FileETag none<Files *.html> Header set Cache-Control "max-age=3600"</Files>ExpiresActive OnExpiresByType text/html A20<Files *> Header unset Last-Modified</Files>My index.html file is as follows:
<Html> This sets the html file response with the cache-control response header, as shown below:
Accept-Ranges:bytesCache-Control:max-age=3600Connection:Keep-AliveContent-Length:29Content-Type:text/htmlDate:Mon, 09 Mar 2015 14:17:20 GMTExpires:Mon, 09 Mar 2015 14:18:20 GMTKeep-Alive:timeout=5, max=100Server:Apache/2.4.10 (Ubuntu)
Then we can see that the response header has both Cache-control and Expires, and these two values are different. which value is used in this case? The response page is directly retrieved from the cache.
In this case, chromehas a question. If index.html is added under the same tabulation, no matter whether it expires or not, it will not be retrieved from the cache. When you open a new tab for access, the cache mechanism takes effect. The reason is unknown and may be related to chrome's internal Cache Policy. For example, someone raised the same question.
2.2 Last-Modified/If-Modified-Since and Etag/If-None-Match These tags can be used with Cache-Control.
-Last-Modified: indicates the Last modification time of the Response document.
-If-Modified-Since (IMS): When the document expires (for example, the validity period exceeds the max-age specified by Cache-Control ), if the response document contains the Last-Modified response header, the IMS header is carried in the request, and the value is the Last modification time of the server document.
- Etag: when the web server responds to a request, the header Etag is returned to inform the browser of the unique identifier of this document on the server. In apache, Etag is obtained after the Inode, size, and mtime of the file are hashed.
- If-None-Match (INM): When the document expires, the browser request carries the INM header and the content is the Etag value. The web server compares the Etag value and determines whether to return 304 or 200.
Comment out the configuration in 2.1FileTag noneAnd<Files *>
Header unset Last-Modified
</Files>You can enable the Etag and Last-Modified response headers.
If both IMS and INM exist in the request header, the server willINM verification priority, The comparison with IMS will continue only after the INM match is successful.
2.3 existing IMS he Sheng INM According to the description above in the http authoritative guide, there are several reasons why IMS requires INM:
-Some documents may be rewritten cyclically, but the actual data contained is often the same. Although the content remains unchanged, the modification date changes.
-Some documents may have been modified, but the modifications do not matter. You do not need to re-load data for Chengdu in the world.
-Some servers cannot accurately determine the last modification time of the page.
-Documents provided by some servers may change in milliseconds, and the modification date of the server in seconds is not enough.
3. user behavior and Cache User behavior also affects the browser cache mechanism. For example, if you run F5, The Expires/Cache-control is invalid. In some systems, use CTRL + F5 (Shift + F5 in some systems) except for Expires/Cache-control, etag/Last-Modified will also become invalid.
4. References
- Browser cache mechanism
- HTTP authoritative guide
- Is Chrome ignoring Control-Cache: max-age?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
