前端内容缓存技术：CSI,SSI,ESI
一、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模块；
例子：
<!--#include virtual="header.html" -->
<!--#include virtual="login.html" -->
<!--#include virtual="footer.html" -->
优点：不受具体语言限制，比较通用，只需要Web服务器或应用服务器支持即可，Ngnix、Apache、IIS等对此都有较好的支持。
缺点：SSI只能在当前服务器上包含加载，不能够直接包含其他服务器上的文件，即不能跨域包含；
三、ESI（Edge Side Includes）
含义及原理：
网上通用的解释如下：通过使用简单的标记语言来对那些可以加速和不能加速的网页中的内容片断进行描述，每个网页都被划分成不同的小部分分别赋予不同的缓存控制 策略，使Cache服务器可以根据这些策略在将完整的网页发送给用户之前将不同的小部分动态地组合在一起。通过这种控制，可以有效地减少从服务器抓取整个页面的次数，而只用从原服务器中提取少量的不能缓存的片断，因此可以有效降低原服务器的负载，同时提高用户访问的响应时间。与SSI不同的是，ESI多在缓存服务器或代理服务器上执行！
例子：
<html>
<head>
<title>ESI Demo</title>
</head>
<body>
<esi:include src="login.php" />
<div>
<h3>这中间是可静态化html内容</3>
</div>
</body>
<html>
优点：可用于缓存整个页面或页面片段，比较适合用于缓存服务器上；
缺点：目前支持ESI的软件还比较少，官方更新也略显缓慢，因此使用不是很广！
结语，该文章仅仅是总结三个可用于动态内容缓存的方案，具体在项目中用不用，用哪个，那就需要具体情况具体分析了！
转自：http://hi.baidu.com/huangmeimei86/item/5fff363ddb51fdf6df222152