Browser caching
- Strong cache
- Negotiate the cache
- The cache location
The HTTP message
Strong cache
- There are two types of caching in the browser: one that requires HTTP requests and one that does not
- Expires is a response header returned by the server that tells the browser to retrieve data from the cache before the expiration date, without having to request it again. (Deprecated in HTTP1.1 because server and browser time may be out of sync.)
- Cache-Control
In HTTP1.1, a very key field is used: cache-control; The essential difference between Expires and Expires is that there is no expiration time. Instead, an expiration time is used to control caching
Cache-Control:max-age=3600
Copy the code
This means that the response will return within 3600 seconds, or an hour, and the cache can be used directly
- Public: Both client and proxy servers can cache. Because a request may pass through different proxy servers before reaching the target server, the result is that not only the browser can cache the data, but any proxy node in between can cache the data.
- Private: In this case, only the browser can cache, the proxy server in the middle can not cache.
- No-cache: skips the current strong cache and sends HTTP requests, that is, directly enters the negotiation cache phase.
- No-store: does not cache in any form
- S-maxage: indicates the cache time for the proxy server
- Both Expires and cache-control are present. Cache-control takes precedence. If the strong Cache Expires, the negotiated Cache is entered
Negotiate the cache
- Negotiation cache is a process in which the browser sends a request to the server with the cache id after the strong cache is invalid. The server decides whether to use the cache based on the cache ID
- The server determines whether the client resource is the same as the server resource
- If the negotiation cache takes effect, 304 is returned. If the negotiation cache fails, 200 and the request result are returned
- Related fields:
- Last-modified returns the time when the resource file was Last Modified on the server when the server responds to a request. After the browser first sends a request to the server, the server adds this field to the response header
- If the browser receives it and requests it again, it carries the if-Modified-since field in the request header, which is the value of the last modification sent from the server.
- The server takes the if-Modified field in the request header and compares it with the last modification time of the resource in the server
- If the value in the request header is less than the last modification time, it indicates that an update is required and a new resource is returned, the same process as the HTTP request response
- Otherwise, 304 is returned, telling the browser to use cache directly
- ETag
- ETag is a unique identifier generated by the server for a file based on its current contents, as long as the contents of the file are changed
, the value changes, and the server sends the value to the browser through the response header. 2. When the browser receives the ETag value, it adds the value to the if-none-match field in the request header and sends it to the server in the next request. 3. After receiving if-none-match, the server compares it with the ETag of the resource on the server – If the two are different. Update request, return new resource, same as regular HTTP request – otherwise return 304, tell the browser to use cache to compare 1. ETag is superior to Last-Modified in accuracy. ETag is superior to ETag, which identifies resources according to the content, so that changes of resources can be accurately sensed. Last-modified, on the other hand, does not accurately detect resource changes in special cases. There are two main cases: – A resource file has been edited but its contents have not changed, which also causes cache invalidation. – Last-Modified Indicates a time in seconds. If a file changes multiple times within a second, then last-Modified does not reflect the change. 1. In terms of performance, Last-Modified is superior to ETag. It is easy to understand that last-Modified only records a point in time, whereas ETag needs to generate hash values according to the specific contents of the file. 2. If the resource is generated repeatedly and the content remains unchanged, Etag is more accurate. If both methods are supported, Etag is preferred
The cache location
- There are four types of browser cache locations, in descending order of priority:
- Service Work
- Memory Cache
- Disk Cache
- Push Cache
- Service Work
- The Service Worker borrows from the idea of the Web Worker, that is, JS runs outside the main thread and cannot access the DOM directly because it is out of the browser’s window. However, it still helps us do a lot of things, such as offline caching, notification push, and web proxy features.
- The offline Cache is the Service Worker Cache
- Memory Cache and Disk Cache
- Memory Cache refers to the Memory Cache, which is the fastest in terms of efficiency. But it is the shortest in terms of lifetime, and when the rendering process is finished, the memory cache is gone.
- A Disk Cache is a Cache stored on a Disk. It is more efficient than a memory Cache, but its advantage is that the storage capacity is stored for a longer time.
- The JS and CSS files that are relatively large are directly dumped into the disk, whereas the JS and CSS files that are dumped into the memory are preferentially dumped into the disk when the memory usage is high
- Push Cache
- Push caching, the last line of defense for browser caching, is http2.
Summary of caching mechanisms
- The strong Cache is first validated by cache-control
- If strong caching is available, use it
- Otherwise, the server enters the negotiation cache, that is, an HTTP request occurs. The server checks whether the resource is updated by using the if-Modified-since or if-none-match field in the request header. If the resource is updated, the server returns the resource and the 200 status code
Three refresh operations
- Normal operation: Enter URL in address bar, jump link, forward and backward, etc. (force cache valid, negotiate cache valid)
- Manual refresh :F5, click refresh button, right click refresh button (force cache invalidation, negotiate cache invalidation)
- Force refresh :Ctrl+F5(force cache invalidation, negotiate cache invalidation)