Computer Network Notes: HTTP Protocol About Caching

strong cache

There are two cases of strong caching, one is to send HTTP requests, and the other is not to send.

First check the strong cache, this stage does not need to send HTTP requests. It is done by looking up different fields, so different HTTP versions are different.

HTTP1.0 version uses Expires, and HTTP1.1 uses Cache-Control.

• Expires

Expires is the expiration time. The time is relative to the time of the server. It exists in the response header returned by the server. Before this expiration time, data can be obtained directly from the cache without requesting again. For example:

Expires:Mon, 29 Jun 2022 11:10:23 GMT

表示该资源在2022年7月29日11:10:23过期，过期时就会重新向服务器发起请求。

There is a problem with this method 服务器的时间和浏览器的时间可能并不一致, so HTTP1.1 proposes a new field to replace it.

• Cache-Control

In HTTP1.1 version, this field is used. The time used in this field is the expiration time, corresponding to max-age.

Cache-Control:max-age=6000

The above means that the cache can be used directly 6000 seconds after the resource is returned.

important point

When Expires and Cache-Control exist at the same time, 优先考虑Cache-Control. If the cache resource fails, that is, there is no strong cache, then enter the negotiation cache.

negotiation cache

When the strong cache fails, the browser sends a request to the server with the response in the request header , and the server decides whether to use the cache 缓存Tagaccording to the corresponding one .tag

Cache is divided into two types, Last-Modifiedand ETag. Both have their advantages.

• Last-Modified

  • This field means yes 最后修改时间. After the browser sends a request to the server for the first time, the server will add this field to the response header.
  • After the browser receives it, 如果再次请求it will carry a field in the request header If-Modified-Since, and the value of this field is the last modification time sent by the server.
  • After the server gets the field in the request header If-Modified-Since, it will actually compare 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 means it is time to update. Returning a new resource is the same as a regular HTTP request response. Otherwise return 304, telling the browser to use the cache directly.

• ETag

  • ETagIt is the server that generates a unique identifier for the file based on the content of the current file, such as the MD5 algorithm. As long as the content inside is changed, this value will be modified, and the server sends this field to the browser through the response header.
  • When the browser receives the value, it will send this value as the content of this field to the server ETagin the next request .If-None-Match
  • After the server receives it If-None-Match, it will compare it with the resource on the server ETag. If the two are the same, it will return 304 directly and tell the browser to use the cache directly. The process of HTTP request response is the same.

compare the two

• 性能上, Last-Modifiedbetter than ETag, Last-Modifiedthe time point is recorded, and Etagthe corresponding hash value needs to be generated according to the MD5 algorithm of the file.

• 精度上, ETagsuperior to Last-Modified. ETagLabeling resources according to content can accurately perceive resource changes, but Last-Modifiedin some scenarios, it cannot accurately perceive changes, such as editing resource files, but the file content has not changed, which will also cause cache failure. Last-Modified The unit of time that can be perceived is seconds. If the file is changed multiple times within 1 second, then the Last-Modifiedmodification is not reflected at this time.

• Finally, if both methods are supported, 服务器会优先考虑ETag.

cache location

The type of cache location, the priority is arranged from high to low: Service Worker—— Memory Cache———Disk CachePush Cache

• Service Worker
  This application scenario, such as PWA, draws on the idea of ​​​​Web Worker. Because it is separated from the browser window, it cannot directly access the DOM. It can complete functions such as offline caching, message push and network proxy, among which offline caching is Service Worker Cache.

• Memory Cache
  It refers to the memory cache, which is the fastest in terms of efficiency and the shortest in terms of survival time. When the rendering process ends, the memory cache does not exist.

• Disk Cache
  The cache stored on the disk is slower than the memory cache in terms of access efficiency. The advantage lies in the storage capacity and storage time.

  Disk Cache VS Memory Cachecomparison of the two

  • If the content usage rate is high, the file goes to the disk first.
  • Larger JS and CSS files will be put directly into the disk, otherwise into the memory.

• Push Cache
推送缓存, is set for push resources under the HTTP/2 standard. , 是浏览器缓存的最后一道缓存机制is triggered when it is set Last-Modifedbut not set Cache-Controlor, Expiresthat is, only the last update time is obtained, but no expiration time is set. In this case, the browser will have A default 缓存策略push cache, automatically set the expiration time: (Date - Last-Modified)*0.1, that is, the current time minus the last update time and then multiplied by 10%. This strategy 只在会话sessionexists and is released when the session ends.