Preface:

Front-end ER needs to focus on: caching

This is something developers both love and hate. Modern phones cache your resources all the time, but to clear the cache, you don’t have to force a refresh like a PC does. You have to manually clean the browser cache, and sometimes even restart it… So it’s really important to understand the caching mechanism and be able to control it.

Let’s read through the theory and then really understand caching in practice

This will be covered below

  • DNS cache
  • CDN cache
  • Browser cache (HTTP cache)

DNS cache

What is DNS?

Its function is very simple, is based on the Domain Name to find the IP address

The DNS

In short, the domain name is resolved to the IP address corresponding to the domain name

www.dnscache.com (domain name) - DNS resolution -> 11.222.33.444 (IP address)Copy the code

DNS cache

Where there is DNS, there is cache! Browsers, operating systems, Local DNS, and root DNS all cache DNS results to some extent

DNS Query Process

  1. First search the browser’s own DNS cache, if present, domain name resolution is complete.
  2. If the browser does not find the corresponding entry in the cache, the browser attempts to read the hosts file of the operating system to check whether the mapping exists. If the mapping exists, domain name resolution is complete.
  3. If no mapping exists in the local hosts file, search for the local DNS server (ISP server or manually configured DNS server). If yes, the domain name is resolved.
  4. If the local DNS server is not found, it sends a request to the root server for a recursive query.

CDN cache

What is a CDN?

Full name: Content Delivery Network. Similar to the railway station, passengers no longer need to queue up to buy tickets in the ticket hall, which alleviates the pressure of the ticket hall (plays a role of diversion and reduces the load pressure of the server).

When users browse the website, CDN will choose a CDN edge node nearest to the user to respond to the user’s request, so that the request of Hainan Mobile users will not run thousands of miles to the server of Beijing Telecom room (assuming the source station is deployed in Beijing Telecom room)

CDN cache

When the browser’s local cache is invalid, the browser sends a request to the CDN edge node. Similar to browser cache,CDN edge node also has a caching mechanism

CDN edge node Cache policies vary with different service providers, but generally follow the HTTP standard protocol and set the CDN edge node data Cache time through the cache-Control: max-age field in the HTTP response header.

CDN edge node data caching mechanism

  • When the browser requests data from the CDN node, the CDN node determines whether the cached data has expired.
  • Unexpired: The cached data is directly returned to the client.
  • Expired: THE CDN node sends a source back request to the server, pulls the latest data, updates the local cache, and returns the latest data to the client.

CDN service providers generally provide multiple dimensions based on file suffixes and directories to specify CDN cache time to provide users with more refined cache management.

CDN advantage

  1. CDN node solves the problem of cross-operator and cross-region access, and the access delay is greatly reduced.
  2. Most requests are completed at the edge of the CDN, which acts as a diversion and relieves the load on the source server.

Browser cache (HTTP cache)

Look at this picture

What is browser caching?

Where do cached resources go?

You may be wondering, the browser stores resources, but where does it store them?

  • memory cache
MemoryCache, as its name implies, is a cache of resources in memory that can be retrieved from memory without having to re-download the resource for the next access. Webkit has long supported memoryCache. Currently, Webkit resources are divided into two types: main resources, such as HTML pages or download items, and derived resources, such as embedded images or script links in HTML pages, which correspond to two classes in the code: MainResourceLoader and SubresourceLoader. Webkit supports memoryCache, but only for derived resources, corresponding to the CachedResource class, which holds raw data (CSS, JS, etc.) as well as decoded image data.Copy the code
  • disk cache
DiskCache, as its name implies, caches resources to disks. The DiskCache directly obtains resources from disks without re-downloading them for next access. Its direct operation object is CurlCacheManager.Copy the code

Access cache priority

  1. First look in memory, if there is, directly load.
  2. If it is not present in memory, it looks in hard disk, if it is loaded directly.
  3. If not, make a network request.
  4. The requested resource is cached to hard disk and memory.

Classification of browser caches

  • Strong cache
  • Negotiate the cache

It should be noted that the browser determines whether a strong cache is hit

Advantages of browser caching

  1. Reduce redundant data transmission and save network costs
  2. Reduce the server burden, greatly improve the performance of the website
  3. Accelerated client loading web page speed

When the browser requests again after the first request:

  1. Verify that a strong cache is hit, and if so, use the cache directly.
  2. If the strong cache is not hit, a request is sent to the server to check for a hit to the negotiation cache.
  3. If the negotiated cache is hit, the server returns 304 telling the browser to use the local cache.
  4. Otherwise, return the latest resource.

Strong cache

Strong caching is controlled using the Expires or cache-Control fields in the HTTP return header to indicate how long a resource is cached.

Expires: This field, which was the http1.0 specification, is a time string in the GMT format of an absolute time, such as Expires:Mon,18 Oct 2066 23:59:59 GMT. This time represents the expiration time of the resource before it hits the cache

Disadvantages:

  1. Since the outage time is an absolute time, a large time difference between the server and the client will result in cache clutter

Cache-control: Cache-control is the header information presented in HTTP1.1. It is a relative time, for example, cache-Control :max-age=3600, indicating that the validity period of the resource is 3600 seconds. Cache-control In addition to this field, there are several common Settings:

  • No-cache: no local cache is used. Cache negotiation is required to verify with the server whether the returned response has been changed. If there is an ETag in the previous response, the request will be verified with the server. If the resource has not been changed, the re-download can be avoided.
  • No-store: directly forbids the browser to cache data. Each time the user requests the resource, a request will be sent to the server, and the complete resource will be downloaded each time.
  • Public: can be cached by all users, including end users and intermediate proxy servers such as CDN.
  • Private: the device can be cached only by the browser of the terminal user and cannot be cached by a trunk cache server such as the CDN.

Cache-control and Expires can be enabled at the same time in the server configuration, with priority cache-Control > Expires enabled

Negotiate the cache

When a strong cache is not hit, the browser sends a request to the server, which determines whether the cache is hit based on the partial information in the header. If it hits, 304 is returned, telling the browser that the resource is not updated and that the local cache is available.

Header: 'last-modify/if-modify-since' and 'ETag/ if-none-match'Copy the code

Last-modify/if-modify-since: When the browser requests a resource for the first time, last-modify is added to the header returned by the server. Last-modify indicates the time when the resource was Last modified. When the browser requests the resource again, the request header contains if-modify-since, which is the last-modify returned before the cache. After receiving if-modify-since, the server determines whether the resource matches the cache based on the last modification time. If the cache is hit, 304 is returned, the resource content is not returned, and last-modify is not returned.

Disadvantages:

  1. Resources have changed over a short period of time.Last-ModifiedIt doesn’t change.
  2. Periodic variationIf the resource is changed back to its original state within a period of time, we think we can use the cache, butLast-ModifiedI don’t think so, so there it isETag

ETag/ if-none-match Unlike last-modify/if-modify-since, ETag/ if-none-match returns a check code. ETag ensures that each resource is unique, and changes in resources lead to changes in ETag. The server determines whether the cache is hit based on the if-none-match value sent by the browser. Unlike last-Modified, when the server returns a 304 Not Modified response, the response header returns the ETag because it has been regenerated, even though the ETag is unchanged.

Last-modified and ETag can be used together. The server will verify the ETag first. If the ETag is consistent, the server will continue to compare last-Modified, and finally decide whether to return 304.

The practice test

I hate verbal memorization, so I chose science and engineering without hesitation

⚠️ Practice console do not disable caching

Start the server service using koA port: 8000

Introduce static resource loading front-end template to Inner Mongolia aerial shot hahaha have me

cache
1.jpeg

Implementing strong caching

  1. The server sets the validity period of the cache-control resource in the response header to 300 seconds
app.use(async (ctx, next) => {
  ctx.set({
    'Cache-Control': 'max-age=300'  
  });
  await next();
});
Copy the code
  1. Refresh the page

Cache-Control

Verify the priority of the access cache: on the first network request, the browser caches the image resource to disk and memory. By convention, the resource should be retrieved from memory first

  1. Refresh the page again

It does get it from memory

4. Close the page and open it again (the memory is in the process, so close the page, the memory resources are released, the disk resources are permanent, so they still exist)

From Disk Cache Obtains resources from disks

5. The next period of validity is 300 seconds.

Implement negotiated cache Negotiated cache local tests directly intercept the URL given code

Cache-control The default value is no-cache

App. use(async(CTX, next) => {// Negotiate a cache testif(ctx.url === '/imgs/1.jpeg'){
  ctx.status = 304;
  return;
}
await next();
});
Copy the code

The server returns 304 and the size is much smaller because only the necessary information is returned

There are plug-ins available to help us calculate the ETag of a file

npm install koa-tag -D
npm install koa-conditional-get -D
Copy the code

I won’t show you the details

Tests show that when the loaded resource changes (such as changing an image), the ETag changes and the negotiated cache policy becomes invalid


Write the last words

Day day up!