（HTML） 与cache-control相关的客户端-服务器缓存机制

这是一篇面对HTML初学者的文章，旨在帮助新手对客户端-服务器之间的缓存机制有一定的了解，以便于学习相关内容。

首先，我们要清楚cache-control和客户端-服务器的基本概念

1.cache-control

cache-control属于http-equiv属性，其作用是规定HTTP的缓存机制，其实就是客户端-服务器模式缓存机制,举例:
<meta http-equiv="cache-control" content"no-cache">
其含义为规定客户端-服务器缓存机制为no-cache
主要的几种content为：
1.no-cache:先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
2.no-store:不允许缓存，每次都要去服务器上，下载完整的响应。
3.public:缓存所有的响应（提高了响应速度，但是对存储空间的利用率很低）
4.private:只为单个用户缓存，不允许任何中继进行缓存(比如CDN（分发网络）就不能缓存这种规定下的响应)
5.max-age: 表示当前请求开始，该响应在多久内能被缓存和重用。例如：max-age=60表示响应可以再缓存和重用 60 秒。

如果现在不能理解这些content的含义，没关系，等看完客户端-服务器模式缓存机制的机制再回来看

2.客户端-服务器

客户端
为客户提供本地服务的程序，目前常用的客户端包括浏览器，电子邮件客户端，通讯软件等等（对于HTML而言就是浏览器），是发出请求的一端（比如进入某一链接，文件下载）

服务器
与客户端相对应，为客户端提供计算服务，并响应客户端发出的请求

了解了基本概念后，下面介绍客户端-服务器缓存机制

3.客户端-服务器的缓存机制

首先通过一个简单的例子来描述缓存的意义：
刚搬到一个新家，你对周围很是陌生，这时家里盐用完了，妈妈让你去超市买一包盐。此时你的妈妈就是客户端，发出了一个内容为“买一包盐”的请求，而你则为服务器，在接收到请求后，要做出响应来回应你的妈妈。此时你不清楚路线，所有你不停的问路人该怎么走，费了不少功夫，但是当你找到超市后，这条路线就会被你记下，以便于下次再来超市，这时你的大脑就对如何响应“买一包盐”的请求进行了缓存。
但是如果你的大脑对所有的请求进行缓存，你就会发现虽然你办事效率高了，但是你大脑会超负荷，你就会活得很累。所以你对不同的请求需要有不同的规定，灵活的应用这个规定来让你的办事效率提高，同时也不会让大脑太累，这个规定就是cache-control

对于浏览器而言：

用户首次在浏览器中提取资源时，浏览器作为客户端会向服务器发出请求，服务器在通过计算后生成验证令牌ETag:“x234dff”，返回一个1024字节的响应并根据cache-control的内容来判断缓存的机制，图中为将响应保留120s。

当用户过段时间又发出了新的请求时，客户端会自动在"if-no-match"HTTP请求标头内生成一个ETag令牌“x234dff”，若两个ETag令牌相同则返回"304 Not Modified"响应，告知浏览器响应未发生变化，无需重新下载响应,在图中的cache-control规定下，该响应会被延用120s，节约了时间和带宽
（若想详细了解ETag工作原理，可参考：HTTP参数中Etag的重要性）

4.安全性相关

合理的网页设计应当将网页的安全性作为第一考虑事项，这就要求在设计网页时对不同的信息需要有不同的缓存策略，即不同的cache-control，比如对于银行转账网页而言，用户会输入自己的银行卡号和密码，如果浏览器缓存了这类私人的数据，那么用户就没有隐私和安全可言，这时设置cache-control为private（如果是私人电脑）或no-store(不缓存)。
总之设计员应当权衡利弊，在合理的范围内使用缓存，以达到提高浏览器运行速度的目的。

*本文主要参考文献
1.HTTP缓存（需要翻墙）
2.HTML meta标签总结与属性使用介绍