We can use meta tag and header in the PHP program to control the HTML page. For example:
| The code is as follows: | Copy code |
| <? Php Header ('cache-Control: max-age = 86400, must-revalidate'); // 24 hours Header ('last-Modified: '. gmdate ('d, d m y h: I: s'). 'Gmt '); Header ('expires: '. gmdate ('d, d m y h: I: S', time () + '000000'). 'Gmt '); Echo 'I will not refresh 'require and then write another html file c.htm: <Body> Haha, <a href = cache. php> go </a> </Body> </Html> |
|
We requested 127.1/c.htm, click the link, and then use the back-to-back button of the browser to return to c.htm, and then click the link, as shown on the left of the figure below, we found that when the cache command is added, we can back up and click the link no matter how it, the following network request URL is always gray, indicating that the browser did not initiate the actual network request, but directly called the cache page stored in the user's computer, unless the cache time expires, during this period, even if the actual content changes, the browser will not re-read our resources on the server. You can modify the echo sentence and then click it to find that the network request is still gray. In this case, the browser updates the cache only in the following three cases:
(1) cache expiration
(2) the cache is cleared;
(3) F5 or ctrl + F5 force refresh. (The processing of various browsers may be different. My test environment is firefox 4)
When we block the preceding header command or use the following code, // tell the client browser not to use the cache, HTTP 1.1 Protocol
| The code is as follows: | Copy code |
| Header ("Cache-Control: no-cache, must-revalidate "); |
|
// Tells the client browser not to use the cache and is compatible with the HTTP 1.0 Protocol
| The code is as follows: | Copy code |
| Header ("Pragma: no-cache "); |
|
The browser reads resources from the server each time it requests. As shown in the figure on the right. Here, we can get a general idea of how the browser caches pages. It is easy for us to come up with a scenario. Sometimes we need it for caching and sometimes it is not needed. You can use it based on the scenario. However, the cache function of the browser is very small, but it can save a little bit. Sometimes, the browser cache is very powerful, and we need to force refresh to take effect, such as JS files, sometimes you change, even if the refresh is not changed. In addition to setting page cache in the code, you can also configure it on servers such as APACHE, especially static resources. Adding cache can effectively reduce unnecessary requests.
Sometimes, we usually see <script src = "link. js? Code such as d = 1923454332 "> </script> does not actually make sense to add the string of question marks after the JS file, just to prevent JS from being cached, add a version number to the JS file, which is usually marked with a timestamp. In this way, the browser will not cache our JS files.
Since the purpose of front-end page caching is to reduce requests, I immediately thought of another idea, that is, compressing data. Some tools can be used to compress CSS and JS code. For example, the jquery version is compressed, and the compression ratio is usually large. Jsmin and jspacker are usually used for compression. Specific tools can be searched online.
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
