页面引入(include)方式的研究及性能比较
1、 应用Html中的框架(iframe)
目前大多数门户网站都应用iframe来进行页面上广告的投放,就是将不同的广告分别应用iframe投放到主页面上,优点是效率高,互不影响,缺点是不符合网页标准的发展趋势,页面互不关联,不适合技术和表现方式的统一部署(例如CSS/JS等)
<iframe src="index.htm"></iframe>
2、 SSI技术
这是在服务端应用页面包含技术、具有程序语言的特性,但是SSI是为WEB服务器提供的一套命令,因此优于asp、php等程序语言,目前普遍应用于大型门户网站,例如新浪,腾讯等,优点是维护方便,且适合网站技术的统一部署,符合网页标准。
SSI中Include命令具有两个不同的参数:
Virtual:给出到服务器端某个文档的虚拟路径。例如:
<!--#include virtual="/includes/header.html" -->
File:给出到当前目录的相对路径,其中不能使用"../",也不能使用绝对路径。例如:
<!--#include file="header.html" -->
3、 Javascript包含技术
利用JS的调用特性封装Html代码,缺点是代码需要客户端二次解析,增加代码的容量且每次更新需要重新写JS代码,另外需要注意的是include.js里不能再包含<script>和</script>,扩展名随意,所有内容必须经由 write()、wirteln()、innerHTML、innerText、outerHTML或outerText 输出显示。代码示例:
<script src="include.js"></script>
4、 用 download 行为下载后再用 innerHTML 特性显示出来
方法:
在主页面需要引入包含页面的地方写上以下代码:
<span id="demo" src="demo.htm" style="behavior:url(#default#download)"></span>
<SCRIPT>
function window.onload(){
demo.startDownload(demo.src,fnDownload) //改用document.getElementById
}
function fnDownload(oSource){
demo.innerHTML=oSource
}
</SCRIPT>
缺点:兼容性不好
5、 Object(Scriptlets组件)。代码示例:
<object style="border: 0px" type="text/x-scriptlet" data="index.htm" width=400 Height=300></object>
6、 XMLHTTP组件。代码示例:
<script for="window" event="onload">
with(new ActiveXObject("Microsoft.XMLHTTP")){
open("get",demo.src,false,"","")
send()
demo.innerHTML=ResponseText
}
</script>
<span id="demo" src="demo.htm"></span>
需要注意,目标文件最好以Unicode或UTF-8编码保存,否则目标文件中的双字节文字会变成乱码。当然,可以用下面的函数把返回的ResponseText处理一下,但是这样效率比较低,文件较大时不推荐使用。XMLHTTP这种方法也可以在后台程序中使用。
<script language=vbscript>
function bytes2bstr(vin)
strreturn = ""
for i = 1 to lenb(vin)
thischarcode = ascb(midb(vin,i,1))
if thischarcode < &h80 then
strreturn = strreturn & chr(thischarcode)
else
nextcharcode = ascb(midb(vin,i+1,1))
strreturn = strreturn & chr(clng(thischarcode) * &h100 + cint(nextcharcode))
i = i + 1
end if
next
bytes2bstr = strreturn
end function
</script>
这也是Ajax技术应用的一种表现方式
7、 HTC(HTML Component)
(1)包含页代码。
<span style="behavior:url(index.htc)"></span>
(2)被包含页index.htc的代码。
<public:attach event="oncontentready" onevent="loadit()" />
<script>
function loadit(){
insertAdjacentHTML("afterBegin", include.innerHTML)
}
</script>
<xmp id="include">
被包含内容
<a href=http://www.163.com>163</a>
</xmp>
总结:实际应用中,大多数采用Iframe和SSI方式,但是目前AJAX技术被广泛应用,也是一种很不错的方法。
性能比较
参考一个页面,首先用Html语言编写一个完全的页面进行测试,然后将这个Html页面拆散为几个部分,用SSI的Include引入进行测试,并且用各种程序语言的包含指令进行测试比较,数据如下:
1、静态HTML页面KeepAlive
Requests per second: 1346.50 [#/sec]
2、静态HTML页面无KeepAlive
Requests per second: 916.03 [#/sec]
3、SSI
Requests per second: 507.10 [#/sec]
4、Perl写的普通FastCGI
Requests per second: 262.05 [#/sec]
5、PHP
Requests per second: 180.14 [#/sec]
页面引入(include)方式的研究及性能比较的更多相关文章
- CSS——三种页面引入方法
目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...
- html文件引入其它html文件的几种方法:include方式
可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下. 1.I ...
- 两种include方式及filter中的dispatcher解析
两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...
- CSS引入的方式有哪些? link和@import的区别是?转载
CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- 同一页面引入多个JS文件的编码问题
原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...
- CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入 link和@import的区别是 : ①link属于XHTML标签,除了加载CSS外,还能 用于定义RSS, 定义rel连接属性等作用:而@import是C ...
- jsp页面引入不了js路径没错
最近搞开发,发现有个jsp页面引入不了js:很是神奇,路径什么的都没问题,同事的浏览器可以加载该js,发现放到其他的文件夹下可以加载该js:当时没研究出来,任务紧就没研究了. 最近闲下来了,有去研究, ...
- script标签引入vue方式开发如何写组件
title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...
随机推荐
- python -ConfigParser模块讲解
configParser 模块用于操作配置文件 注:Parser汉译为“解析”之意. 配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键= ...
- (转)虚拟路由器冗余协议【原理篇】VRRP详解
原文:http://blog.51cto.com/zhaoyuqiang/1166840 为什么要使用VRRP技术 我们知道,为了实现不同子网之间的设备通信,需要配置路由.目前常用的指定路由方法有两种 ...
- Js正则Replace方法
JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)" ...
- Netflix Hystrix笔记
maven引入 <dependency> <groupId>com.netflix.hystrix</groupId> <artifactId>hyst ...
- MySQL使用全文索引(fulltext index)
1.创建全文索引(FullText index) 旧版的MySQL的全文索引只能用在MyISAM表格的char.varchar和text的字段上. 不过新版的MySQL5.6.24上InnoDB引擎也 ...
- Mac新手问题
[现象:]MAC下checkout代码时,报svn:E170013-unable to connect to a repository at url xxx, svn:E1700113: unable ...
- GridView 基本使用
项目中实例一 <asp:GridView ID="gvBatchReceive" runat="server" AutoGenerateColumns=& ...
- webHttpBinding
[ServiceContract] public interface IHanger { /// <summary> /// 根据请求的用户的所属的组织,决定工单发布到哪个吊挂产线 /// ...
- mysql主从复制测试
mysql主从复制测试: 1. 配置主服务器:在主库上面添加复制账号GRANT REPLICATION SLAVE on *.* to 'mark'@'%' identified by 'mark' ...
- springboot集成邮件服务
一.前言 Spring Email 抽象的核心是 MailSender 接口,MailSender 的实现能够把 Email 发送给邮件服务器,由邮件服务器实现邮件发送的功能. Spring 自带了一 ...