Browser caching mechanism (strong caching and negotiation caching)

Time:2021-6-13

1. Why browser caching?
When we visit the same page, it takes a certain amount of time to request resources and data. If we can cache some resources, from the second visit, we can reduce the loading time, improve the user experience, and reduce the pressure on the server

2. What are the caches?
Browser cache is divided into strong cache and negotiation cache. When there is cache, when the client requests data from the server for the first time, the client will cache it into memory or hard disk. When the same resource is obtained for the second time, the ways of strong cache and negotiation cache are different.

Strong cache: when the client requests the same resource from the server for the second time, it will not send the request to the server, but read it directly from the memory / hard disk

Negotiation cache: when the client requests the same resource from the server for the second time, it first sends a request to the server to “ask” whether the requested file cache is changed compared with the server in Ben’d. if it is changed, the file will be updated. If it is not, it will be read from the memory / hard disk

The strong cache is determined by the cache control and expires fields in the server’s response header, and the negotiation cache is determined by the last modified and Etag fields.
Browser caching mechanism (strong caching and negotiation caching)

3. Strong cache
(1) expires
The field defined in http1.0 indicates the expiration time. The format is as follows: expires: Mon, 29 Mar 2021 01:03:05 GMT, which indicates that before this time, if the client needs to obtain the resource again, it will not get it from the server, but will read it directly from the cache.

(2) cache-control
HTTP1.1 field, which indicates the length of cache time. The format is cache control: Max age = 2592000, and the unit is seconds, which indicates that the cache time is 30 days.
There are other values that can be set for cache contorl
No cache, which means that there is no strong cache, but it does not affect the negotiation cache
No store, neither strong cache nor negotiation cache

(3) Priority of the two: the priority of cache control is higher than that of expires

Browser caching mechanism (strong caching and negotiation caching)

4. Negotiation cache
(1) Last modified and if modified since
Last modified indicates the last modified time of the file. The format is as follows: last modified: Tue, 04 Aug 2020, 14:54:28 GMT. when the client requests the server for the first time, the server will bring the last modified time in the response header. When the client requests the same resource from the server for the second time, the last modified time will be added, The client will carry the last modified value of the last request with the if modified since value on the request header. The server will compare the last modified time. If the time is consistent, the server will return 304 status code. The client will read the data directly from the cache. If not, the server will return 200 status code and update the file

(2) Etag and if none match
Etag refers to the unique identification of the file. The format is Etag: “5f2976a4-17d”. When the client makes the first request to the server, the server will carry the Etag with the unique identification of the file on the response header. When the client requests the same resource from the server for the second time, the client will carry the Etag value of the last request on the if none match of the request header, and the server will compare the etags, If the time is consistent, the server returns 304 status code, and the client reads the data directly from the cache. If not, the server returns 200 status code and updates the file

(3) What’s the difference between the two?
Etag appeared to solve some problems of last modified
① When the time of the file is changed periodically, but the content of the file is not changed,
② Last modified can only be accurate to seconds. If a file is changed many times in one second, it cannot be updated to the latest data, and Etag has higher accuracy
③ Some servers can’t get the last modification time of the file accurately

(4) How to use them
Last modified and Etag can be used together. The server will give priority to verifying Etag. If the Etag is consistent, it will continue to compare last modified and finally decide whether to return 304
Browser caching mechanism (strong caching and negotiation caching)