Make your site better utilize browser cache

When we tried our best to improve the server load capacity, did we ever think about whether the browser also has the cache function, and we can also use the browser's cache function to reduce the server load, increase website throughput? In this chapter, we will talk about the browser cache function and use it.

When we use the packet capture tool to check the http status, we can see 200,304, from cache and other identifiers. Maybe you have noticed them and understood what they mean. However, have you ever thought about adding code to your program to actively tell the browser to better utilize the browser cache.

Note: In all cases in this chapter, we use the chrome 17.0.963.79 m browser. The test method is to test each time you open a new window of the browser, instead of refreshing F5.

We will first create a page without caching, called nocache. php.
The Code is as follows:

 
 

  
  
<?php 
  
  
echo time(); 
  
  
?> 
 
 

Open in a browser. We can see that each time a page is opened, a new time is printed. The returned status code is 200, indicating that our browser does not use cache by default.

Let's create another page called last_modified.php.
The Code is as follows:

 
 

  
  
<?php 
  
  
$cache_time = 3600; 
  
  
$modified_time = @$_SERVER['HTTP_IF_MODIFIED_SINCE']; 
  
  
if( strtotime($modified_time)+$cache_time > time() ){ 
  
  
    header("HTTP/1.1 304"); 
  
  
    exit; 
  
  
} 
  
  
header("Last-Modified: ".gmdate("D, d M Y H:i:s", time() )." GMT");  
  
  
echo time(); 
  
  
?> 
 
 

Open it in a browser. We can see that the status code 200 is returned for the first time, and the printing time is the latest time. Then we opened it for the second time. We can see that the status code is 304, and the time is the same as the previous time, indicating that we are using the cache. We delete the last_modified.php file, and then open the page for the third time. The browser Returns Error 404. It can be seen that although Last-Modified uses the cache, each time you open the page, you still need to initiate an http request to the server, the browser determines whether the browser content expires based on the user's $ _ SERVER ['HTTP _ IF_MODIFIED_SINCE ']. If the browser content does not expire, the browser returns the 304 status and the browser content is read from the cache.

Let's create another page called expires. php.
The Code is as follows:

 
 

  
  
<?php 
  
  
$cache_time = 3600; 
  
  
header("Expires: ".gmdate("D, d M Y H:i:s", time()+$cache_time )." GMT");    
  
  
echo time(); 
  
  
?> 
 
 

Open in a browser, we can see that the first open, the returned status is 200, the time is the latest time. Then we opened it for the second time. We can see that the status code is still 200 and the time is still the old time. The Size column is displayed as from cache, indicating that the content is directly read from the browser. We delete expires. PHP file, and then open it in the new window for the third time. We can see that the 200 status code is returned, the printing time is still old, and the Size is still prompted as from cache. Therefore, Expires is set, even if the page is deleted, the browser can still display it, indicating that the browser has not initiated an http request to the server.

Here, you may feel that Expires is better than the Last-Modified cache, because when there is cached data locally, you do not need to initiate an http request to the server, the number of concurrent requests on the server will be significantly reduced, and many http requests can be processed less. However, Expires also has a disadvantage, that is, the set expiration time is the server time, not your local time, so if the server time is inconsistent with your local time, the cache may not be effective. HTTP/1.1 introduces the Cache-Control flag to make up for the deficiency of Expirse. The format is as follows: Cache-Control: max-age = <second>. This time is more accurate than the local time of the browser.

Let's create another page called cached_control.php.
The Code is as follows:

 
 

  
  
<?php 
  
  
$cache_time = 3600; 
  
  
header("Cache-Control: max-age=".$cache_time); 
  
  
echo time(); 
  
  
?> 
 
 

We can test the same effect as setting Expires, that is, after the file is deleted, the page can still be accessed normally within the cache validity period of the browser.

Okay, over. Next time, when your server's concurrency is too high and your server resources and bandwidth resources are insufficient, remember the great browser cache! Maybe you still don't agree, and think there are many ways to improve the server throughput, such as caching on the server side, static pages, and so on. But I believe there is something you should care about, right, bandwidth, right? If you can make good use of the browser cache, it will reduce your bandwidth resources. Isn't that good.