一、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

前端内容缓存技术：CSI,SSI,ESI的更多相关文章

  1. 动态缓存技术之CSI,SSI,ESI

    平常我们谈到网络缓存技术,大多是以页面为单位的,比如,新闻网站中将执行后的结果,缓存为一个静态html文件,下次访问时就直接访问这个静态页面了! 减轻了服务器压力!但是,如果一个页面大部分是可静态的, ...

  2. 动态内容的缓存技术：CSI vs SSI vs ESI

    CDN 中动态内容是不太好解决的,通常需要很麻烦的技术和方法来实现这些功能,比如我设计过一种动态缓存的方法,基于 session 栏接,然后根据热点来做动态缓存时间的控制.目前开放的实现 Cache ...

  3. CDN技术之--内容缓存工作原理

    有CDN前的网站服务技术–硬件扩展:高成本,灵活性和可扩展性比较差–镜像技术(mirroring):镜像服务器安装有一个可以进行自动远程备份的软件,每隔一定时间,各个镜像服务器就会到网站的源服务器上去 ...

  4. ESI 动态缓存技术

    任何一个Web网站的内容都是在不断更新和变化,但这并不意味这这个网站的内容就是动态内容,事实上,动态的内容是指用户每次点击 相同的链接时取的的内容是由Web服务器应用程序生成的,如常见得ASP,JSP ...

  5. ESI 动态缓存技术[转载]

    任何一个Web网站的内容都是在不断更新和变化,但这并不意味这这个网站的内容就是动态内容,事实上,动态的内容是指用户每次点击 相同的链接时取的的内容是由Web服务器应用程序生成的,如常见得ASP,JSP ...

  6. Web项目开发中用到的缓存技术

    在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...

  7. 网站缓存技术总结（ ehcache、memcache、redis对比）

    网站技术高速发展的今天,缓存技术已经成为大型网站的一个关键技术,缓存设计好坏直接关系的一个网站访问的速度,以及购置服务器的数量,甚至影响到用户的体验. 网站缓存按照存放的地点不同,可以分为客户端缓存. ...

  8. ASP.NET Core 缓存技术 及 Nginx 缓存配置

    前言 在Asp.Net Core Nginx部署一文中,主要是讲述的如何利用Nginx来实现应用程序的部署,使用Nginx来部署主要有两大好处,第一是利用Nginx的负载均衡功能,第二是使用Nginx ...

  9. PHP中9大缓存技术总结

    1.全页面静态化缓存 也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms: 一种比较常用的实现方 ...

随机推荐

  1. android133 360 06 一键锁频，清楚数据

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  2. 学习笔记之#pragma

    http://baike.baidu.com/link?url=lxA9Wl1KnacWUDZYz5U06iKMkUAeI6dr0x1wQ4i-rqf6Dpk6hEeOOaj2XhvGx9VLVm2z ...

  3. Socket之UDP分包组包

    一般传输大的文件和信息的时候需要涉及到分包和组包,方法有很多,下面一种是借鉴了别人的思路,供大家参考哈 分包 1.取出需要传输的文件和字符的长度和大小放入缓存区里面: 2.设定固定传输的长度,用需要传 ...

  4. JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  5. 深入理解Binder(一)，从AIDL谈起

    打算写一篇Binder介绍的文章,仔细想想一篇文章貌似很难厘清,于是我打算从AIDL入手,本篇先来简单介绍下AIDL的使用,然后在此基础上我们继续来研究Binder的工作原理.小伙伴们都知道,AIDL ...

  6. Android 断点续传

    断点续传指的是在下载或上传时,将下载或上传任务(一个文件或一个压缩包)人为的划分为几个部分,每一个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传下载未完成的部 ...

  7. iOS应用程序安全

    iOS应用程序安全http://pan.baidu.com/s/1hqDnmXe

  8. Java基本排序

    长度为N的数组升序排序 一,冒泡排序 public class BubbleSort { private double[] data; public BubbleSort(double[] data) ...

  9. Jquery选择器，操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  10. HTTP层 —— 路由

    1.基本路由 最基本的 Laravel 路由只接收一个 URI 和一个闭包,并以此提供一个非常简单且优雅的定义路由方法: Route::get('foo', function () { return ...