页面引入(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 ...
随机推荐
- Android中调用高德导航(组件)
btn_.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //调用 ...
- 【温故知新】C#基于事件的异步模式(EAP)
在开发winform和调用asp.net的web service引用的时候,会出现许多命名为 MethodNameAsync 的方法. 例如: winform的按钮点击 this.button1.Cl ...
- 浏览器对document.all的支持差异
从何而来从IE4开始IE的object model才增加了document.all对象,MSDN中也对 Object.all 有详细的说明,Object.all是个HTMLCollection,不是数 ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
- Ubuntu14.04搭建Oracle instantClient 11.2.0.4并配置cx_Oracle5.1.2
一.配置Oracle instantClient 11.2.0.4 1.下载Oracle客户端: 打开http://www.oracle.com/technetwork/topics/linuxx86 ...
- [转载+补充]windows下SVN客户端的安装
来源:TortoiseSVN新人使用指南 1. 首先安装SVN客户端,windows一般选择乌龟客户端https://tortoisesvn.net/downloads.html. 2. 根据系统位数 ...
- 智能提示含查询多列(html+JS+handler+ HttpRemoting)二、Remoting代码
/// <summary> /// 智能查询类型 /// </summary> public enum QueryType : byte { /// <summary&g ...
- java 2018面试题-多线程汇总(含解答)
学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行总结的,因此罗列了自己整理的多线程的问题,都是自己觉得比较经典和一些大企业面试会问 ...
- rabbitMQ windows 安装 入门(转)
rabbitMQ windows 安装 入门 1.下载,其实erlang不装也是可以的 下载 rabbitMQ :http://www.rabbitmq.com/download.html,安装r ...
- 关于css伪类,伪元素详解总结
伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...