background

Browser caching plays an important role in performance optimization. A good caching strategy can shorten the distance of requested pages, reduce latency and network load, and reduce request bandwidth. We need to have some understanding of how browser caching works.

The browser cache mechanism process

• The browser loads the resource according to the resourcehttp headerCheck for a hitStrong cache;
  • If: The browser reads the resource directly from its cachehttpRequest to the server;
  • No hit: The browser sends the request to the server, through the serverhttp headerVerify that the resource is hitNegotiate the cache;
    • Hit: The request returns but does not return the resource, telling the client that it can be loaded directly from the cache;
    • No hit: request returned, resource returned;

It can be concluded that the difference between strong cache and negotiated cache is that strong cache does not send requests to the server, while negotiated cache sends requests to the server. Next, we need to know how the HTTP header determines whether strong and negotiated caches are hit.

Expires

Expires: Thu, 21 Nov 2019 07:48:15 GMT
Copy the code

Expires is the HTTP/1.0 field that controls web caching. The value is the expiration time for the server to return the result cache of that request. If it happens before Expires, the local cache is always valid. Otherwise, a request is sent to the server to retrieve the resource. Is absolute time;

Cache-Control

Cache-control is a new HTTP/1.1 rule that controls the fields in the web Cache.

• The sample analysis

 

• cache-control: max-age=2592000,s-maxage=3600
  • Max-age: indicates the sum of the first request time of the resourceCache-Control max-ageSet the validity period, calculate the resource expiration time; Compare this expiration time to the current request time. If the request time is before the expiration time, the cache will be hit, otherwise it will not be hit. Is relative time;
• cache-control: public, max-age=31536000
  • publicIt can be cached by all users’ browsers, including proxy servers. The duration is the sum of the first resource request time and 31536,000 seconds.

Expires & Cache-Control

We need to know that cache-control ** takes precedence over Expires when both are present (see figure below)

Because Expires time returns the absolute time of the server, and the local time of the client can be changed (time zone is different, etc.), errors occur between the server and client time, and the strong cache will directly fail. Cache-control is a relative time calculated according to the first request time of the client, so it will not be affected. Cache-control is, after all, a new specification in HTTP/1.1

Check that the browser has successfully applied strong caching

Once a resource hits a strong cache, the browser does not send a request to the server, but reads directly from the cache. In Chrome, 200 OK disk cache or 200 OK from memory cache is displayed

disk cache & memory cache

What is from Memory cache and from Disk cache? Memory disk memory disk memory disk

Hard disk cache

Disk cache is called disk cache

Disk cache writes data to disk files. Disk cache reads disk files for I/O operations and then reparses the cache content. The reading speed is slower than that of memory cache.

Read cache timing

When is it read from the memory cache and when is it read from the hard disk cache? In the browser, JS and image files are directly stored in the memory cache after they are parsed. When refreshing a page, they are directly read from memory cache, while large CSS files are stored in hard disk files. So every time the page is rendered, the cache is read from disk cache.

• Explain by example

When you open a web page, you start a new process and there are no cached files in memory. So read from the disk cache, as shown in the following figure

When refreshing a web page, there are already cache files in memory, so some files will be read from memory cache

Negotiate the cache

Last-Modified: Wed, 21 Nov 2018 05:46:58 GMT
If-Modified-Since: Wed, 21 Nov 2018 05:46:58 GMT
Copy the code

ETag

An Etag is a unique identifier (generated by the server) that is returned to the current resource file when the server responds to a request.

ETag: "d5d-55b192d5e0640"
If-None-Match: "d5d-55b192d5e0640"
Copy the code

The specific process is as follows:

• The first time the browser requests a resource from the server, the server returns the resource at the same timeRespone 的 Header 的 ETagValue is set to a unique identifier for the current resource file of the resource.
• 2, the second request, inRequest 的 HeaderOn the plusIf-None-Match, the value of the last requested resourceETag;
• 3. The server receives the messageIf-None-MatchWith server filesETagThe comparison,
  • Matched: Returns if the match is consistent304, indicates that the resource is not updated, so the resource is not returned. The browser will receive304Use local caching; updateETag;
  • Miss: Inconsistent returns200, re-updateETag, return200, return resources.

We can see that the process is the same as the Last-Modified process, with one difference:

• When the server returns304 Not ModifiedThe response is due toETagRegenerated,Respone 的 HeaderI’m going to put thisETagReturn, even if thisETagIt’s the same as before.

Last-Modified & Etag

Last-modified and ETag can be used together (see figure below). The server validates the ETag first. If the ETag is consistent, the server will continue to compare last-Modified and decide whether to return 304 Not Modified.

ETag can solve some problems existing in last-Modified. How can last-Modified ETag be born?

• The content of the file does not change, but the modification time changes. In this case, you do not want the client to think that the file has been modified.
• Some files are modified very frequently, such as in seconds or less, (e.g1SChanges in theNTime),If-Modified-SinceThe granularity that can be examined isSLevel, this modification cannot be determined;
• Some servers do not know exactly when a file was last modified.

conclusion

A strong Cache takes precedence over a negotiated Cache. If a strong Cache (Expires/cache-control) takes effect, a local resource can be used without sending a request. If it does not take effect, the negotiation cache is carried out. Negotiation cache (Last-Modified/ETag) is determined by the server. If the file is invalid, a new resource is returned. Otherwise, 304 is returned and no resource is returned.