In front-end development, performance has always been a point that everyone pays attention to. However, the most intuitive way to judge the performance of a website is to look at the speed at which the webpage is opened. One of the ways to improve the responsiveness of web pages is to use caching. An excellent caching strategy can shorten the distance that web pages request resources, reduce latency, and because cached files can be reused, it can also reduce bandwidth and network load. So let's take a look at the principle of server-side caching.

Cache classification

There are many types of web caching, such as database caching, proxy server caching, and the familiar CDN caching, and browser caching. I actually refused to read too much text, so I drew a picture to explain it.

The principle of the browser initiating a request to the origin server through the proxy server is as follows:

The browser first initiates a web request to the proxy server, and then forwards the request to the origin server. It is a shared cache, so many places can use its cache resources, so it has a great effect on saving traffic.

The browser cache is to save the file on the client side. During the same session, it will check whether the cached copy is fresh enough. When rewinding the web page, the visited resources can be taken out of the browser cache for use. Users will have a faster experience by reducing the number of requests the server processes

Now I will focus on the legendary browser cache.

browser cache

The cache status of the page is determined by the header. There are four parameters of the header:

1. Cache-Control :

1. max-age (unit is s) specifies the maximum valid time for setting the cache, which defines the length of time. After the browser sends a request to the server, the browser will not send any more requests to the server during the max-age period.

Let's look for a resource. For example, for CSS resources on shang.qq.com, max-age=2592000, which means that the cache validity period is 2592000 seconds (that is, 30 days). Therefore, this version of the resource will be used for 30 days, and the browser will not be notified even if the resource on the server changes. max-age overrides Expires, which will be discussed later.

2、s-maxage（单位为s）同max-age，只用于共享缓存（比如CDN缓存）。

比如，当s-maxage=60时，在这60秒中，即使更新了CDN的内容，浏览器也不会进行请求。也就是说max-age用于普通缓存，而s-maxage用于代理缓存。如果存在s-maxage，则会覆盖掉max-age和Expires header。

3、public 指定响应会被缓存，并且在多用户间共享。也就是下图的意思。如果没有指定public还是private，则默认为public。

4、private 响应只作为私有的缓存（见下图），不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。

5、no-cache 指定不缓存响应，表明资源不进行缓存，比如，

但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。

6、no-store 绝对禁止缓存，一看就知道如果用了这个命令当然就是不会进行缓存啦～每次请求资源都要从服务器重新获取。

7、must-revalidate指定如果页面是过期的，则去服务器进行获取。这个指令并不常用，就不做过多的讨论了。

二、Expires

缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。但在上面我们提到过，cache-control的优先级更高。 Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

三、Last-modified

服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问Last-Modified时间点之后资源是否被修改过。如果没有修改，则返回码为304，使用缓存；如果修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。

如下图，最后修改时间为2014年12月19日星期五2点50分47秒