This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

This article focuses on the front-end page performance optimization to further understand the core process of HTTP caching. For more details on page loading and rendering and network requests, you can refer to the article: What happens between the input URL and the presentation of the page! (Most comprehensive extended explanation)

HTTP cache

When the browser to access web site, the first visit of HTML, CSS js images need to load resources, request to the server resources First visit after can make use of the function of the cache can improve the speed of page loads was obtained from the cache, enter the url to the page loading quantity and reduce the volume of a network request can speed up page performance

Mandatory cache

The process of enforcing caching

  1. The browser sends a request to the server
  2. Server returns resources
  3. Again, the browser requests to check whether max-age has expired, and to retrieve the resource directly from the cache

cache-control

Max-age =300 Set cache-control if cache is required, not cache-control if cache is not required. Cache-control is set by the server through the response header

Negotiate the cache

Is a caching strategy on the server side

The process of negotiating a cache

  1. The browser sends a request to the server
  2. The server returns the resource and the resource id
  3. The browser again requests to send the pro bulge and the resource identifier
  4. If it is not the latest resource, the server returns the 200 status code, the latest resource, and the new resource ID. If it is the latest resource, the server returns the 304 status code to retrieve the resource directly from the cache

Negotiate the resource identity of the cache

  • Last-modified: indicates the time when the resource was Last Modified

A field named if-Modified-since that sends the request and resource id on subsequent accesses is placed in the request header

  • ETag: the unique string that corresponds to the resource is placed in the request header for subsequent requests and the field named if-none-match that identifies the resource

Etag is preferred

  1. Last-modified values are accurate only to the second level
  2. Last-modified returns the resource file each time if the file is generated at regular intervals with the same content, even if the content is the same. But ETag can determine that the file content is the same and return 304, using the cache

conclusion

Added: DNS cache

DNS cache

To increase access efficiency, the computer has a domain name caching mechanism, when visiting a website and get its IP, the domain name and IP will be cached down, the next visit, there is no need to request the domain name server to obtain IP, directly use the CACHE IP, improve the response speed. Of course, the cache has an effective time, when the effective time, again request web site, or need to request domain name resolution.

But the domain name caching mechanism can also cause problems. For example, if the IP address has changed, the access fails if the IP address in the cache is still used. For example, the IP address of the same domain name is different between the Intranet and the Internet. For example, the IP address mapped from the Internet to the Intranet is different. If a computer accesses the domain name from the Internet and then accesses the domain name from the Intranet, the DNS cache also accesses the IP address from the Internet. As a result, the access fails. You can manually clear the DNS cache or disable the DNS cache mechanism depending on the situation. Type :chrome:// DNS/into your Chrome browser and you can see chrome’s DNS cache. The system cache is stored in /etc/hosts(Linux)