You shouldn’t just know that the browser caches the requested static file, but why is it cached and how does it work

Understand the need for HTTP caching mechanisms

HTTP caching mechanism, as an important means of Web performance optimization, is a basic link in the computer knowledge system, as well as a necessary skill for front-end architects

Cache rule resolution

For your understanding, we can think of the browser as having a cache database that stores cached information. When the client requests data for the first time, no corresponding cached data exists in the cache database. Therefore, it requests the server and stores the data to the cache database after the server returns the request

Categorize by whether a request needs to be redirected to the server (force caching, contrast caching). First of all, we have a simple understanding of them through the way of sequence diagram:

Cached data already exists

Based only on mandatory caching, the flow of requesting data is as follows:

Based on comparison caching only, the flow of requesting data is as follows:

As you can see, force caching does not need to interact with the server if it is in effect, whereas contrast caching does need to interact with the server whether it is in effect or not

When the rule that forces cache is executed, if the cache takes effect, the cache is directly used and no comparison cache rule is executed

Mandatory cache

When the browser requests data from the server without caching, the server returns the data along with the cache rule information contained in the response header

How does the browser determine whether cached data is invalid

In the force-caching mechanism, there are two fields in the response header to indicate the invalidation rule

  • Expires/Cache-Control

Expires is an HTTP 1.0 thing, and now the default browser uses HTTP 1.1 by default, so its role is largely ignored. In HTTP 1.1, cache-control is used instead

Compared to the cache

As the name suggests, you need to do a comparison to see if caching is acceptable

Through the comparison of the two figures, we can clearly find that when the comparison cache takes effect, the status code is 304, and the packet size and request time are greatly reduced. The reason is that after the comparison, the server returns only the header, notifies the client to use the cache through the status code, and does not need to return the packet body to the client

There are two types of identity passing for comparison cache:

  • Last-Modified / If-Modified-Since
  • Etag/if-none-match (priority higher than last-modified/if-modified-since)

Etag

When the server responds to a request, it tells the browser the unique identity of the current resource on the server (generation rules are determined by the server)

If-None-Match

This field informs the server of the unique identity of the client segment cached data when the server is requested again

After receiving the request, the server finds if-none-match header and compares it with the unique identifier of the requested resource. If the header is different, it indicates that the resource has been changed again. In this case, the server responds to the entire resource content and returns the status code 200. If yes, the resource has not been modified. In this case, the browser responds to HTTP 304, telling the browser to continue using the saved cache

conclusion

Cache usage rules

  • For mandatory caching, the server notifies the browser of a cache time, within which the next request is made, the cache will be used directly
  • For comparison cache, Etag and Last-Modified in the cache information are sent to the server through a request, which is verified by the server. When the 304 status code is returned, the browser directly uses the cache

Browser request

See article: Thoroughly understand HTTP caching mechanisms and principles

Finally, I hope you can realize your dream as soon as possible!!

Welcome to exchange ~