This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

One, foreword

Hi, I’m Inline, a front end guy. Today hesitated for a long time to write HTTP strong cache and negotiation cache, write the words of the gold many big man’s article has said very detailed very easy to understand, there is a knife and water article suspected. But do not write and want to make a summary, write out to deepen the impression. Hesitating or decided to write an article, if there is any mistake not detailed hope you see more tolerant understanding.

Second, strong cache

A strong cache is a local cache

When a browser requests a resource for the first time and requests it again, it obtains the header information of the resource Cache and determines whether the resource expires in the local Cache based on cache-Control and expires. If the resource information does not expire, the browser directly obtains the resource information from the local cache. Then, the browser does not request resources from the server again. If the resource information expires, the browser resends the request, recaches the resources, and updates the cache time.

Strong caching is controlled by the Expires and cache-Control fields in the HTTP request header to indicate the Cache time of the resource.

Expires

Expires is the HTTP1.0 specification, and its value is an absolute time string in THE GMT format.

expires: Thu, 17 Nov 2022 10:06:35 GMT
Copy the code

Cache-Control

Cache-control appears in HTTP1.1, and its value is a relative time.

cache-control:max-age=31536000
Copy the code

The difference between Expires and Cache-Control

Both values are used to control cache time, so what’s the difference between them?

One is absolute time and one is relative time. The absolute time changes with the system time, indicating that the time can be artificially changed. The relative time is a fixed time from the moment the request arrives at the resource.

Both times can coexist, and cache-control has a higher priority

Negotiate the cache

The negotiated cache is used by the server to determine whether cached resources are available to expire

Because the server needs to communicate with the browser to confirm that the cache resource is available, and the process of communication is to send a request, there needs to be a special identifier in the header for the server to confirm that the cache resource is available, so there are two sets of header fields:

  • EtagandIf-None-Match
  • Last-ModifiedandIf-Modified-Since

Last-Modify/If-Modify-Since

Last-Modify

When the browser requests resources from the server for the first time, the server adds last-modify in the request header of the resource. Last-modify is the Last modification time of the resource on the server, that is, last-modify records the Last creation and modification time of the resource. Make sure the resources the server gives the browser are up to date.

If-Modify-Since

When the browser requests the resource again, it adds if-modify-since to the request message

If-modify-since is the last-modify time returned by the browser when the resource was Last requested. In other words, last-modify and if-modify-since are the same time

After receiving the if-modify-since time, the server checks whether the last modification time of the resource is the same as that of the if-modify-since time. If the time is the same, the resource cached by the browser is the latest. The server returns the 304 status code to inform the browser that the resource is the latest

If no, the resource has been modified or updated during the period when the browser does not request the resource. In this case, the server returns the latest version of the resource and the latest last-modify time.

Etag/If-None-Match

Etag/ if-none-match is the same as last-modify/if-modify-since. If the resource has changed, the server returns 304. If the resource has not changed, the server returns 304. Browsers continue to use local caching.

Since they’re all the same processing logic, what’s the difference between these two?

Etag/If-None-MatchandLast-Modify/If-Modify-SinceThe different

Etag/ if-none-match is used to compensate for last-modify/if-modify-since

  • The last-Modified flag is only accurate to the second level. If a resource is Modified more than once in a second, it will not accurately mark the modification time of the file.
  • Some resources are generated periodically. Sometimes the content does not change, but the last-Modified record time changes, causing the resource to refresh.
  • The server may not obtain the correct modification time of resources or the time on the proxy server may be inconsistent with that on the proxy server.

Etag is a unique identifier on the server for resources that are automatically generated by the server or generated by the developer, allowing for more accurate cache control

Etag/ if-none-match has a higher priority than last-modify/if-modify-since

Write in the last

If there are shortcomings in the article, please point out, study together, thank you very much ~~~