`

Web页面的聚合技术

阅读更多

近接触到了Mason,并且了解到了它基础之上的一个MVC框架实现,随即联想到做网站以来接触到的各种各样的页面聚合的场景,颇有意思。

 

页面聚合本身是一种“分而治之”的思想,把复杂的页面分割成可以被重用和独立维护的部分,这些部分的来源灵活,可以来自同一个web app中,也可以来自不同的域;可以聚合独立的子页面(页面集成),也可以聚合数据(数据集成),甚至可以聚合子呈现(模板集成)。

 

客户端聚合

 

这种聚合的最大好处在于把聚合的工作分散到如今越来越强势的客户端,减轻了服务端的压力;另一方面,也从一定程度上简化了服务端的设计。客户端聚合在互联网初期比较少见,如今随着客户端性能越来越优秀,客户端聚合的优势逐渐显示出来。

 

最简单的聚合形式:frame聚合。请看谷百搜索。这种聚合形式的局限性在于,即便使用了frame标签,也依然是两个网站,那么两个子页面之间的交互就由于浏览器的安全限制变得困难。这是一种纯粹的静态聚合的形式,使用HTML的include标签亦类似。

 

客户端模板的聚合方式。例如Velocity、FreeMarker这些传统的模板技术,都可以做到客户端的聚合。一方面从服务端获取静态模板页,因为这些页面几乎是纯静态的,因此性能非常高;另一方面通过ajax技术从服务端获取变化的数据,优先展示主页面内容,优化页面展示体验,二者在页面上通过JavaScript的帮助形成最终的页面效果。

举例来说,比如服务端返回的模板片段是:

 

<div id="user.name">${user.name}</div>

 

再通过ajax从服务端获取到的页面数据是:

 

{user:{name:"Jim", age:"15"}}

 

聚合后的效果:

 

<div id="user.name">Jim</div>
 

例子非常简单,在这种模式下,对于变化数据的获取,可以使用Node.js接口来实现,并使用JSON作为数据传递形式,这个数据服务的子系统变成了一个完全独立于页面展示的数据服务提供者。

 

关于服务端推送技术:在页面聚合的过程中,有些数据实时性强,或者数据量大,无法一次获取完成,需要多次反复从服务端获取数据,而且,这部分数据产生的时间是由服务端确定的。看一看新浪微博、人人网,这些SNS网站中,都大量应用了这种技术。

服务端推送的方式有几种,而传统BS结构的特点是,数据都是去“拉”的,要服务端主动通知客户端需要绕一点点弯。

 

最简单的方式是轮询。客户端不断地ajax查询服务端(例如每隔1分钟查询一下是否有新的数据),甚至不断刷新页面或者子页面。但是这样的办法存在一个问题,就是大量的查询请求很可能是浪费掉的,例如一小时在线用户,每分钟ajax查询一次数据,查询了60次,只有一次是有数据的,那么剩余59次都是白白浪费的。

 

还有一个办法是被称为“Long Pulling”(例如pushlet技术),服务端在接收到客户端的ajax查询请求时,如果没有数据,不要返回,而是hold住这个HTTP连接,直到有数据了再返回。这里的好处显而易见,但是问题也很明显——大量的连接,因此在这种情况下,多路复用技术(可以参考NIO Server的材料,也可以参见这里)就显得格外有用了。

 

第三种办法采用的比较少,就是采用第三方控件,比如Applet、ActiveX等控件,和服务端交互,他们的交互可以超越网页传统的模型,甚至支持非HTTP的协议,由服务端主动推送数据。

 

服务端聚合

 

服务端聚合的本地模板聚合是最传统的聚合形式,是页面重用的基础,由模板引擎解析运算模板为最终的页面,写入输出流。这里以SiteMesh举例:

 

 

配置一个url mapping文件,再在模板上使用SiteMesh标签:

 

    <div class='mainBody'>
      <sitemesh:write property='body'/>
    </div>

 

SSI:服务器端嵌入(Server Side Include),这也是为什么很多老网站的URL都是以.stm、.shtm或.shtml结尾的。它的嵌入和html标签里面的include不一样,SSI是为WEB服务器提供的一套命令,这些命令只要直接嵌入到HTML文档的注释内容之中即可生效,但是它的解析需要特定的服务器支持。

 

<!--#include file="extend.htm"-->

 

随着页面缓存在互联网应用世界的称王,Oracle定义了ESI作为一种缓存方式聚合页面的规范,它规定了将Web网页的页面的片段进行缓冲/缓存的技术方式。

 

<esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/>

 

Portlet聚合。Portlet在早几年的企业门户应用中很常见,它本身是一组规范,也规定了一种聚合页面的方式,可以远程聚合,也可以本地聚合,它可以协助应用将数据实体和展现模板在组网上就分离开,业务节点部署可以非常灵活,Portlet是网站解耦的一大利器:


 

不过Portlet由于在聚合中采用了两次请求转发的方式(一次Action请求、一次render请求),导致效率天然不高。

 

文章系本人原创,转载请注明出处和作者

 

4
0
分享到:
评论
1 楼 username2 2012-11-03  
很多没听过的东西,学习了

相关推荐

    Web开发技术.pdf

    Web2.0的特点包括Ajax技术、网志(Blog)、社会书签、维基百科(Wiki)和内容聚合(RSS)等。Ajax技术通过异步请求,可以实现不重新加载整个页面的情况下,部分更新页面的内容,从而提高用户体验。网志(Blog)是...

    arcgis for js 点聚合

    在提供的文件列表中,我们看到有`index.html`,这通常是Web应用的入口文件,包含了页面结构和引用的JavaScript库。`data`可能包含的是点数据,可能是GeoJSON或CSV格式,这些数据会被加载到地图中进行聚合处理。`...

    Web开发技术 第1章 Web开发技术概述.ppt

    RSS(Really Simple Syndication)是内容聚合技术,让用户订阅并获取网站更新。 总的来说,Web开发技术涵盖了许多层面,从基础的HTML、HTTP协议到复杂的服务器端脚本、数据库交互,再到Web 2.0的交互式应用,都是...

    百度地图点聚合demo

    点聚合技术在处理大量地理位置数据时尤为有用,它能够将密集的点进行合并,以更直观的方式展示在地图上,避免地图显示过于拥挤。 首先,我们需要了解什么是点聚合。点聚合是一种地理信息系统(GIS)中的技术,当...

    大数据可视化平台Web页面源码,数据可视化网页,HTML源码.zip

    总的来说,这个压缩包提供了构建大数据可视化Web页面所需的全部源代码资源,涵盖了数据获取、处理、可视化以及交互设计等多个方面。通过学习和理解这些源码,开发者可以掌握如何创建高效、美观的数据可视化应用,...

    IntraWeb技术在Web报表开发中的应用.pdf

    2. **业务逻辑层**:通过DataSnap技术,在服务器端处理复杂的报表逻辑,如数据聚合、排序等。 3. **数据访问层**:通过数据库连接组件,如ADO或FireDAC等,与数据库进行交互,获取报表所需数据。 #### 4. 结论 综...

    PHP聚合支付系统源码

    PHP作为一款广泛应用于Web开发的语言,其灵活性和易用性使其成为构建聚合支付系统的理想选择。本篇文章将深入探讨PHP聚合支付系统的核心概念、实现原理以及相关的技术要点。 **一、聚合支付系统概述** 聚合支付系统...

    web技术深入交流:Widget技术及其在资源个性化获取的应用

    它们可以是天气预报、日历、新闻聚合等,用户无需离开当前页面就能获取所需信息。Widget基于Web标准,如HTML、CSS和JavaScript,这使得它们跨平台兼容,可以在不同操作系统和浏览器上运行。 Widget技术主要包含以下...

    基于Ajax技术的Web 2.0开发应用

    3. **基于标准技术**:Ajax使用的技术如JavaScript、CSS、DOM等都是Web开发的标准技术,具有广泛支持。 4. **更好的用户体验**:由于异步更新,用户感觉应用响应更快,操作更流畅。 5. **数据聚合**:Ajax可以调用...

    Web2.0源代码

    包括博客系统、RSS聚合、标签(Tags)系统、邮件服务以及电子商务平台,所有这些都充分利用了Ajax(Asynchronous JavaScript and XML)技术,以提供流畅的用户体验和高效的页面更新。 1. **博客系统**:在Web2.0...

    Web报表开发技术-Eclipse Birt开发技术实例

    通过JavaScript API,可以在Web页面上添加按钮和表单,与Birt Viewer进行交互,实现这些高级功能。 7. **导出和打印**:Birt还支持报表的多种导出格式,如PDF、Excel、CSV等。用户可以选择导出报表以便离线查看或...

    AJAX技术及其WEB应用.pdf

    AJAX技术及其WEB应用 AJAX(Asynchronous JavaScript and XML)是一种异步的JavaScript和XML技术,它可以实现异步数据交互,减少服务器负载,提高用户体验。本文将详细介绍AJAX技术的定义、实现原理、机制和WEB应用...

    Web开发驾驶舱.zip

    在Web开发中,驾驶舱页面通常指的是一个综合性的仪表盘界面,它将企业的关键业务数据以图表、仪表、地图等形式集中展示,使决策者能够一目了然地了解公司运营状况。这种页面设计强调直观性和实时性,使得数据的分析...

    PHP聚合直播盒子网站源码,打造全方位直播平台

    【PHP聚合直播盒子网站源码】是一个用于构建全方位直播平台的解决方案,主要针对那些希望创建自己...对于初学者来说,理解并熟悉PHP编程语言,以及相关Web开发技术,如HTML、CSS和JavaScript,是成功实施此项目的关键。

    聚合直播盒子H5网页源码

    【标题】"聚合直播盒子H5网页源码"所涉及的知识点主要集中在Web开发、后端编程语言PHP以及移动端适配技术上。这个项目的核心是构建一个能够支持多平台访问的直播服务,包括PC(个人电脑)、WAP(移动网页)、iOS...

    聚合搜索引擎源码,百度,搜狗,360搜索引擎

    在这个主题中,我们将探讨关于构建聚合搜索引擎的一些关键技术点,以及与提供的文件名相关的细节。 首先,`index.php`是网站的入口文件,通常用于处理用户请求。在聚合搜索引擎中,这个文件可能会包含解析用户查询...

    springboot项目 maven聚合

    在本项目中,Freemarker与Spring Boot的视图解析器配合,用于生成动态Web页面。开发人员可以在Freemarker模板中定义逻辑,将后端的数据渲染成前端展示的内容,提供灵活的页面设计和数据绑定。 **YAML** 是一种易读...

    web页面RSS订阅功能

    Web页面的RSS订阅功能是一种基于XML的互联网信息聚合技术,它允许用户订阅并获取网站更新内容,无需频繁地访问各个网站。RSS(Really Simple Syndication)的初衷是简化信息的分发,使得用户可以一站式获取多个来源...

    行业文档-设计装置-基于安卓平台浏览器Web页面的滑动加载方法.zip

    这份行业文档聚焦于这一主题,旨在提供一种基于安卓平台浏览器的Web页面滑动加载技术的详细指南。以下是对该主题的深入探讨: 一、滑动加载原理 滑动加载,也称为无限滚动或滚动加载,是一种网页设计技术,允许用户...

    网盘聚合搜索.rar

    标题“网盘聚合搜索.rar”所指的是...源码的组织结构清晰,涵盖了前端样式、页面展示、数据库操作、用户认证和功能实现等多个方面,对于想要学习PHP Web开发或网盘搜索技术的开发者来说,是一个很好的学习和实践素材。

Global site tag (gtag.js) - Google Analytics