[Reproduced please indicate the source] :Blog.csdn.net/huahao1989/…

The whole Web system architecture is based on THE HTTP protocol. Using the CACHING mechanism of HTTP can not only greatly reduce the server load, but also speed up the loading of pages and reduce the traffic consumption of users. Fast arrival and ease of access are inherent in the Web, and caching mechanisms have long been widely implemented by server and browser vendors. As Web content authors, why not?

Introduction to HTTP Caching

When you think about HTTP caching, the first thing that comes to mind is disk caching, and 304 status codes. There are two cases in which the browser handles caching:

  • The browser asks the server if the cache is valid, and the server returns 304 instructing the browser to use the cache.
  • While the resource is still valid, the browser uses the disk cache directly (with a slight difference when refreshing).

The details of each state are as follows:

1, the cache-control

Cache-control is used in the HTTP response header to indicate which caching policy the proxy and UA are using. Such as:

  • No-cache indicates that this response cannot be used directly for subsequent requests (without checking with the server).
  • No-store: no cache (not stored in non-volatile media, if there is, try to remove, for sensitive information)
  • privateOnly UA can be cached
  • publicFor everyone can cache.

When cache-control is cacheable, the Cache time can also be specified (for example, public, max-age:86400). This means that for one day (60x60x24=86400), the browser can use the cache directly. Of course, the browser also has the right to discard any cache at any time, so there may be consistency issues here.

2, the Etag

If the resource itself does change at any time, using cache-control will keep the user’s page from being updated. However, if you also want to make use of HTTP caching, a conditional HTTP request is required.

HTTP protocol specifications define ETag as the entity tag of the requested variable. Weak entity is required as long as the content semantics remain unchanged. Strong entity refers to the same bytes.

If the response body contains an Etag field, the next time the browser sends a request, the if-none-match header will ask the server If the version is still available. If the server finds that the version is still up to date, it can return a 304 status code instructing the UA to continue using the cache. A similar format returned by the server: the ETag: W/” 3 ae83efccfc543bad6866e325cd8bfb9″

The client’s query update format is like this: the If – None – Match: W/” 3 ae83efccfc543bad6866e325cd8bfb9″

If the ETag has not changed, the status 304 is returned.

3, last-modified

The first time a browser requests a URL, the server returns an HttpReponse Header with a status of 200, indicating the requested resource and a last-Modified attribute. The Last time the file was Modified at the server end looks something like this: Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT

When the client requests this URL a second time, the browser sends an if-modified-since Header to the server, asking If the file has been Modified Since: If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT

If the resources on the server do not change, the HTTP 304 (NotChanged) status code is automatically returned with nothing, thus saving the amount of data transferred. When server-side code changes or the server is restarted, the resource is re-issued, returning similar to the first request. This ensures that resources are not repeatedly issued to the client and that the client can get the latest resources when the server changes.

Note: If the time of if-modified-since is later than the current time of the server (the current request time request_time), it is considered an illegal request

4, Expires

The date/time given after the response is considered obsolete. Example Expires:Thu, 02 Apr 2009 05:14:08 GMT

Used in combination with last-Modified. Used to control the validity of the request file when the client browser requests data from the cache rather than the server when the request data is within the validity period. The decision to update data from the server is made when the data in the cache becomes invalid or expired.

5. Last-modified and Expires

The last-Modified flag can save a bit of bandwidth, but you still can’t send an HTTP request out, and it needs to be used with Expires. The Expires flag, on the other hand, allows the browser to not even send an HTTP request. For example, when the user F5 or hits the Refresh button, an HTTP request will be sent even to a URI with Expires, so last-Modified is still used. And use Expires with it.

6. Etag and Expires

If both Etag and Expires are set on the server, Etag works the same way: HttpRequestHeader: if-modified-since and if-none-match are HttpRequestHeader versions of last-Modified /Etag. We can see that the values of these two headers are exactly the same as the last-Modified Etag value issued by the WebServer; 304 is returned only after a full Match of if-modified-since and if-none-match is checked for modification time and Etag.

Last-modified and Etag

Last-modified files must be consistent across multiple machines in a distributed system so that load balancing across different machines does not result in a failed alignment

Etags should be turned off for distributed systems as much as possible (eTAGS will vary from machine to machine)

Last-modified is used in conjunction with the HTTP header requested by ETags. The server first generates last-Modified /Etag, which the server can use later to determine whether the page has been Modified and whether the file should continue to be cached

The process is as follows:

  1. The client requests A page (A).
  2. The server returns to page A and adds A Last-Modified/ETag to page A.
  3. The client renders the page and caches it along with last-Modified /ETag.
  4. The client requests page A again and passes to the server the last-Modified /ETag returned from the Last request.
  5. The server checks the last-Modified or ETag, determines that the page has not been Modified since the Last client request, and returns response 304 with an empty response body.

Note:

  1. Both last-Modified and Etag headers are HttpReponse headers issued by the WebServer, and the WebServer should support both.
  2. After the WebServer sends last-Modified /Etag headers to the client, the client caches these headers.
  3. HttpRequestHeader: if-modified-since and if-none-match for last-Modified /Etag requests to the same page. The values of these two headers are exactly the same as the last-Modified Etag value issued by the WebServer;
  4. Check the above values on the server to determine whether files continue to be cached.
Cache-control: max-age= seconds and Expires

Expires = time, HTTP version 1.0, the cache load time that allows clients to not check before max-age = seconds, HTTP version 1.1, how many seconds a resource is cached locally. If both max-age and Expires exist, they are overridden by the max-age of cache-control.

One drawback to Expires is that the returned expiration time is the server-side time. The problem with Expires is that if the client time is too different from the server time, the error can be large, so starting with HTTP 1.1, cache-control: max-age= seconds is used instead.

Expires =max-age + “Current request time per download”

So once the page is re-downloaded, Expires is re-evaluated, but last-Modified does not change

9. Refresh the browser

Normal reloading

Pressing the refresh button or a shortcut (Cmd+R in MacOS) triggers a normal reload in the browser, at which point the browser performs a Conditional GET. Cache header fields such as cache-control are ignored and have if-none-match and if-modified-since headers. The server always receives an HTTP GET request. If you press Refresh in Chrome, the browser also displays the following request header: cache-Control :max-age=0

Note: Reentering the current page address in the address bar and pressing Enter will also be treated as a refresh, meaning that direct use of the hard disk cache will only be observed when a new TAB or hyperlink is opened.

Forced reload

In Chrome, pressing Cmd+Shift+R (MacOS) triggers a Hard Reload, in which all resources, including the page itself, are not cached. The browser sends the HTTP request directly without any conditional request fields. To force a refresh in Chrome, the browser also carries the following request headers: cache-control: no-cache Pragma: no-cache

How do I invalidate cached static files

Usually we reference a lot of JS or CSS files on the page, once requested and cached in the browser resources are not invalid, this time we find that we have a bug to fix or something new to publish, what do you do? Some people say, forced to refresh the browser, or does not return to 304, when the request returns the new resource content directly, but this is not good, one is that the user may not know forced to refresh or clear the cache, the second is just after the release new content for the first time the user’s request and returns the new content cache, or go behind the cache; Third, we generally use CDN, and we need to clean the CDN cache after each release, which is very troublesome. The easiest way to do this is to refer to static resources with a version number, like… /js/index.js? V =1.0, if you change the content, just change the version number and the browser will get the new content.

Welcome to the “backend old bird” public account, the next will be a series of feature articles, including Java, Python, Linux, SpringBoot, SpringCloud, Dubbo, algorithms, technical team management, as well as a variety of brain maps and learning materials. NFC technology, search technology, crawler technology, recommendation technology, audio and video interactive live broadcast, as long as I have time to sort out and share, please look forward to, ready-made notes, brain maps and learning materials if you have requirements can also leave a message on the public account to obtain in advance. As I am in all the teams are basically in the role of breakthrough and pathfinding, made a lot of things, encountered many pits, solve a lot of problems, welcome everyone to add the public account into the group to exchange and learn together.

[Reproduced please indicate the source] :Blog.csdn.net/huahao1989/…