“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Caching is a technique for saving a copy of a resource and using it directly on the next request.

We use HTTP caching, which reduces client wait time and network traffic by reusing cached resources, as well as alleviating pressure on the server. Can significantly improve the performance of our website and application.

Although HTTP caching is not necessary, it is often necessary to reuse cached resources, and HTTP caching is an important tool for Web performance optimization.

The type of HTTP cache

Generally, HTTP caching strategies fall into two categories:

  • Strong cache
  • Negotiate cache.

We can see the difference between them.

  • Strong caching forces direct use of the cache.
  • Negotiating a cache means you have to negotiate with the server to see if the cache works.

Strong cache

The strong cache does not send a request to the server, but reads resources directly from the cache. In the Network option of the Chrome console, you can see that the request returns a status code of 200, and size displays from Disk cache or from Memory cache.

Negotiate the cache

The negotiation cache will first send a request to the server. The server will judge whether the negotiation cache is hit according to some parameters of the request header. If yes, the server will return the 304 status code with a new Response header to inform the browser to read the resource from the cache.

HTTP cache control

In HTTP, we can control caching policies by setting response headers and request headers.

Strong caching can be achieved by setting both Expires and cache-control response headers. If both exist, cache-control takes precedence over Expires.

Expires

The Expires response header, which is a artifact of HTTP/1.0. Represents the expiration time of the resource. The value is an absolute time. It tells the browser that data can be accessed directly from the browser cache before expiration time. Because it is an absolute time, the time difference or error between the client and the server may cause the time inconsistency between the client and the server, resulting in cache hit errors. If a max-age or s-max-age directive is set in the cache-control response header, Expires is ignored.

Expires: Wed, 21 Oct 2015 07:28:00 GMT
Copy the code

Cache-Control

Cache-control appeared in HTTP/1.1. The caching mechanism can be implemented by specifying multiple instructions. This parameter is used to indicate the maximum duration of the resource cache. That is, the client does not need to send requests to the server during this time. Precedence over Expires. The value of expiration time instruction is relative time, which solves the problem of absolute time.

Cache-Control: max-age=315360000
Copy the code

Cache-control has many attributes, each of which has different meanings.

The cache can be

  • publicIndicates that the response can be cached by any object, including the client that sent the request, the proxy server, and so on.
  • privateIndicates that the response can only be cached by a single user, not as a shared cache (that is, the proxy server cannot cache it)
  • no-cacheDo not use strong caching and need to negotiate cache validation with the server inspector.
  • no-storeThe cache should not store anything about the client request or the server response, that is, no cache is used.

overdue

  • max-age=<seconds>The maximum period of cache storage beyond which it is considered expired.
  • s-maxage=<seconds>Set the shared cache. overwritemax-ageandexpiresPrivate caches ignore it
  • max-stale[=<seconds>]An optional number of seconds that a client would like to receive a resource that has expired can be set to indicate that the response cannot be out of date beyond that given time.
  • min-fresh=<seconds>The client expects to get the latest response within the specified time

Revalidate and reload

  • must-revalidateIf the page expires, go to the server to obtain it.
  • proxy-revalidate 与must-revalidateSame effect, but used for shared cache.

other

  • only-if-cachedNo network requests are made and only caching is used.
  • no-transformResources may not be converted or transformed. For example, image formats cannot be converted.

The negotiated cache can be controlled with last-modified/if-modified-since and ETag/ if-none-match pairs of headers.

The last-modified, If – Modified – Since

Last-modified and if-modified-since values are time strings in GMT format, representing the time when the file was Last Modified.

  1. When the server responds to a request, it passesLast-ModifiedTells the browser when the resource was last modified.
  2. When the browser requests the server again, the request header containsLast-ModifiedField, followed by the last modification time obtained in the cache.
  3. The server receives this request hair existingif-Modified-SinceIs compared with the last modification time of the requested resource. If it is the same, 304 and the response header are returned. The browser only needs to obtain the information from the cache. If it has been modified, then start transmitting the response as a whole, and the server returns: 200 OK

But it is often the case on a server that a resource has been Modified but its actual contents have not changed at all, and the entire entity is returned to the client because the Last-Modified time does not match (even if the client has an identical resource in its cache). To solve this problem, HTTP/1.1 introduced Etag. Etag has a high priority and last-Modified.

Etag, If – None – Match

Etag is a unique identifier generated by the server for each resource, just like a fingerprint. Changes in resources will lead to changes in Etag, regardless of the last modification time. Etag can ensure that each resource is unique.

When the browser initiates a request, the request header of the browser contains if-none-match. The value of the Etag returned last time is sent to the server. After receiving the request, the server compares if-none-match with the unique identifier of the requested resource. If the same information indicates that the resource has not been modified, the response is 304, and the browser directly obtains the data from the cache. If not, it indicates that the resource has been changed. The status code 200 is returned in response to the entire resource content.

conclusion

From the previous section, we learned that HTTP caching is divided into:

  • Mandatory cache
  • Negotiate cache.

The mandatory Cache is controlled by cache-control, Exipres (HTTP1.0). The browser reads directly from the local cache and does not interact with the server. Status code 200.

The negotiated cache is implemented by last-modified/ifModified-since, Etag/if-none-match. Each request requires the server to determine whether the resource has been updated to determine whether the browser is using the cache. If so, 304 will be returned, otherwise the response will be complete.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!