Practice shows you — HTTP cache

Time:2021-9-18

In order to understand the mechanism of HTTP caching, this article builds nginx and sets nginx configuration
There are many articles on the Internet, but most of them are written expressions. Caching is more theoretical, which makes me confused at the beginning

So this time I illustrate it through screenshots and step diagrams, and add words. If you don’t like words, you can actually look at pictures

Each screenshot below is in traceless mode

Strong cache and negotiation cache

Before that, we want to solve the strong cache and negotiation cache:
Strong cache: No request is sent to the server and resources are read directly from the cache, you can see the status code of 200 returned by the request in the network option of the chrome console, and the size displays from disk cache or from memory cache.usuallycache-controlandExpiresConfigure the properties of

Negotiation cache: force cachinginvalidAfter, the browser sends a request to the server with the cache IDThe server determines based on the cache IDWhether to use the cache process; usuallyLast-ModifiedandETagVerify and return304 not modifiedStatus code

Cache control

max-age

I turned off the negotiation cache in nginx, and added it to the sever configuration of nginxExpires @15h13m; (@15h13mCache refresh for 15:13 every day)
Practice shows you -- HTTP cache
Set in nginxExpires, and the server returnsresponse headersYescache-control: max-ageFields andExpiresIn fact, the two caches point toSame point in timeRefresh

We can see that when the browser refreshes the page within the specified time, it will trigger the cache, and then re request after expiration

No cache (Etag and last modified are closed)

Practice shows you -- HTTP cache

no-cache: the cache needs to be verified with the server;

When we openno-cache, when the browser does not have a cache, the negotiation cache is sent to the server, but we have turned off the negotiation cacheetagandLast-Modified, so request to resend

No store (enable Etag and last modified)

Practice shows you -- HTTP cache
no-store: this field tells the browser not to cache

Negotiation cache

Last modified and f-modified-since (Etag off)

When the browser accesses the resource for the first time, while the server returns the resource, add the last modified header in the response header. The value is the last modification time of the resource on the server. The browser caches the file and header after receiving it;
For example:

Last-Modified: Fri, 23 Oct 2020 07:33:48 GMT

Then the next request, the browser will carryLast-ModifiedValue toIf-Modified-SinceAnd put it inrequest headersCache validation in
Practice shows you -- HTTP cache
The server willIf-Modified-SinceThe value corresponds to the last modification time of this resource in the servercontrast
If there is no change, 304 and an empty response body are returned and read directly from the cache
IfIf-Modified-SinceLess than the last modification time of the server, the description file is updated, so the new resource file and 200 are returned

Disadvantages of last modified:
  • Even if the file is not modified, it will still cause the last modified to be modified, and the server cannot hit the cache, resulting in sending the same resources
  • Last modified can only be timed in seconds. Modifications can only be made within seconds, which cannot be perceived, and an incorrect resource is returned

Negotiate cache Etag and if none match (turn off last modified)

Negotiation cacheETagFollowLast-ModifiedSimilar, but Etag is a string generated by the algorithm

Practice shows you -- HTTP cache

etagsolveLast-ModifiedWhy not use all the servers directlyetagAnd eliminatedLast-Modified, But both exist together?

Priority verification of strong cache and negotiation cache

Practice shows you -- HTTP cache

In the figure, we can see that the strong cache is performed for the first refresh. After the strong cache expires, the browser carries the field to the server for negotiation cache

Cache flowchart

Practice shows you -- HTTP cache

If you like this article, you can praise it. This is the motivation of my creation

Related articles

Browser caching mechanism