页面引入(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]