What is Cache
Cache is an example of a space for time everywhere present. By using extra space, we were able to get faster.
We usually say that the sense cache consists mainly of two parts. The first is the user's browser cache, and the second is the server in order to improve access speed plus the CDN.
First, take a look at the site is not the absence of access CDN, the user's browser and the server how to interact:
When users visit the Web site, the browser can save a copy in a local website pictures or other files, so users visit the site again, the browser will not have to download all files, reducing the amount of means to improve the download page loading speed.
If the middle with a layer of CDN, then the interactive user's browser and the server are as follows:
Client browser to check the local cache has expired, if expired, then the edge node initiates a request to the CDN, the CDN edge cache node detects a user request for data has expired, and if not expired, the direct response to user requests, a case Finish to complete the http request; if the data has expired, the CDN also need to send a request back to the source (back to the source request) to the source station to pull the latest data. A typical CDN topology is as follows:
It can be seen in the presence of CDN scenario, the data is subjected to a client (browser) caching and CDN edge cache node two stages, respectively, below the two-stage cache detailed analysis.
The client (browser) caching
Client-side caching shortcomings
Client-side caching reduces server requests, to avoid duplicate file loading, significantly improving the user place. But when the site took place during updates (such as replacing the css, js and image files), local browser still holds the old version of the file, leading to unpredictable consequences.
曾几何时，一个页面加载出来，页面各元素位置乱飘，按钮点击失效，前端GG都会习惯性地问一句：“缓存清了没？”，然后Ctrl+F5 ，Everything is OK。但有些时候，如果我们是简单地在浏览器地址栏中敲一个回车，或者是仅仅按F5刷新，问题依然没有解决，你可知道这三种不同的操作方式，决定浏览器不同的刷新缓存策略？
浏览器如何来确定使用本地文件还是使用服务器上的新文件？下面来介绍几种判断的方法。
浏览器缓存策略
Expires
Expires:Sat, 24 Jan 2015 20:30:54 GMT
如果http响应报文中设置了Expires，在Expires过期之前，我们就避免了和服务器之间的连接。此时，浏览器无需想浏览器发出请求，只需要自己判断手中的材料是否过期就可以了，完全不需要增加服务器的负担。
Cache-control: max-age
Expires的方法很好，但是我们每次都得算一个精确的时间。max-age 标签可以让我们更加容易的处理过期时间。我们只需要说，这份资料你只能用一个星期就可以了。
Max-age 使用秒来计量，如：
Cache-Control:max-age=645672
指定页面645672秒（7.47天）后过期。
Last-Modified
服务器为了通知浏览器当前文件的版本，会发送一个上次修改时间的标签，例如：
Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT
这样浏览器就知道他收到的这个文件创建时间，在后续的请求中，浏览器会按照下面的规则进行验证：
1. 浏览器：Hey，我需要jquery.min.js这个文件，如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改过的，请发给我。
2. 服务器：（检查文件的修改时间）
3. 服务器：Hey，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。
4. 浏览器：太好了，那我就显示给用户了。
在这种情况下，服务器仅仅返回了一个304的响应头，减少了响应的数据量，提高了响应的速度。关于304响应，请参考：
下图是按F5刷新页面后，页面返回304响应头。
ETag
通常情况下，通过修改时间来比较文件是可行的。但是在一些特殊情况，例如服务器的时钟发生了错误，服务器时钟进行修改，夏时制DST到来后服务器时间没有及时更新，这些都会引起通过修改时间比较文件版本的问题。
ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指纹，每个文件都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。
服务器返回ETag标签：
ETag:"39001d-1762a-50bf790757e00"
接下来的访问顺序如下所示：
1. 浏览器：Hey，我需要jquery.min.js这个文件，有没有不匹配"39001d-1762a-50bf790757e00"这个串的
2. 服务器：（检查ETag…）
3. 服务器：Hey，我这里的版本也是"39001d-1762a-50bf790757e00"，你已经是最新的版本了
4. 浏览器：好，那就可以使用本地缓存了
如同 Last-modified 一样，ETag 解决了文件版本比较的问题。只不过 ETag 的级别比 Last-Modified 高一些。同样，服务器仅仅返回了一个304的响应头。
额外的标签
缓存标签永远不会停止工作，但是有时候我们需要对已经缓存的内容进行一些控制。
l Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别。
l Cache-control: private 意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存。
l Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发生变化。
浏览器缓存刷新
1. 在地址栏中输入网址后按回车或点击转到按钮
浏览器以最少的请求来获取网页的数据，浏览器会对所有没有过期的内容直接使用本地缓存，从而减少了对浏览器的请求。所以，Expires，max-age标记只对这种方式有效。
2. 按F5或浏览器刷新按钮
浏览器会在请求中附加必要的缓存协商，但不允许浏览器直接使用本地缓存，它能够让 Last-Modified、ETag发挥效果，但是对Expires无效。
3. 按Ctrl+F5或按Ctrl并点击刷新按钮
这种方式就是强制刷新，总会发起一个全新的请求，不使用任何缓存。
CDN是什么
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
CDN可以理解为一个普通缓存，如代理缓存或者说边缘缓存，即便不关心用户的具体地理位置，也应该考虑使用cdn的代理缓存来提高用户体验。
CDN的作用
可以用8年买火车票的经历来形象比喻：
8年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而我所住的小县城并不通火车，火车票都要去市里的火车站购买，而从县城到市里，来回就是4个小时车程，简直就是浪费生命。后来就好了，小县城里出现了火车票代售点，可以直接在代售点购买火车，方便了不少，全市人民再也不用在一个点苦逼的排队买票了。
CDN就可以理解为分布在每个县城的火车票代售点，用户在浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求，这样海南移动用户的请求就不会千里迢迢跑到北京电信机房的服务器（假设源站部署在北京电信机房）上了。
CDN的优势
很明显：
（1）CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；
（2）大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。
CDN的缺点
当网站更新时，如果CDN节点上数据没有及时更新，即便用户再浏览器使用Ctrl +F5的方式使浏览器端的缓存失效，也会因为CDN边缘节点没有同步最新数据而导致用户访问异常。
CDN缓存策略
CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。
当客户端向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向源站发出回源请求，从源站拉取最新数据，更新本地缓存，并将最新数据返回给客户端。
CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。
CDN caching time would be "back to the source of" a direct impact. If the CDN caching short time, the data on the CDN edge nodes will often fail, resulting in frequent back to the source, it increases the load on the source station, but also increases the access latency; CDN cache if time is too long, will bring data update time is slow. Developers need to increase business for a particular, specific data cache to do time management.
CDN cache refresh
CDN edge node is transparent to the developer, compared to the browser Ctrl + F5 to force a refresh of the local browser cache invalidation, developers can provide through the CDN service provider "Refresh cache" clean up the interface to achieve the CDN edge cache node the goal of. So developers after updating the data, you can use the "Refresh cache" function to force the data cache on the CDN node expired, ensure that the client at the time of the visit, pulled to the latest data.