The caches I know are server side caches and client side caches, client side caches are browser caches, server side caches are CND caches and proxy server caches (eg: Nginx).

Browser cache

Browser caching is mainly controlled by the fields in the headers in HTTP and is divided into strong caching and negotiated caching. When the browser requests a resource, if it hits the strong cache, it reads the resource from the cache. If the strong cache does Not hit, it negotiates the cache. The browser sends the request to the server.

Strong Cache: Expires or cache-control in response

  • Expires: The server returns a Date indicating that the resource cache is valid for this time period. When the browser requests a resource, it checks whether the current client Expires. If the client Expires, the cache is valid, the strong cache is matched, and the cached resource is read.

    Expirse is a cache processing solution proposed by HTTP1.0, because it is compared by the client time and service time, so when the server and client have a large time zone, it will cause cache invalidation, but also can tamper with the client time cause cache invalidation or disorder, not very reliable

  • Cache-control: The following parameters can be configured
Cache-control: public cache-control: public cache-control: Cache-control: no-cache // Relative time, which indicates the number of seconds after the request is first received cache-control: Max-age =<seconds> // Same as max-age, but in shared resources (CDN or proxy server). Ignore this parameter for private resources cache-control: s-maxage=<seconds>Copy the code

In cache-control, max-age is set to the relative duration of the Cache. The flow is as follows:

  1. When the browser requests a resource for the first time, the server returns the resource and cache-control: max-age=?? In response. .

  2. When requesting a.js again, determine whether the resquest time is within the validity period. If yes, hit the cache.

    Because max-age is the relative time judgment between clients, which is all compared to the client time, it is more effective and safer than Expires. However, manually tampering with the client time can still lead to Cache invalidation, so cache-Control overwrites Expires after setting max-age.

Negotiation cache:

    #response header// The server returns the Last Modified time of the resource, Date last-modified#resquest header// The browser requests the resource again with the if-Modified-since field. The value of the field is the last-modified value of response if-modified-since# or
    #response header// The server returns a digest generated by MD5 based on the current resource content. If the resource content does not change, the value of this digest does not change ETag#resquest header// When the browser requests the resource again, it carries the if-none-match field. The value of the field is the ETag value of the last response if-none-matchCopy the code

The process is as follows:

  1. The first time the browser requests resource A.js, the server returns resource A.js and last-Modified.
  2. The browser requests resource A. js again, and the request header carries if-modified-since, which is the last-modified value returned Last time
  3. The server receives a resource request from A. js, and compares the time of if-modified-since in the request with the last modification time of the local resource. If there is no change, 304 not Modified will be returned, and the browser will read the local cache. The modification time changes, and the server returns the requested resource with the latest last-Modified in the header of response.

ETag is the same as the previous process, except that instead of comparing the time when the resource was last modified, the content of the resource is compared.

Last-modified + if-modified-since

A single time comparison, if the resource has been modified but its contents have not changed, will cause the cache to be invalidated, which is not desirable.

Summary: Browser (client) caching is mainly used to cache static resources

CDN cache

CDN cache, my personal understanding is, because the real server is only in one place, so for users in different places, there are some distant users to access slower, so CDN is a special place to store cache resources distributed in different places. This allows users everywhere to access the service from the nearest CDN server. If the cache is found to be invalid, the server requests the real server, obtains the resources, caches them locally, and returns the resources to the client.

Seriously: THE CDN stands for Content Delivery Network. It is the Cache layer between the client and the server. When the client requests resources, the specific CDN principle is not well understood. Roughly, it means that the CDN adjusts the domain name resolution, and then returns a CNAME. If requested resources exist on the CDN server, the CDN server will return them to the local cache. If not, the CDN server will send a request to the real server, cache the resources locally and return them to the client to realize the whole process.

Advantages: CDN cache mainly plays a role in the area before the client and server, reducing delay, diverting, reducing the traffic of the server, reducing the server pressure

References:

http://www.cnblogs.com/lyzg/p/5125934.html http://imweb.io/topic/55c6f9bac222e3af6ce235b9 https://segmentfault.com/a/1190000006741200#articleHeader1 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control