On browser caching

Time:2022-5-11

preface

The browser’s caching mechanism is what we call HTTP caching mechanism. Its mechanism is based on the cache ID of HTTP message.

HTTP cache

On browser caching

Cache process:

  1. First request: there is no cache result and cache ID, and the request is sent directly to the server

On browser caching

  1. Strong cache: the cache result and cache ID exist, and the result has not been invalidated. Force the cache to take effect and directly return to the cache

On browser caching

  1. Negotiation cache: there are cache IDs and cache results, but they have expired. If the forced cache fails, the negotiation cache is used

On browser caching

1. Strong cache

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

Condition: the max age of cache control has not expired or the cache time of expires has not expired

Result: directly use the cached data of the browser and no more requests will be sent to the server

①. Cache-Control

HTTP1. Enable cache control in 1 to control whether the page is cached or not. The cache control attribute is configured on the server side. Different servers have different configurations and use the concept of relative time.

Attribute setting of cache control:

  • (1). Max age: sets the maximum effective time of the cache, in seconds (s). Max age will override expires
  • (2). S-maxage: only used for shared cache, such as CDN cache (s – > share). The difference from Max age is that Max age is used for normal cache,
    S-maxage is used for proxy caching. If s-maxage exists, Max age and expires are overwritten
  • (3). Public: the response will be 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 the response is not cached, indicating that the resource is not cached. However, setting no cache does not mean that the browser does not cache, but to confirm whether the resource has been changed to the server before caching (i.e. negotiate caching)
  • (6). No store: absolutely prohibit caching
  • (7). Must revalidate: if the page expires, go to the server to get it

At present, the cache control request field is well supported by various browsers and has high priority. When used with other fields (such as expires), other fields will be overwritten.

②. Expires

Cache expiration time is used to specify the expiration time of resources. It is a specific time point on the server side. In other words, expires = max age + request time should be used in combination with last modified.

Expires is a product of HTTP / 1. It is limited by the local time. If the local time is modified, the cache may become invalid.

The expires attribute is also configured on the server side.

2. Negotiation cache

Negotiation cache is a process in which the browser sends a request to the server with the cache ID after the forced cache expires, and the server determines whether to use the cache according to the cache ID.

Condition: force cache Max age and expires to expire (or neither set)

Results: the browser sends a request to send the cache ID (last modified, etags) to the server, verify whether the cache is fresh, and then return 304 or 200 according to the freshness

①. Last modified and if modified since

technological process:

  1. The browser first sends a request and asks the server to return the last update time of the requested resource in the response header, which is last modified. The browser will cache this time.
  2. Then, in the next request, the browser will bring if modified since: [saved last modified value] in the request header. Compare the modification time sent by the browser with the modification time of the server. If it is consistent, it means that the resource has not changed. The server returns a response with empty text to let the browser read the resource from the cache.

②. Etag and if none match

technological process:

  1. The browser will first send a request to get the Etag value, and then the next request will bring if none match: [saved Etag value] in the request header.
  2. Compare the value of the Etag sent with the value of the Etag regenerated by the server. If it is consistent, it means that the resource has not changed. The server returns a response with empty body and tells the browser to read the resource from the cache.

Etag can solve some shortcomings of last modified, but Etag needs to read and write every time the server is generated, while last modified only needs to read and write, resulting in greater performance overhead.

User behavior and disabling browser caching

1. Impact of user behavior on browser cache

① Open the web page and enter the address in the address bar: find out whether there is a match in the disk cache. Use if any; If not, send a network request.

② Normal refresh (F5): tab is not closed, and memory cache (if matched) is preferred, followed by disk cache.

③ Forced refresh (Ctrl + F5): the browser does not use cache, so the header of the sent request is provided with cache control: no cache (pragma: no cache is also provided for compatibility), and the server directly returns 200 and the latest content.

2. Disable browser caching

Sometimes, we need to completely prohibit browser caching, such as Vue packaged HTML. In order to ensure that users can get the latest HTML, we need to prohibit browser caching.

There is a meta configuration no cache on the Internet

<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 in fact, the setting is invalid (Google, Firefox). You need to set the cache control in the response header toNo store, because no cache actually uses negotiation cache.

reference resources

Browser cache read this article is enough