专利名称：渲染大型Web页面的方法
技术领域：
本发明涉及互联网技术，尤其涉及渲染大型Web页面的方法。
背景技术：
在传统的web应用中，客户端浏览器一次乂人l良务器中下载需要 展现的页面的所有数据。目前随着web应用日趋大型化，客户端浏 览器需要从服务器端下载的数据量变的越来越大，而客户端的网络 带宽没有明显的增长，这样客户端浏览器渲染web页面的时间就会 变的长起来，用户的直》见感受就是网页加载'隄，长时间看不到页面。 如图1所示。
基于此，业界提出了网站页面数据异步加载的机制，即AJAX。 此技术分离了业务数据和web页面标记数据(该数据用于渲染业务 凄t才居生成漂亮的界面，例:^ html、 javascript, css )。这才羊客户端浏 览器第一次只需要加载web页面标记数据之后就可以看到页面，客 户的直^L感受是网页加载快了 。
即Y更:^jt匕，随着web应用的大型4匕，web应用趋于更强的交互 体-睑，web页面标i己凄t才居也会越来越大，页面的展J见也会因为web 页面标记数据的越来越大，渲染时间会越来越长，这个时候仅仅通 过分离业务数据和web页面标记数据已经不能满足客户的体验。
发明内容
鉴于以上，发明人设想对于超大型的web应用，如网上财务等， 是不是可以使web页面标记数据也根据不同情况进行分离，也就是 说客户端一个页面加载会分为三个步骤。每个步骤仅仅加载一部分 数据。
为了解决上述技术问题，本发明提供了一种渲染大型Web页面 的方法，包4舌〗寻大型Web页面中的业务凄史才居与Web页面才示i己凄丈 据分块；根据用户业务要求继续将所述Web页面标记数据分块；以 及在加载所述大型Web页面时，异步加载已被分块的所述大型Web 页面。
在上述方法中，将所述Web页面标记数据分成两个数据块，其 中第一数据块通过浏览器渲染后，能够使用户看到基本Web页面； 以及第二lt据块为首次页面渲染所需要的业务lt据。所述异步加载 包括首先加载所述第一数据块；4艮据用户的业务要求，随时加载 所述第二数据块；以及在用户看到基本Web页面后，如果需要执行
相应的#:作，向服务器发送请求来下载对应于所述相应的#:作的业
务数据块。
在上述方法中，浏览器执行下载的所述业务数据块，显示渲染 页面。加载所述第二数据块的方式是异步JavaScript和XML技术。 所述业务数据块包括JavaScript数据包或直接从服务器上下载的 HTML代码。
在上述方法中，所述业务lt据块在被浏览器执行之后在Web 页面上显示对应于所述相应的才喿作的界面。4艮据用户业务要求继续 将所述Web页面标记数据分块时采用的标准为不影响页面第一次 加载的完整性。分块时将校验规则跟第一次页面展现时需要的代码分开。分块时将功能按钮的实现代码跟第 一次页面展现时需要的代 码分开。
基于此，对于超大型的web页面，如果加载的^t据非常之大， 通过此方案的解析之后，每步加载的数据都不大，这样对用户而言， 提高用户的体验，克服了网络带宽对用户体验的限制。
下面结合附图和具体实施方式
对本发明作进一步详细的说明。 图1是根据本发明的渲染大型Web页面的方法的流程图；以及 图2示出了图1示出的方法的具体实施例的示意图。
具体实施例方式
下面将详细参考本发明的优选实施例，根据附图来描述优选实 施例的示例。
图l是根据本发明的渲染大型Web页面的方法的流禾呈图。渲染 大型Web页面的方法包括步骤102,将大型Web页面中的业务数 据与Web页面标记数据分块；步骤104,根据用户业务要求继续将 所述Web页面标记凄t据分块；以及步骤106,在加载所述大型Web 页面时，异步加载已^皮分块的所述大型Web页面。
在上述方法中，将所述Web页面标记凄t据分成两个凄t据块，其 中第一数据块通过浏览器渲染后，能够使用户看到基本Web页面； 以及第二数据块为首次页面渲染所需要的业务数据。所述异步加载 包括首先加载所述第一数据块；4艮据用户的业务要求，随时加载 所述第二凄t据块；以及在用户看到基本Web页面后，如果需要才丸行
6相应的操作，向服务器发送请求来下载对应于所述相应的操作的业 务数据块。
在上述方法中，浏览器执行下载的所述业务数据块，显示渲染
页面。加载所述第二数据块的方式是异步JavaScript和XML 4支术。 所述业务凄t据块包括JavaScript凄t据包或直4妄乂人力良务器上下载的 HTML代码。
在上述方法中，所述业务lt据块在一皮浏览器执行之后在Web 页面上显示对应于所述相应的才喿作的界面。根据用户业务要求继续 将所述Web页面标记数据分块时采用的标准为不影响页面第一次 加载的完整性。分块时将校验规则跟第一次页面展现时需要的代码 分开。分块时将功能按钮的实现代码跟第一次页面展现时需要的代 码分开。
图2示出了图1示出的方法的具体实施例的示意图。
首先把业务数据和web页面标记数据分离，接着根据业务需要 把web页面标记数据再次分离。分离的标准是不能影响页面第一次 加载的完整性。分离时可以把某些校验规则和功能按钮的实现代码 跟第一次页面展现时需要的代码分离。
如何不影响第一次加载的完整性？
一个应用^E序的某个功能页面在加载的时〗美，想让用户看到什 么界面，这个界面就一定要在第一次^皮加载。具体的拆分点包括以 下几个方面，^f旦并不^f又限于以下几个方面1、点击页面上的某个 按钮之后要执行的具体操作，比如高级查询按钮，点击高级查询之 后，需要给用户显示高级查询的查询条件的输入框等等内容，这个 内容可以不在第 一次加载的时候加载，可以在用户点击高级查询的按钮的时候再从应用服务器上下载到浏览器上，然后显示给用户
看。2、页面才是交时的4交-验身见则。比^^见要在一个应用禾呈序中注册 一个账户，该账户在提交之前会做一系列的校验动作，比方说某个 字段不能超过多少个中文字或者要是日期格式等等。因为这些校验 头见则是用户点击注册时候需要-验证用的，所以第一次加载的时^矣完 全没有必要从服务器上下载下来占用带宽，所以可以放在需要的时 候下载，也就是在点击注册按钮提交的时候从服务器上下载该校验 规则进行校验即可。
浏览器在加载时分三块异步加载。才艮据加载的完整性问题，可 以将异步加载的数据分为三种^t据块，具体的定义可以参考以下内 容
凄t据块一 该凄t据块通过浏览器渲染之后，用户可以看到基本 的web页面，不影响用户的后续揭:作。比如一个查询页面中的查询 按钮和供查询结果显示的列表的框框，只是线条和框框，此时的列 表中并没有查询的结果数据。
凄t据块二首次页面渲染需要的业务数据。比如查询之后的结 果数据，这些数据是需要填充到页面上的。
数据块三用户看到基本的web页面之后，如果要操作相应的 功能，比如点击web页面上的生成凭证功能，则需要下载执行该才乘 作的具体的数据，该数据块有可能是一段javascript代码。
数据块一是浏览器最先加载的，加载该数据块只需要在浏览器 的地址栏中输入相应的地址即可。
凄史据块一加载之后，凄t据块二可以才艮据需要随时加载。比如， 用户需要看到查询的结果的凝:据。通用的加载方式是AJAX方式。 注Ajax ( AsynchronousJavaScriptandXML )是结合了 Java技术、 XML以及JavaScript等编禾呈才支术，可以让开发人员构建基于Java 技术的Web应用，并打破了使用页面重载的惯例。Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web 页面不用打断交互流程进4亍重新加裁，就可以动态地更新。4吏用 Ajax,用户可以创建4妄近本i也桌面应用的直4妄、高可用、更丰富、 更动态的Web用户界面。
重点是加载凝:据块三。数据块一加载之后，用户可以看到界面。 数据块二加载之后，用户可以看到加载到相应的业务数据填充到界 面上去。
数据块三的加载方式叙述如下
用户做具体操作时，向服务器上发送请求，去下载数据块三。 比如，用户点击高级查询按钮，这个时候页面可以不整体刷新，而 是直接从服务器上下载需要渲染的页面的数据块。该数据块下载之 后，浏览器执行，在当前页面上画出一个高级查询的界面，该界面 上可能有不同的查询条件的输入框等等。注数据块三可以是 javascript数据包或者直接是从服务器上下载下来的html代码，该 数据块被浏览器执行之后就会在web页面上出现查询框等。
从而，分布下载页面数据技术方案能够更强的支持超大的web 页面，为saas应用提供了底层的技术方案支持。取得技术效果在于 1、可以突破因客户网络带宽大小对web开发的限制；2、可以解决 使saas的单页面功能尽可能的丰富的技术问题。
尽管已经参照多个示范性实施方式描述了实施例，本领域4支术 人员应当J里解，可以i殳i十出多个其它^f'务改和实施例，落入本"i兌明书 的4青神和原理范围。更具体地，在本it明书、附图及所附的4又利要 求书的范围内的本组合布置的组成部分和/或布置中的各种变化和 修改是可能的。除了组成部分和/或布置中的变化和修改之外，替代 ^f吏用对于本领域4支术人员而言是显然的。
9
权利要求
1.一种渲染大型Web页面的方法，其特征在于，包括将大型Web页面中的业务数据与Web页面标记数据分块；根据用户业务要求继续将所述Web页面标记数据分块；以及在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面。
2. 根据权利要求1所述的方法，其特征在于，将所述Web页面 标记数据分成两个数据块，其中第 一数据块通过浏览器渲染 后，能够4吏用户看到基本Web页面；以及第二凄t据块为首次 页面渲染所需要的业务凄t据。
3. 根据权利要求2所述的方法，其特征在于，所述异步加载包括首先加载所述第一数据块；才艮据用户的业务要求，随时加载所述第二数据块；以及在用户看到基本Web页面后，如果需要执行相应的操作， 向月良务器发送请求来下载对应于所述相应的才喿作的业务数据块。
4. 根据权利要求3所述的方法，其特征在于，还包括浏览器执 4亍下载的所述业务凄t据块，显示渲染页面。
5. 才艮据权利要求3所述的方法，其特征在于，加载所述第二凄丈据 块的方式是异步JavaScript和XML技术。
6. 根据权利要求3所述的方法，其特征在于，所述业务数据块包 括JavaScript数据包或直接从服务器上下载的HTML代码。
7. 根据权利要求3至6中任一项所述的方法，其特征在于，所述 业务^t据块在^皮浏览器扭J于之后在Web页面上显示对应于所 述相应的操作的界面。
8. 根据权利要求1至6中任一项所述的方法，其特征在于，根据 用户业务要求继续将所述Web页面标记lt据分块时采用的标 准为不影响页面第一次加载的完整性。
9. 根据权利要求8所述的方法，其特征在于，分块时将校验规则 3艮第 一次页面展现时需要的^码分开。
10. 根据权利要求9所述的方法，其特征在于，还包括分块时将 功能4要4丑的实现代i码^艮第一次页面展现时需要的4义码分开。
全文摘要
本发明提供了一种渲染大型Web页面的方法，包括将大型Web页面中的业务数据与Web页面标记数据分块；根据用户业务要求继续将所述Web页面标记数据分块；以及在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面。基于此，对于超大型的web页面，如果加载的数据非常之大，通过此方案的解释之后，每步加载的数据量都不大，这样对用户而言，提高用户的体验，克服了网络带宽对用户体验的限制。
文档编号G06F17/30GK101551819SQ200910083268
公开日2009年10月7日 申请日期2009年4月30日 优先权日2009年4月30日
发明者王国伟 申请人:用友软件股份有限公司