preface

The caching mechanism of the browser is also called the HTTP caching mechanism, and its mechanism is based on the cache identifier of the HTTP packet.

HTTP cache

Caching procedure:

  1. First request: No cached result or cache identifier exists. Sends the request directly to the server

  1. Strong cache: The cache result and cache identifier exist, and the result has not been invalidated, force the cache to take effect, directly return to the cache

  1. Negotiation cache: There is a cache identifier and cache result, but it has expired. If the cache is forced to expire, the negotiation cache is used

1. Strong cache

Forced caching is the process of looking up the result of the request to the browser cache and deciding whether to use the cached result according to the cache rules of the result

Condition: Cache-Control’s max-age does not expire or Expires’s Cache time does not expire

Result: Use the browser’s cached data directly, without sending any more requests to the server

(1). The cache-control

Cache-Control is enabled in HTTP1.1 to Control whether pages are cached or not. The Cache-Control property is configured on the server side, depending on the server, using the concept of relative time.

Cache-Control property Settings:

  • (1).max-age: Sets the maximum effective time of the cache in seconds (s). Max-age overrides Expires
  • (2). S-MaxAge: Only used for shared cache, such as CDN cache (S-> Share). The difference with max-age is that max-age is used for normal caching, while s-maxage is used for proxy caching. If s-maxAge exists, max-age and Expires are overridden
  • (3).public: The response is cached and shared among multiple users. The default is public
  • (4). Private: The response is only used as a private cache and cannot be shared among users. If HTTP authentication is required, the response is automatically set to private
  • (5).no-cache: Specifies that no response is cached, indicating that the resource is not cached. When no-cache is set, however, it does not mean that the browser does not cache. Instead, it must check with the server whether the resource has been changed before caching.
  • (6).no-store: absolutely disallow caching
  • (7). Must-revalidate: If the page is expired, go to the server to get it

Cache-Control request fields are currently well supported by browsers and have a high priority, which when combined with other fields (such as Expires) overrides other fields.

(2) Expires.

Cache expiration time, used to specify when a resource expires, is a specific point in time on the server side. That is, Expires=max-age + request time, which needs to be used in conjunction with Last-Modified.

Expires is an artifact of HTTP/1 and is limited to local time, which can invalidate the cache if changed.

The Expires property is also configured on the server side.

2. Negotiate the cache

Negotiating cache is a process in which the browser makes a request to the server with the cache identifier after the cache is invalid, and the server decides whether to use the cache according to the cache identifier.

Condition: Forces the cache max-age and Expires to both expire (or neither is set)

Result: The browser sends a request to the server for the cache identifier (Last-Modified, ETags), re-validate the cache, and then returns either 304 or 200 depending on its freshness

(1). The last-modified and If – Modified – Since

Process:

  1. The browser first sends a request and asks the server to return in the response header the last update time of the requested resource, which is Last-Modified. The browser will cache this time.
  2. The browser then adds if-modified-since to the request header in the next request :[saved Last-Modified value]. The modification time sent by the browser is compared with the modification time of the server. If the modification time is consistent, it means that the resource has not changed. The server returns the response with empty body and lets the browser cache read the resource.

(2). The ETag and If – None – Match

Process:

  1. The browser will send a request to get the value of the ETag, and then the next request will include if-none-match:[the value of the saved ETag] in the request header.
  2. The value of the sent ETag is compared to the value of the server’s regenerated ETag. If the value is consistent, the server returns an empty response, telling the browser to read the resource from the cache.

ETag addresses some of the weaknesses of Last-Modified, but ETag requires a read and write operation on every server-side build, whereas Last-Modified requires only a read operation, which is more expensive.

User behavior with disabling browser caching

1. The impact of user behavior on browser caching

① Open the page and enter the address in the address bar to find if there is a match in Disk Cache. Use if available; If not, send a network request.

F5: Tab is not closed. Memory cache(if matched) is used first, followed by disk cache.

(3) Force-refresh (Ctrl + F5) : The browser does not use Cache, so all requests are sent with Cache-Control :no-cache in the header (Pragma:no-cache for compatibility), and the server returns 200 and the latest content.

2. Disallow browser caching

There are times when you need to disable browser caching altogether, such as Vue packaged HTML, in order to ensure that users can get even the latest HTML.

There is a meta configuration no-cache on the web

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />

But is not valid (Google, Firefox), and requires the server to set the Cache-Control in the response header to no-store, because no-cache will actually go to the negotiated cache.

reference

Browser caching is enough to read this one