The purpose of this series of articles is to “give every front-end engineer a high frequency knowledge base to help with their work”. This is the 34th cut of the front hundred questions. I hope friends will pay attention to the public number “kite holder” and arm their minds with knowledge. Give us a sneak preview of the upcoming 100 questions (part 1) (^_^)

The cache refers to the copy of resources stored on the local disk of the proxy server or client. Using the cache can reduce the access to the source server and save traffic and communication time.

Browser caching means that the browser caches files that have been requested before for reuse on the next visit, thus saving bandwidth, improving access speed, and reducing server pressure.

Today’s HTTP caching mechanism is to use HTTP response headers to cache the requested resources in the browser. There are two caching methods: strong caching and negotiated caching.

3.1 strong cache

Strong caching means that requests are not sent to the server during the cache time, but only after the expiration. The whole process is as follows:

There are two response headers in HTTP that represent a strong Cache: Expires and cache-control, which are described below.

3.1.1 Expires

Expires is a field in HTTP1.0 that is an absolute time, the server time. The browser checks the current time and uses the cached file directly if it has not expired.

3.1.2 Cache-Control

The cache-control field is added to HTTP1.1 because Expires is not consistent when the server Expires (note: If both cache-control and Expires are present, the browser will always use cache-control first, and set max-age to not store a relative time for which the expires expires is valid. The common values for the cache-control field are as follows:

  1. Private: The default value, indicating that the client can cache the response, but the intermediate proxy, CDN, etc., cannot cache the response.
  2. Public: Indicates that both the client and proxy server can cache.
  3. Max-age = XXX: The cached content will be invalid after XXX seconds;
  4. No-cache: The negotiated cache is required to verify the cached data.
  5. No-store: All content is not cached (including negotiation cache), and the server is requested for the latest resource each time;
  6. Must-revalidate: Can be used before the cache expires, and must be verified to the server after expiration.

3.1.3 Why is the Cache-Control Field added?

One problem with the Expires field is that it uses an absolute time. The cache-control field was added because server time and client time can be inconsistent, which can cause problems.

3.2 Negotiation Cache

The negotiated cache sends a request to the server to determine whether the cached data is expired. If the cached data is expired, new content is returned. If not, the local cached data is used. The negotiation cache mainly uses two fields: last-MODIFY and Etag. The overall process is as follows:

Note: images from (www.cnblogs.com/zhouwenhong.)

3.2.1 Last – the Modify

Last-modified is a field in HTTP1.0 that is returned by the server on the first request for a resource, indicating the last updated time. The next time the browser requests a resource, it sends the IF-modified-since field. The server compares the local last-modified time with the if-modified-since time. If there is a difference, the server considers the cache expired and returns a new resource to the browser. If the time is consistent, send a 304 status code and let the browser continue to use the cache.

3.2.2 Etag

The Etag is a new field in HTTP1.1. It is the entity identifier (hash string) of the resource. When the content of the resource is updated, the Etag changes. The server determines whether the Etag has changed and returns a new resource if it has, or 304 if not.

3.2.3 Why is the Etag Field Added?

The reasons for adding an Etag field when last-modify exists are as follows:

  1. When a file is changed, the content of the file does not change, only the modification time is affected, and the cache should not be considered expired.
  2. Some files have been changed too often (within seconds), but if-modify-since can be used to check for accuracy in seconds, which can cause problems.
  3. Some servers do not have the exact last modification time of a file.

1. If you think this article is good, please share and like it so that more people can see it

2. Pay attention to the public number of kite holder, with the main kill front hundred questions