Preface
The browser's caching mechanism is what we call the HTTP caching mechanism, and its mechanism is based on the cache identifier of the HTTP message.
HTTP cache
Caching process:
- First request: There is no cached result and cached identifier, and the request is sent directly to the server
- Strong cache: the cached result and cached identifier exist, and the result has not yet expired, the cache is forced to take effect, and the cache is returned directly
- Negotiation cache: there is a cache identifier and cache result, but it has been invalidated. If the cache is forced to expire, the negotiation cache is used
1. Strong Cache
Mandatory caching is the process of looking up the result of the request 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: use the browser’s cached data directly, and no more requests will be sent to the server
①. Cache-Control
HTTP1.1 enables Cache-Control to control whether the page is cached or not. The Cache-Control property is configured on the server side. Different servers have different configurations and use the concept of relative time.
Cache-Control property settings:
- (1). max-age: Set the maximum effective time of the cache, in seconds (s). max-age will overwrite Expires
- (2). s-maxage: only used for shared cache, such as CDN cache (s -> share). The difference with max-age is: max-age is used for normal caching,
And s-maxage is used for proxy caching. If s-maxage is present, max-age and Expires will be 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 will be automatically set to private
- (5). no-cache: Specify 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 to the server whether the resource has been changed before caching (that is, negotiate caching)
- (6). no-store: absolutely forbid caching
- (7). must-revalidate: If the page expires, go to the server to get it
At present, the Cache-Control request field is better supported by various browsers, and its priority is also relatively high. When used with other fields (such as Expires), other fields will be overwritten.
②. Expires
The cache expiration time, used to specify the time when the resource expires, is a specific point in time on the server side. In other words, Expires=max-age + request time, which needs to be used in conjunction with Last-modified.
Expires is a product of HTTP/1 and is limited by the local time. If the local time is modified, the cache may become invalid.
Expires attribute is also configured on the server side.
2. Negotiation Cache
negotiation cache is a process in which the browser carries the cache identifier to initiate a request to the server after the forced cache is invalidated, and the server decides whether to use the cache according to the cache identifier.
Condition: The mandatory cache max-age and Expires are both expired (or neither set)
Result: The browser sends a request to send the cache identifier (Last-Modified, ETags) to the server, verifies (re-validate) whether the cache is fresh, and then returns 304 or 200 according to the freshness
①. Last-Modified and If-Modified-Since
Process:
- The browser first sends a request to let the server return the last update time of the requested resource in the response header, which is last-modified, and the browser will cache this time.
- Then in the next request of the browser, if-modified-since:[stored last-modified value] is included in the request header. The modification time sent by the browser is compared with the modification time of the server. If they are consistent, the resource has not changed. The server returns a response with an empty body, allowing the browser to read the resource from the cache.
②. ETag and If-None-Match
Process:
- The browser will first send a request to get the value of etag, and then the next request will bring if-none-match: [saved etag value] in the request header.
- The sent etag value is compared with the etag value regenerated by the server. If the match indicates that the resource has not changed, the server returns a response with an empty body, telling the browser to read the resource from the cache.
etag can solve some of the shortcomings of last-modified, but every time etag is generated on the server side, read and write operations are required, while last-modified only requires read operations, which has greater performance overhead.
User behavior and prohibiting browser caching
1. The impact of user behavior on browser cache
① Open the webpage and enter the address in the address bar: check if there is a match in the disk cache. Use if there is; if not, send a network request.
② Normal refresh (F5): TAB is not closed, memory cache is used first (if it matches), followed by disk cache.
③ Forced refresh (Ctrl + F5): The browser does not use the cache, so the request headers sent all have Cache-control: no-cache (for compatibility, Pragma: no-cache is also included), and the server directly returns 200 and The latest content.
2. Disable browser caching
Sometimes, we need to completely disable browser caching, such as the html packaged by vue. In order to ensure that users can get the latest html, browser caching needs to be disabled.
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 actually the setting is invalid (Google, Firefox), the server side needs to set the cache-control in the response header to no-store, because no-cache will actually negotiate the cache.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。