前端内容缓存技术: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

时间: 2024-12-31 06:34:40

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

动态内容缓存技术 CSI,SSI,ESI介绍

1.CSI方案 CSI (Client Side Includes) 通过iframe.javascript.ajax 等方式将另外一个页面的内容动态包含进来. 2.SSI方案 SSI (Server Side Includes) Server Side Includes (SSI) is a simple interpreted server-side scripting language used almost exclusively for the Web. 在HTML文件中,可以通过注释

动态缓存技术之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> 优点:相对比较简单,

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

有CDN前的网站服务技术–硬件扩展:高成本,灵活性和可扩展性比较差–镜像技术(mirroring):镜像服务器安装有一个可以进行自动远程备份的软件,每隔一定时间,各个镜像服务器就会到网站的源服务器上去获取最新的内容–缓存技术(caching):缓存代理缓存被访问过的内容,后续的相同内容访问直接通过缓存代理获得服务–CDN:是缓存技术的基础上发展起来的,是缓存的分布式集群实现 从技术层面看,Web架构的精华有三处:–超文本技术HTML实现信息与信息的连接:–统一资源标志符URI实现全球信息的精确定

ESI 动态缓存技术

任何一个Web网站的内容都是在不断更新和变化,但这并不意味这这个网站的内容就是动态内容,事实上,动态的内容是指用户每次点击 相同的链接时取的的内容是由Web服务器应用程序生成的,如常见得ASP,JSP等,与此相对应,静态内容一般就是指由文本.图像和多媒体组成,在用户每 次单击相应链接时基本保持不变.现在解决动态内容缓存的最新技术就是通过ESI技术来设计网站的内容. ESI技术工作原理 动态生成的内容能为用户带来丰富精彩的页面,网站开发者也可以更容易和更灵活地控制相关的内容,但在享受这些便利的同时

前端缓存技术一:使用ETags减少Web应用带宽和负载

介绍 最近,大众对于REST风格应用架构表现出强烈兴趣,这表明Web的优雅设计开始受到人们的注意.现在,我们逐渐理解了"3W架构(Architecture of the World Wide Web)"内在所蕴含的可伸缩性和弹性,并进一步探索运用其范式的方法.本文中,我们将探究一个可被Web开发者利用的.鲜为人知的工具,不引人注意的"ETag响应头(ETag Response Header)",以及如何将它集成进基于Spring和Hibernate的动态Web应用,

PHP缓存技术

全页面静态化缓存也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms:一种比较常用的实现方式是用输出缓存:Ob1.全页面静态化缓存也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms:一种比较常用的实现方式是用输出缓存:Ob_start()******要运行的代码*******$content

php缓存技术总结

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

PHP中9大缓存技术总结

1.全页面静态化缓存 也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms: 一种比较常用的实现方式是用输出缓存: Ob_start() ******要运行的代码******* $content = Ob_get_contents(); ****将缓存内容写入html文件***** Ob_end_clean(); 2.页面部分缓存 该种方式,是将一个页面中不经常变的部分进行静态缓存,而经常变化的

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

前言 在Asp.Net Core Nginx部署一文中,主要是讲述的如何利用Nginx来实现应用程序的部署,使用Nginx来部署主要有两大好处,第一是利用Nginx的负载均衡功能,第二是使用Nginx的反向代理来降低我们后端应用程序的压力.那除了以上两点之外,其实我们还可以利用代理服务器的缓存功能来进一步的降低后端应用程序的压力,提升系统的吞吐量(tps).这一篇就来看一下具体应该如何去做吧. 目录 WEB 缓存 ASP.NET Core 缓存 内存缓存 分布式缓存 Response 缓存 Ng