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)方式的研究及性能比较的更多相关文章

  1. CSS——三种页面引入方法

    目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...

  2. html文件引入其它html文件的几种方法:include方式

    可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下. 1.I ...

  3. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...

  4. CSS引入的方式有哪些? link和@import的区别是?转载

    CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...

  5. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  6. 同一页面引入多个JS文件的编码问题

    原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...

  7. CSS引入的方式有哪些? link和@import的区别是?

    CSS引入的方式包括内联 内嵌 外链 导入 link和@import的区别是 : ①link属于XHTML标签,除了加载CSS外,还能 用于定义RSS, 定义rel连接属性等作用:而@import是C ...

  8. jsp页面引入不了js路径没错

    最近搞开发,发现有个jsp页面引入不了js:很是神奇,路径什么的都没问题,同事的浏览器可以加载该js,发现放到其他的文件夹下可以加载该js:当时没研究出来,任务紧就没研究了. 最近闲下来了,有去研究, ...

  9. script标签引入vue方式开发如何写组件

    title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...

随机推荐

  1. jQuery 学习笔记(TryjQuery)

    第一集.页面加载完成后执行 js 代码: $(document).ready(function(){ $("h1").text("Where to?"); }) ...

  2. java websocket client

    websocket是H5新推出的协议,一般用于前端,但是在实际项目中我们需要用java代码来获取一些设备的实时运行数据,在后台处理后推送的前台界面,为了保证实时性,我们需要用到websocket协议, ...

  3. Oracle 多行、多列子查询

    本文使用到的是oracle数据库scott方案所带的表,scott是oracle数据库自带的方案,使用前请确保其解锁 一.多行子查询 多行子查询子查询是嵌入在其他Sql语句中的select语句,Ora ...

  4. 在用 Node.js 起服务之前,我们应该知道这些

    网络分层 了解计算机网络的同学都知道 OSI 七层网络模型和 TCP/IP 模型.OSI 七层模型是理论上的网络通信模型,而 TCP/IP 是现实中的网络通信概念模型.它们之间的对比关系参考下图. 本 ...

  5. 1.7 js基础,字符串、数组小结

    一.arguments  实参参数的数组         实参[实际的值],形参[形式上的参数]         当参数个数不固定的时候使用.         示例: script> var g ...

  6. Sed - An Introduction and Tutorial by Bruce Barnett

    http://www.grymoire.com/unix/sed.html Quick Links - NEW Sed Commands : label # comment {....} Block ...

  7. div+css 让一个小div在另一个大div里面 垂直居中

    方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800px;           height:500px;       ...

  8. Java入门系列-25-NIO(实现非阻塞网络通信)

    还记得之前介绍NIO时对比传统IO的一大特点吗?就是NIO是非阻塞式的,这篇文章带大家来看一下非阻塞的网络操作. 补充:以数组的形式使用缓冲区 package testnio; import java ...

  9. bzoj 4161: Shlw loves matrixI

    Description 给定数列 {hn}前k项,其后每一项满足 hn = a1h(n-1) + a2h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计算 ...

  10. Java并发编程系列之二十八:CompletionService

    CompletionService简介 CompletionService与ExecutorService类似都可以用来执行线程池的任务,ExecutorService继承了Executor接口,而C ...