Shulou(Shulou.com)06/03 Report--

Original: http://blog.poetries.top/2019/01/02/browser-cache/

Scene reproduction

During an interface test, a situation was found:

The functional requirements of the product are as follows: click a button on the APP page and the client sends a URL request to the server.

However, Charles grabbed the packet and found that the request could be sent normally when the button was clicked for the first time, and then the request was not sent when it was clicked many times later.

What? . It's not scientific!

Cause investigation

First of all, I looked at the relevant code, and it is true that the request will be sent every time the click is executed, and there is no problem. But why didn't you send the request later?

After in-depth understanding, it turns out that it is caused by http caching.

Let's follow the editor to learn about http caching, and you'll see what's going on.

Popular science of knowledge 1. What is the existence of http cache 1) what is cache

By caching, we usually refer to Web caching, which exists between the server and the client. It is a technique that saves a copy of a resource and uses it directly on the next request. When the Web cache discovers that the requested resource has been stored, it intercepts the request and returns a copy of the resource without going to the source server to download it again.

2) Why to use caching technology

This is because it is usually slow and costly to get content over the network, and some responses require multiple round-trip communications between the client and the server, which delays the time that the browser can use and process the content. at the same time, it also increases the data cost for visitors. Through caching and using resource copies, we can greatly reduce the time to obtain resources, reduce network bandwidth consumption, reduce latency and network congestion, reduce server pressure and improve server performance.

3) what about http caching?

Web caching can be roughly divided into the following types of implementation:

Database data cache; server-side cache (including proxy server cache and CDN cache)

Browser-side cache; Web application layer cache.

Http cache is one of the browser-side caches in the Web cache, which is based on the http protocol, and it is also the most common cache.

How 2.http caching works

In this section, we first understand the workflow of http request resource caching, and then explain the details of the process, you will have a better understanding of how http caching works.

1) Workflow of http request for resources

When requesting server resources for the first time, there is no cache file, and the request is sent directly to the server. The process is as follows:

Flowchart of first request

When the server resource is requested for the second time and later, there is already a local cache, and the requester will judge whether the resource is expired and updated, and decide whether to send the request or which conditional judgment field to send. The server decides the response status returned and whether to return the resource according to the judgment result. The specific process is as follows:

Flow chart of non-first request

The above is the workflow flow chart of http cache request resources. Http cache is a mechanism that controls file cache through fields such as Cache-Control (or Expires) and Last-Modified (or Etag) in the HTTP protocol header. Each field and process in the process are described in detail below:

1) Control the relevant fields of the cache

Pragma sets whether pages are cached, Pragma is cached, and no-cache is not cached. It http1.0 legacy fields, when it exists with cache-control, will be overwritten by cache-control.

Expires defines the cache expiration time, which is also a legacy field of http1.0 relative to the time on the server. Such as Expires:Thu, 30 Aug 2018 08:14:36 GMT.

Cache-Control also defines the cache expiration time. In order to solve the problem that "Expires time is not guaranteed to be consistent with the client time relative to the server", it is added to the http1.1 protocol. If both Expires and Cache-Control appear in the message, Cache-Control shall prevail. The instructions for the Cache-Control field are as follows:

No-cache pays special attention to the fact that this does not mean not being cached! Will be cached, but each time the response data is provided to the client, the cache evaluates the effectiveness of the cached response to the server

No-store responses are not cached

Max-age sets the existence time of the cache, relative to the time the request was sent, in s. During the cache time, if there is a request for this resource, the browser will not issue a http request, but will directly use the locally cached file. Such as Cache-Control: max-age=604800.

2) the field Last-Modified/If-Modified-SinceLast-Modified that controls the negotiation cache indicates the last modification time of this response resource, such as Last-Modified:Tue, 20 Dec 2016 05:01:10 GMT If-Modified-Since when the server requests a resource with an If-Modified-Since header, the server will check the Last-Modified. If the time of Last-Modified is earlier than or equal to If-Modified-Since, it will return a response without a body, otherwise it will return 200 and return the resource again.

ETag/If-None-Match

ETag is a response header field. It is a hash string generated based on the content of the entity, which is used as the unique identification of the resource and generated by the server, such as: ETag: "0q9QPk4kQr2stUniver XMvRW8yqEt2iw ="

If-None-Match is a conditional request header. After receiving the request, the web server finds that the header If-None-Match is compared with the corresponding check string Etag of the requested resource. If it matches, the server will return the response with the requested resource entity, otherwise the server will return the response without the entity. The process is shown in the following figure. Such as If-None-Match: "eOM1rC2lomM4oUbYNn0QD/Y4WLg=".

Note: ETag has a higher priority than Last-Modified, and ETag will prevail if it exists at the same time.

Negotiate caching process

learn in order to practise

Finally, going back to the scenario at the beginning of the article for analysis, according to the Expires field in the requested Response header information in the following figure, we know that the resource requested by http has a cache time of 3 hours, and Cache-Control: max-age=10800 also appears in the message, which also means that the resource has been cached locally for 3 hours, regardless of whether the two times are the same or not, subject to Cache-Control. This explains why the request is no longer sent when the button is clicked again later (within 3 hours).

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.