Http cache and http Cache

Http cache and http Cache

I haven't written a blog for a long time. Now I am almost New Year's Eve. Recently, my project is not very busy. I wrote a blog as the first in 2018. I just regained my impulse to write a blog a few years ago after graduation. Http protocol is something that every programmer needs to know, whether it's front-end staff or back-end staff. When I was in my previous company, I had a special understanding of cdn due to project needs, you need to have knowledge about caching in http.

Http cache Flowchart

Directly, the following content will be detailed

Http protocol

Before introducing http caching, let's give a brief introduction to http packets. An http packet is the data sent and responded when the client (such as a browser) communicates with the web server.

An http request consists of the request line, the message header, and the request body.

Http response is composed of three parts: Status line, message header, and response body.

Information related to the cache is included in the message header. If you do not know the http protocol, add the http protocol knowledge first. If you search for a large number of http protocols, you will skip this article. Cache fields in the http Response Header

Request a webpage at will. Here we open the Baidu homepage and open the browser debugging tool.

Expires

The Expires value is the expiration time (GMT Greenwich Mean Time) returned by the web server. If the next request time of the browser is earlier than the time returned by the server, the browser directly retrieves data from the cache without sending the request again.

Cache-Control

Common Cache-Control values include private, public, no-cache, max-age, and no-store.
Private: the client can Cache
Public: both the client and the proxy server can be cached.
Max-age = <seconds>: The maximum cache storage period. The cache is considered to have expired (unit: seconds)
No-cache: This is easy to misunderstand. It is mistaken that the response is not cached. In fact, Cache-Control: no-cache will be cached,
However, each time the browser provides response data to the browser, the browser sends a request to the server every time, and the server makes a decision to evaluate the validity of the cache.
No-store: All content is not cached (truly not cached)

For more details about the value of Cache-Control, refer to the MDN document https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

Forced Cache: difference between Expires and Cache-Control

Expires and Cache-control are calledForced CacheWhen the cache is invalid, the browser does not initiate a request to the server and directly retrieves data from the cache. Maybe you have doubts. They all play the same role. Why do they both exist?

Expires is something of Http1.0 in the old age, and now the default browser uses Http1.1 by default, so its role is negligible. Expires has one disadvantage: it is the absolute time of the returned server. It is not rigorous to use the local time and the server time to determine whether the returned time Expires. You can modify the local time as needed, in this way, the Cache can expire at any time, so it is replaced by Cache-Control: max-age = <seconds>. In http1.1, the Cache-Control priority is higher than Expires. The feature of software engineering is backward compatibility, so Expires has never been abandoned. It still works for browsers using http1.0 protocol.

Last-Modified

The server responds to the browser request and notifies the browser of the last modification time of the resource.

Etag

When the server responds to the request, it tells the client (browser) that the requested resources are identified on the server (the Etag generation algorithm is determined by the server. The etag generation algorithm may be different for different web servers, the Http Protocol does not require etag generation rules. For example, when a file is small, md5sum sha1sum can be used, or the file is generated based on the file modification time, file size, and file inode file attributes, we can understand it as a unique identifier of a resource, as long as the value of Etag changes in the file.

Comparison cache: Last-Modified/ If-Modified-SinceAnd Etag/ If-None-Match

Last-Modified and Etag are called comparison caches. Compared caches, Gu mingqiang requires the server to compare and determine whether the client (browser) can use the local cache and compare the cache validity, the Http Code returned by the server to the client (browser) is 304. The server only returns the http header information without the response body. The status Code returned by the client through the server304Knowing that the local cache is not modified, you can directly use the local cache, which greatly reduces the client request response time.

The general process for comparing the cache is as follows. When a browser requests a server resource, the server obtains the Last modification time (Last-Modified) of the resource) or generate the Resource Identifier (Etag) based on a certain algorithm, and return the Last-Modified or If-Modified-Since to the browser, the browser caches the Last-Modified, Etag, and resource content locally at the same time. When you request this resource again from the server, If-Modified-Since: Mon, 07 Nov 2016 07:51:11 GMT or If-None-Match: xxxxxxx "request header is sent to the server, and the server calculates the resource's Last-Modified or Etag again, if it is different from the value sent from the client, if the table name resource changes, Http Code 200 is returned to the browser. Return the resource content to the browser. if the content is the same, Http Code 304 is returned to the browser without returning the resource content to the browser.

For browsers, when the cache is forced to expire (or press F5 to refresh, different browsers may be different, firefox uses F5 to request resources, if the original response headers of the resource contain Last-Modified and Etag, the browser will include If-Modified-Since and If-None-Match in the request header.

Difference between Last-Modified and Etag

Here, you may ask whether the resource content has changed through Last-Modified. Why does Etag need to be used ?, The main reason is that Etag solves the problem that Last-modified failed to solve. Etag is more rigorous than Last-Modified.

1. Some files may be changed cyclically, but their content does not change (only the modification time). At this time, we do not want the client to think that the file has been modified.
2. some files are frequently modified, for example, modified within seconds (for example, modified N times within 1 s ), if-Modified-Since can check that the granularity is s-level, which cannot be determined.
3. If you need to cache dynamically generated content, you can use etag to control the cache.

Note that if both Last-Modified and Etag exist at the same time, the browser will send these two values to the server at one time when sending the request, with no priority. The server is compared, compare only one web Server. Different web servers may have different logic. I will not go into details.

Significance of Cache-Control: no-cache in the Http Request Header

Generally, when pressing ctrl + f5 to force the refreshing, the request header contains Cache-Control: no-cache. In fact, this is to skip the local forced Cache and tell the server to skip the comparison cache, that is, request resources again. When a front-end user requests a backend API through GET, Cache-Control: no-cache is always included in the ajax request header.

Summary

1. For forced cache, the server notifies the browser of a cache time. During the cache time, the next request will be directly cached. If the cache time is not within the cache time, the cache policy will be compared.
2. For the comparison cache, The Etag and Last-Modified in the cache information are sent to the server through a request, and the server verifies that the browser uses the cache directly when the 304 status code is returned.