preface

Before we get familiar with browser caches, let’s talk about DNS and CDN caches. Although these are not part of the browser cache, they can also affect front-end development and problem location to some extent, and if you don’t understand them properly, you can be a little confused when problems occur. For example, the js file on the server side is updated, but the client desperately refreshes it, even though the cache is forcibly cleared and refreshed again, the file content remains unchanged. This problem is most likely caused by middlemen – CDN is not updated.

DNS cache

The process of obtaining an IP address from a domain name is called domain name resolution. Where there is parsing, there is caching. From the client’s point of view, it can be divided into four areas, which is also a process of DNS query:

  • 1, the browser query their ownDNS cacheIf yes, the IP address corresponding to the domain name is returned.
  • 2. Search for the current operating systemhostIf a mapping exists in the file, the corresponding IP address is returned after parsing.
  • 3. Search for the localThe DNS serverIf no, continue.
  • 4. Send a request to the root server to find the IP address relationship corresponding to the domain name.

After all, the front end does almost nothing for THE DNS cache.

CDN cache

What is a CDN? It’s essentially a proxy. For example, when a multinational company opens business in China, the domestic salesman must contact foreigners every time he reports his work. This must have passed for a few days, and the efficiency is so low. At this time, if multinational companies set up a greater China region in China, they only need to contact the domestic responsible person every time they report their work. The president of greater China can be understood as an agent, which is equivalent to foreigners in the eyes of domestic salesmen. In fact, the simple understanding is that CDN is equivalent to a copy of the server, the content is equivalent to the content on the root server, but closer to the user, which can not only save the network request time, but also reduce the pressure on the root server. Such advantages are certainly very good, but there are always two sides, there may be a server to update the file but CDN does not update the situation, so that users will still access expired resources when accessing.

How to solveCDNUpdate question?

  • 1. Refresh actively. General CDN operators, will provide a background, take the initiative to refresh the file content. Is to makeIn the middleThe server actively pulls updates from the root server.
  • 2, modify,query stringValue. For example, if you update an image, add one to the image URL? v=123, this time equivalent to the middle server has no cache, need to re-pull the root server image.

The loading sequence of the cache is generally to search for the memory first, if not, from the hard disk, if not, from the network level.

Strong cache

Instead of sending a request to the server, the resource file is loaded from the local cache each time. So how do you tell whether a file is requested from the network or local? From the network column of Chrome developer tools, you can see the following picture. The Size comes from three situations:

  • 1. If the display is similar12kB“, which means obtained from the network request;
  • 2. If displayedmemory cacheIs obtained from memory;
  • 3. If displayeddisk cacheRepresents a resource loaded from the disk cache.

So when does a strong cache hit? In HTTP/1.1, the Response Headers header for a request resource has such a fieldcache-control, suppose the value ismax-age=600“Indicates that if the server requests the resource again within 10 minutes after the request, the server does not need to load the resource from the server. In this case, a strong cache is hit.cache-controlThere can be multiple values, with different values representing different meanings:

  • 1.publicIndicates that the corresponding object can be cached by any object (client, CDN intermediary agent, etc.), even the content that is not normally cached;
  • 2,privateOnly clients (e.g., browsers) can cache (cache-control default);
  • 3,no-cacheIt can be cached (not to be misunderstood), but the server needs to negotiate whether the cache can be used, as discussed later in “negotiating cache”.
  • 4,no-storeTell the browser not to cache, each time to pull from the server;
  • 5,max-ageRepresents the number of seconds in which the cache will disappear, and is a relative time;
  • 6,s-maxageIndicates the validity period of the intermediate agent cache file, for examplecdnResources on the root server need to be pulled again after this time.

At present common also above 6 kinds of circumstances, other temporary do not need to remember, and so on need time to query again.

One special note: the Http1-era Expires field returns an absolute time before the strong cache will be hit and after that the resource cache will be invalid. However, this approach has a major disadvantage because it is absolute time, which can cause confusion when the server time and the client time differ greatly. And is basically no longer used, so as long as you know.

Negotiate the cache

Negotiated cache is when the strong cache fails, the browser sends a request to the server again with some identifier, and the server decides whether to continue to use the cached content or to pull new resources. Some of the signs here refer mainly to these two pairs of keywords:

  • 1.ETagandIf-None-Match
  • 2,Last-ModifiedandIf-Modified-Since

ETag and last-Modified are the headers returned when a resource is requested, representing the unique identifier of the resource and the Last modification time of the file, respectively. Both values change when the requested resource changes. When a strong cache is not hit, the browser returns both values as if-none-match and if-modified-since as one of the first requests to the server. The server compares the ETag value received with the ETag value of the current file. If the ETag value is different from the ETag value of the current file, the browser returns the 200 status code and returns the latest file and identifier to the client. If the ETag values are the same, the last modification time is compared. If the ETag values are the same, the files are not updated. If the status code 304 is returned, the files are not updated.