您的位置：首页 > 编程技术 > html  >  页面引入(include)方式的研究及性能比较

页面引入(include)方式的研究及性能比较

 更新时间：2016年9月20日 19:05  点击：1324
最近可能要模块化架构一个大型网站，所以研究了一下各种页面引入技术，效率最高的就是避免过多的服务器端操作，目前的方式大多分为以下几类：

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这种方法也可以在后台程序中使用。
<

不是炒冷饭,我添加了很多新的功能哦

演示地址: xWinHTCDemo.htm

CSS: global.css

HTC: xwin.htc

特点:

1.使用简单.在页面中引用了css后就可以直接用<x:win>生成窗口,异常简单.在<x:win>中可以用left,top,width,height来初始化窗口,不写则默认由窗口内容决定.

2.支持多窗口嵌套.支持拖动,支持缩放,支持最大化最小化

3.支持方法:

<public:method name="Close"/>
<public:method name="Destroy"/>
<public:method name="Max"/>
<public:method name="Min"/>
<public:method name="MoveTo"/>
<public:method name="ResizeTo"/>
<public:method name="SetContent"/>
<public:method name="SetTitle"/>
<public:method name="ShowHide"/>

属性:

<public:property name="Body" get="getBody" put="putBody"/>
<public:property name="Title" get="getTitle" put="putTitle"/>

是不是比较象一个真正的窗口了?呵呵




Google SiteMap文件生成后格式如下：
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
  <url>
    <loc>http://homepage.</loc>
    <lastmod>2005-06-03T04:20-08:00</lastmod>
    <changefreq>always</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://homepage./300687.html</loc>
    <lastmod>2005-06-02T20:20:36Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

XML标签
changefreq:页面内容更新频率。
lastmod:页面最后修改时间
loc:页面永久链接地址
priority:相对于其他页面的优先权
url:相对于前4个标签的父标签
urlset:相对于前5个标签的父标签

我将一句一句分解讲解这个xml文件的每一个标签：
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
这一行定义了此xml文件的命名空间，相当于网页文件中的<html>标签一样的作用。

<url>
这是具体某一个链接的定义入口，你所希望展示在SiteMap文件中的每一个链接都要用<url>和</url>包含在里面，这是必须的。

<loc>http://homepage.</loc>
用<loc>描述出具体的链接地址，这里需要注意的是链接地址中的一些特殊字符必须转换为XML(HTML)定义的转义字符，如下表： 字符 转义后的字符
HTML字符 字符编码
and(和) & & &#38;
单引号 &apos; &apos; &#39;
双引号 " " &#34;
大于号 > &gt; &#62;
小于号 < &lt; &#60;

<lastmod>2005-06-03T04:20:32-08:00</lastmod>
<lastmod>是用来指定该链接的最后更新时间，这个很重要。Google的机器人会在索引此链接前先和上次索引记录的最后更新时间进行比较，如果时间一样就会跳过不再索引。所以如果你的链接内容基于上次Google索引时的内容有所改变，应该更新该时间，让Google下次索引时会重新对该链接内容进行分析和提取关键字。这里必须用ISO 8601中指定的时间格式进行描述，格式化的时间格式如下：
年：YYYY(2005)
年和月：YYYY-MM(2005-06)
年月日：YYYY-MM-DD(2005-06-04)
年月日小时分钟：YYYY-MM-DDThh:mmTZD(2005-06-04T10:37+08:00)
年月日小时分钟秒：YYYY-MM-DDThh:mmTZD(2005-06-04T10:37:30+08:00)
这里需注意的是TZD，TZD指定就是本地时间区域标记 在做一些网站（特别是bbs之类）时，经常会有充许用户输入html样式代码，却禁止脚本的运行的需求, 以达到丰富网页样式，禁止恶意代码的运行。
当然不能用 htmlencode 和 htmldecode 方法,因为这样连基本的html代码会被禁止掉。
我在网上搜索，也没有找到好的解决办法，倒是收集了一些脚本攻击的实例：
1. <script>标记中包含的代码
2. <a href=javascript:...中的代码
3. 其它基本控件的 on...事件中的代码
4. iframe 和 frameset 中载入其它页面造成的攻击
有了这些资料后，事情就简单多了，写一个简单的方法，用正则表达式把以上符合几点的代码替换掉:
public string wipescript(string html)
{
system.text.regularexpressions.regex regex1 = new system.text.regularexpressions.regex(@"<script[ss]+</script *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex2 = new system.text.regularexpressions.regex(@" href *= *[ss]*script *:",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex3 = new system.text.regularexpressions.regex(@" on[ss]*=",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex4 = new system.text.regularexpressions.regex(@"<iframe[ss]+</iframe *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex5 = new system.text.regularexpressions.regex(@"<frameset[ss]+</frameset *>",system.text.regularexpressions.regexoptions.ignorecase);
html = regex1.replace(html, ""); //过滤<script></script>标记
html = regex2.replace(html, ""); //过滤href=javascript: (<a>) 属性
html = regex3.replace(html, " _disibledevent="); //过滤其它控件的on...事件
html = regex4.replace(html, ""); //过滤iframe
html = regex5.replace(html, ""); //过滤frameset
return html;
}
此方法输入可能包含脚本的html代码，返回则就是干净的代码了。

　　框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。

　　但是，框架的设计可能比较复杂;并且在许多情况下，您可以创建没有框架的 Web 页，它可以达到使用一组框架所能达到的许多同样效果。例如，如果您想让导航条显示在页面的左侧，则既可以用一组框架代替您的页面，也可以只是在站点中的每一页上包含该导航条;

　　许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。

　　并不是所有的浏览器都提供良好的框架支持，框架对于无法导航的访问者而言可能难以显示。所以，如果您确实要使用框架，应始终在您的框架集中提供 noframes 部分，以方便不能查看这些框架的访问者。您最好还要提供指向站点的无框架版本的显式链接，以用于那些虽然其浏览器支持框架但不喜欢使用框架的访问者。

　　使用框架具有以下优点:

　　访问者的浏览器不需要为每个页面重新加载与导航相关的图形。

　　每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。

　　例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。

　　使用框架具有以下缺点:

　　可能难以实现不同框架中各元素的精确图形对齐。

　　对导航进行测试可能很耗时间。

　　各个带有框架的页面的 URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本。)




<
[!--infotagslink--]

相关文章