頁面引入(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]
(具體測試數據及環境參考http://www.20cn.net/ns/wz/soft/data/20040225014342.htm)
本作品采用 知識共享署名-相同方式共享 4.0 國際許可協議 進行許可。
評論已關閉