In recent interviews, I’ve been asked several times about browser caching.

What is browser caching

As we know, when visiting a web page, we need to download some resources required for page rendering from the server, such as HTML documents, CSS, JS, pictures, etc. Some resources are rarely changed, such as the logo diagram representing the company. Caching these resources naturally reduces the load on the server and reduces page load times. But how do browsers know if they want to use caching and for how long? Don’t worry, this is all controlled by the server, and there are some fields in the HTTP Response header to control this, so let’s talk about those fields.

Browser Cache classification

1. Strong cache

Strong caching is controlled by using the Expires and cache-control fields to Control the amount of time a resource is cached and not requested by the server.

  • The Expires Expires value is an absolute time string in THE GMT format (GMT is British Greenwich Mean Time, GMT = Beijing time – 8 hours). It describes the time when the cache Expires and a point in time.
Expires: Wed, 25 Jul 2028 19:19:42 GMT
Copy the code

Indicates that the resource will expire after 2028-07-25 19:19:42 and you need to request the resource again. Because Expires is dependent on client system time, caching can be invalidated when local time is changed, so in general, we think cache-Control is a better option.

  • Cache-control Sets cache-control to max-age, which is the maximum number of seconds that the Cache can last. It defines the length of time. It describes time, which is an interval of time, which is a relative time. For example, if I want to set the duration of the resource to 3 days, the max-age value is 259200 (3 * 24 * 60 * 60 = 259200).
Cache-control: max-age=259200 Copy codeCopy the code

The resource expires in 3 days and you need to request resources from the server again.

Cache-control and Expires can be enabled at the same time in the server configuration, which means that both Expires and cache-Control can exist in response headers. Cache-control takes higher priority when both are enabled.

2. Negotiate cache

The negotiated cache is used by the server to determine whether cached resources are available or not, and of course requires the server and client to work together. The server can include a Last-Modified field or an ETag field in the Response header.

  • Last-modified/if-modified-since last-modified indicates the time when the requested resource was Last Modified on the server. When the resource is requested again, The browser’s request header contains if-modified-since, which asks the server If the resource has been updated.
  • ETag/ if-none-match After each file modification, the server generates a new ETag, which is a unique file identifier. When the resource is requested again, the browser’s request header contains if-none-match, which is the ETag returned earlier. Send this value to the server and ask if the ETag of the resource has changed. If it has changed, the version of the resource needs to be updated and the client can no longer use the data in the cache.

Browser caching mechanism

In general, the browser will determine whether a strong cache has been hit based on the Expires and CAhe-Control fields in the HTTP response header. If so, it will simply fetch the resource from the cache and not request it from the server. Otherwise (the strong cache is not hit), the browser will issue a conditional request. The browser will include either if-modified-since or if-none-match fields in the request header. If-none-match is the ETag that the browser originally got. If the server finds a resource updated later than if-modified-since, or If the current ETag on the server does not Match if-none-match, the resource needs to be requested again. Otherwise, instead of redownloading the entire resource, the browser simply loads the resource from the cache, and the response HTTP code is 304

The resources

Standing on the shoulders of giants, let me see further, thanks to the author of the following article.

Browser cache, want to say love you is not easy

2. Browser cache