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

本文详细介绍了多种网页元素包含技术,包括HTML中的iframe、SSI技术、JavaScript包含技术等,并对比了它们各自的优缺点及应用场景。

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]

转载于:https://www.cnblogs.com/GodIsBoy/p/3570306.html

<think>嗯,用户现在想了解JSF中`<ui:include>`的使用范围,特别是它可以引入哪些类型的页面定义和限制。根据之前提供的引用内容,我需要结合这些信息来回答。首先,用户之前的问题是关于`<ui:include>`和复合组件(xmlns:my)的区别,现在他们进一步询问`<ui:include>`的具体使用范围。引用中提到,JSF2支持模板,通过模板可以封装常见功能,这应该和`<ui:include>`有关。另外,引用[4]提到Facelet标记文件用于可重用组件组,而`<ui:include>`可能用于包含这些标记文件。需要确定`<ui:include`可以引入哪些类型的页面,比如XHTML文件、模板文件、其他Facelet组件等。用户可能想知道`<ui:include>`是否只能引入静态内容,还是可以包含动态生成的页面。之前的回答提到`<ui:include>`是文件片段包含,共享当前作用域,而复合组件有独立作用域。所以需要说明`<ui:include>`可以引入哪些文件类型,是否有路径限制,比如必须位于WEB-INF下,或者相对路径的问题。 另外,引用[3]提到JSF配置文件中的标签,可能涉及到`faces-config.xml`中的配置是否影响`<ui:include>`的使用。但用户的问题更多是关于页面引入的类型,可能不需要深入配置,但需要确认是否有配置要求。 还要考虑用户提到的限制,比如参数传递只能通过`<ui:param>`,是否支持动态路径,或者是否必须预定义路径。引用[1]中的RESTful URL和预处理请求的问题可能和`<ui:include>`的动态性有关,但不确定是否需要在这里提及。 需要整理出`<ui:include>`支持引入页面类型,比如XHTML、模板片段、其他Facelet文件等,并指出限制,比如不能引入非Facelet文件,路径的正确写法,作用域的问题等。同时,结合引用中的信息,如模板的使用[^2],标记文件与复合组件的区别[^4],来补充说明。可能还需要提到性能方面,引用[1]中的预处理问题,如果`<ui:include>`每次请求都解析文件,可能会有性能影响,但这是否属于使用范围的限制呢?可能需要提到。 总结下来,回答的结构应该是先说明支持的类型,再列举具体的限制,最后结合引用中的信息补充说明使用场景和注意事项。同时,确保使用LaTeX格式的数学表达式,如果有的话,并生成相关问题。</think>### JSF `<ui:include>` 使用范围详解 #### 一、支持引入页面类型 | 页面类型 | 示例路径 | 特性说明 | |-------------------------|-----------------------------------|--------------------------------------------------------------------------| | **基础XHTML文件** | `/templates/header.xhtml` | 可包含完整的JSF视图文件,支持EL表达式和组件树合并[^2] | | **模板片段** | `/WEB-INF/common/footer.xhtml` | 专门设计用于被包含的局部内容,通常不包含`<f:view>`等根标签[^2] | | **复合组件片段** | `/resources/mycomp/input.xhtml` | 可包含复合组件的部分实现代码(需避免循环引用) | | **动态生成内容** | `#{bean.dynamicTemplatePath}` | 支持通过EL表达式动态指定路径,但需确保目标文件存在[^1] | 数学表达式示例: 假设页面包含$n$个动态片段,解析时间复杂度为: $$T(n) = O(k \cdot m) \quad (k=\text{包含次数}, m=\text{文件复杂度})$$ #### 二、路径限制规则 1. **绝对路径**:以`/`开头,从Web应用根目录定位 ```xml <ui:include src="/WEB-INF/templates/navbar.xhtml"/> ``` 2. **相对路径**:基于当前文件位置解析 ```xml <!-- 当前文件在/user/profile.xhtml --> <ui:include src="../../common/validation.xhtml"/> ``` 3. **资源库路径**:访问`resources`目录需明确库名 ```xml <ui:include src="/resources/myLib/components/datePicker.xhtml"/> ``` #### 三、核心功能限制 1. **作用域继承** - 自动继承父页面所有变量(包括请求参数、会话属性等) - 无法创建独立作用域,可能导致变量污染[^1] 2. **参数传递限制** - 仅支持通过`<ui:param>`传递**值类型**参数 ```xml <ui:include src="header.xhtml"> <ui:param name="pageTitle" value="用户中心"/> </ui:include> ``` - 不支持直接传递方法表达式(需通过`#{bean.method}`间接调用) 3. **组件树限制** - 被包含文件中的组件ID会与父页面合并 - 需避免ID冲突(建议使用`NamingContainer`组件) 4. **动态性限制** - 路径中的EL表达式在**视图构建时**求值 ```xml <!-- 根据用户角色加载不同模板 --> <ui:include src="#{user.role}/menu.xhtml"/> ``` - 不支持在**渲染阶段**动态切换包含内容 #### 四、典型应用场景 1. **静态布局复用** ```xml <!-- 主页面结构 --> <ui:include src="/WEB-INF/templates/layout.xhtml"> <ui:param name="content" value="/user/profile.xhtml"/> </ui:include> ``` 2. **条件包含逻辑** ```xml <h:panelGroup rendered="#{not empty bean.data}"> <ui:include src="dataPreview.xhtml"/> </h:panelGroup> ``` 3. **模块化开发** ```xml <!-- 分模块开发用户界面 --> <ui:include src="userProfileSection.xhtml"/> <ui:include src="orderHistorySection.xhtml"/> ``` #### 五、调试建议 1. 路径验证工具: 使用`FacesContext.getCurrentInstance().getExternalContext().getResource(path)`检查路径有效性 2. 组件树检查: 通过浏览器开发者工具查看生成的DOM结构,确认包含内容是否正确合并 3. 参数追踪: 在包含文件中添加调试输出: ```xml <h:outputText value="DEBUG: #{pageTitle}" style="display:none;"/> ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值