前言

记得几年前去面试一家公司，面试官问到你们的电商网站采用什么页面缓存，当时我们采用的是Akamai的CDN缓存技术，由于是国际电商网站，所以采用了国际CDN缓存服务商，然而面试官接着问如果自主实现页面缓存应该怎么做？年轻的我就这样无奈的摇了摇头。

页面缓存类别

浏览器缓存 -> 第二次访问才有效的页面缓存
CDN缓存 -> 通过CDN技术访问最优的页面缓存，提高页面访问响应时间

浏览器缓存

Paste_Image.png

Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别（浏览器，cdn都能缓存）。
Cache-control: private 意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存（只能用户的浏览器缓存）。
Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发生变化。
max-age : 让我们更加容易的处理过期时间。我们只需要说，这份资料你只能用一个星期就可以了。Max-age 使用秒来计量，如：Cache-Control:max-age=645672指定页面645672秒(7.47天)后过期。
Last-Modified: 服务器为了通知浏览器当前文件的版本

CDN缓存

无CDN：

用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。

有CDN：

如果中间加上一层CDN，那么用户浏览器与服务器的交互如下：
客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束;如果数据已经过期，那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。

动态页面缓存

动态页面一般不用缓存整体页面，不然就是整体HTML，所以局部静态页面缓存技术就出现。

CSI(Client Side Includes)

含义：通过iframe、javascript、ajax等方式将另外一个页面的内容动态包含进来。
原理：整个页面依然可以静态化为html页面，不过在需要动态的地方则通过iframe,javascript或ajax来动态加载
例子：<iframe src='http://abroad.e2bo.com/index.php' border='0'></iframe>
优点：相对比较简单，不需要服务器端做改变和配置；
缺点：不利于搜索引擎优化(iframe方式), javascript兼容性问题，以及客户端缓存问题可能导致更新后不能及时生效，对于客户体验也不够好。

SSI(Server Side Includes)######

含义：通过注释行SSI命令加载不同模块，构建为html，实现整个网站的内容更新；原理：通过SSI调用各模块的对应文件，最后组装为html页面，需要服务器模块支持(具体配置本文不做详述)，比如：apache服务器需要开启mod_include模块。
例子： Html代码

优点：不受具体语言限制，比较通用，只需要Web服务器或应用服务器支持即可，Ngnix、Apache、IIS等对此都有较好的支持。缺点：SSI只能在当前服务器上包含加载，不能够直接包含其他服务器上的文件，即不能跨域包含； NGINX的SSI用法 http://wiki.nginx.org/HttpSsiModuleChs

ESI(Edge Side Includes)######

含义及原理：通过使用简单的标记语言来对那些可以加速和不能加速的网页中的内容片断进行描述，每个网页都被划分成不同的小部分分别赋予不同的缓存控制策略，使Cache服务器可以根据这些策略在将完整的网页发送给用户之前将不同的小部分动态地组合在一起。通过这种控制，可以有效地减少从服务器抓取整个页面的次数，而只用从原服务器中提取少量的不能缓存的片断，因此可以有效降低原服务器的负载，同时提高用户访问的响应时间。与SSI不同的是，ESI多在缓存服务器或代理服务器上执行！
优点：可用于缓存整个页面或页面片段，比较适合用于缓存服务器上。
缺点：目前支持ESI的软件还比较少，官方更新也略显缓慢，因此使用不是很广。
例子：Html代码
<pre><code><html>
<head><title>ESI Demo</title></head>
<body>
<esi:include src="login.php" max-tag="45"/>
</body>
</html></code>
</pre>
目前Squid 3.0版本对ESI的支持，ESI必须由web端在response-header中声明Surrogate-Control: content="ESI/1.0"。启用ESI后，Set-Cookie、Cache-Control、Last-Modified无效。