Let's talk about knowledge about html caching

With the increase in website visits, how to quickly load web pages has become an important aspect of user experience. HTML caching technology is one of the effective means to solve this problem. This article will introduce the concept, setting methods and optimization techniques of HTML caching.

1. The concept of HTML caching

HTML caching, that is, browser caching, refers to caching page resources (such as HTML, CSS, JS and other files) in the browser to facilitate The next time it is accessed, it is read from the local cache instead of going through a network request. This can effectively reduce the number of resource requests, speed up page loading, and improve user experience.

2. How to set up HTML cache

1. Server-side settings

On the server side, you can control whether the browser caches by setting the HTTP response header Page resources. Commonly used HTTP response headers are as follows:

• Cache-Control: used to control cache behavior. Common values ​​include max-age, no-cache, no-store, etc. Among them, max-age indicates the maximum time (seconds) that the resource can be cached, no-cache indicates that the client is forced to verify the validity of the cached data before using cached resources, and no-store indicates that the browser is prohibited from caching data.
• Expires: Cache expiration time, used to tell the browser when it needs to request resources again.
• Last-Modified: The last modification time of the resource, used to help the browser verify the validity of cached data.
• ETag: The unique identifier of the resource, also used to help the browser verify the validity of cached data.

2. Client settings

On the client side, you can set the HTML cache in the following ways:

• HTML meta tag: Add meta tags to HTML files to specify the cache policy of the page. Commonly used meta tags are as follows:

<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">
<meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">

Among them, the usage of Cache-Control and Expires are the same as the server-side settings.

• JavaScript: Modify the browser's caching policy through JavaScript code. For example:

if( window.localStorage ){ // 支持本地存储 
  if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 
    localStorage.clear(); 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }
}

This code sets the cache time of the page to one week.

3. Optimization skills for HTML caching

1. Separate static resources from dynamic resources

Separate static resources (CSS, JS, pictures, etc.) from dynamic resources Resource (HTML, PHP, ASP, etc.) separation is a common optimization method. At this time, you can set a longer cache time for static resources to reduce the number of requests and bandwidth consumption.

2. Unique Resource Locator (URL) design

The design of the URL will also affect the effectiveness of the cache. Therefore, the URL can be designed in the following way:

• Divide directories according to resource types: for example, use "/css/", "/js/", "/img/", etc. to divide directories.
• Try to avoid using dynamic parameters in the URL: for example, "/index.php?name=xxx" can be changed to "/user/xxx.html".

3. Cache validity verification

Cache validity verification can be achieved through the Last-Modified and ETag set on the server side. When the browser cache expires, you can send a request to the server to check whether the cached resource is still valid. If it is valid, the cached resource can be read directly from the local, otherwise the resource needs to be requested again.

4. Summary

HTML caching technology is an effective optimization method that can speed up page loading and improve user experience. In actual use, you need to flexibly use server-side settings and client-side settings, and pay attention to cache validity verification and URL design.

The above is the detailed content of Let's talk about knowledge about html caching. For more information, please follow other related articles on the PHP Chinese website!