CN101551819B - 渲染大型Web页面的方法 - Google Patents
渲染大型Web页面的方法 Download PDFInfo
- Publication number
- CN101551819B CN101551819B CN200910083268.5A CN200910083268A CN101551819B CN 101551819 B CN101551819 B CN 101551819B CN 200910083268 A CN200910083268 A CN 200910083268A CN 101551819 B CN101551819 B CN 101551819B
- Authority
- CN
- China
- Prior art keywords
- web page
- data block
- page
- business datum
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
- 238000000034 method Methods 0.000 title claims abstract description 29
- 238000009877 rendering Methods 0.000 title claims abstract description 13
- 238000011068 loading method Methods 0.000 claims abstract description 22
- 238000005516 engineering process Methods 0.000 claims description 9
- 238000012795 verification Methods 0.000 claims description 8
- 238000005192 partition Methods 0.000 abstract 2
- 238000010586 diagram Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 239000012467 final product Substances 0.000 description 2
- 239000004615 ingredient Substances 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 241000606932 Echinoderes ajax Species 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005194 fractionation Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种渲染大型Web页面的方法，包括：将大型Web页面中的业务数据与Web页面标记数据分块；根据用户业务要求继续将所述Web页面标记数据分块；以及在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面。基于此，对于超大型的web页面，如果加载的数据非常之大，通过此方案的解释之后，每步加载的数据量都不大，这样对用户而言，提高用户的体验，克服了网络带宽对用户体验的限制。
Description
技术领域
本发明涉及互联网技术，尤其涉及渲染大型Web页面的方法。
背景技术
在传统的web应用中，客户端浏览器一次从服务器中下载需要展现的页面的所有数据。目前随着web应用日趋大型化，客户端浏览器需要从服务器端下载的数据量变的越来越大，而客户端的网络带宽没有明显的增长，这样客户端浏览器渲染web页面的时间就会变的长起来，用户的直观感受就是网页加载慢，长时间看不到页面。如图1所示。
基于此，业界提出了网站页面数据异步加载的机制，即AJAX。此技术分离了业务数据和web页面标记数据(该数据用于渲染业务数据生成漂亮的界面，例如html、javascript、css)。这样客户端浏览器第一次只需要加载web页面标记数据之后就可以看到页面，客户的直观感受是网页加载快了。
即便如此，随着web应用的大型化，web应用趋于更强的交互体验，web页面标记数据也会越来越大，页面的展现也会因为web页面标记数据的越来越大，渲染时间会越来越长，这个时候仅仅通过分离业务数据和web页面标记数据已经不能满足客户的体验。
发明内容
鉴于以上，发明人设想对于超大型的web应用，如网上财务等，是不是可以使web页面标记数据也根据不同情况进行分离，也就是说客户端一个页面加载会分为三个步骤。每个步骤仅仅加载一部分数据。
为了解决上述技术问题，本发明提供了一种渲染大型Web页面的方法，包括：将大型Web页面中的业务数据与Web页面标记数据分块；根据用户业务要求继续将所述Web页面标记数据分块；以及在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面。
在上述方法中，将所述Web页面标记数据分成两个数据块，其中第一数据块通过浏览器渲染后，能够使用户看到基本Web页面；以及第二数据块为首次页面渲染所需要的业务数据。所述异步加载包括：首先加载所述第一数据块；根据用户的业务要求，随时加载所述第二数据块；以及在用户看到基本Web页面后，如果需要执行相应的操作，向服务器发送请求来下载对应于所述相应的操作的业务数据块。
在上述方法中，浏览器执行下载的所述业务数据块，显示渲染页面。加载所述第二数据块的方式是异步JavaScript和XML技术。所述业务数据块包括JavaScript数据包或直接从服务器上下载的HTML代码。
在上述方法中，所述业务数据块在被浏览器执行之后在Web页面上显示对应于所述相应的操作的界面。根据用户业务要求继续将所述Web页面标记数据分块时采用的标准为：不影响页面第一次加载的完整性。分块时将校验规则跟第一次页面展现时需要的代码分开。分块时将功能按钮的实现代码跟第一次页面展现时需要的代码分开。
基于此，对于超大型的web页面，如果加载的数据非常之大，通过此方案的解析之后，每步加载的数据都不大，这样对用户而言，提高用户的体验，克服了网络带宽对用户体验的限制。
附图说明
下面结合附图和具体实施方式对本发明作进一步详细的说明。
图1是根据本发明的渲染大型Web页面的方法的流程图；以及
图2示出了图1示出的方法的具体实施例的示意图。
具体实施方式
下面将详细参考本发明的优选实施例，根据附图来描述优选实施例的示例。
图1是根据本发明的渲染大型Web页面的方法的流程图。渲染大型Web页面的方法包括：步骤102，将大型Web页面中的业务数据与Web页面标记数据分块；步骤104，根据用户业务要求继续将所述Web页面标记数据分块；以及步骤106，在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面。
在上述方法中，将所述Web页面标记数据分成两个数据块，其中第一数据块通过浏览器渲染后，能够使用户看到基本Web页面；以及第二数据块为首次页面渲染所需要的业务数据。所述异步加载包括：首先加载所述第一数据块；根据用户的业务要求，随时加载所述第二数据块；以及在用户看到基本Web页面后，如果需要执行相应的操作，向服务器发送请求来下载对应于所述相应的操作的业务数据块。
在上述方法中，浏览器执行下载的所述业务数据块，显示渲染页面。加载所述第二数据块的方式是异步JavaScript和XML技术。所述业务数据块包括JavaScript数据包或直接从服务器上下载的HTML代码。
在上述方法中，所述业务数据块在被浏览器执行之后在Web页面上显示对应于所述相应的操作的界面。根据用户业务要求继续将所述Web页面标记数据分块时采用的标准为：不影响页面第一次加载的完整性。分块时将校验规则跟第一次页面展现时需要的代码分开。分块时将功能按钮的实现代码跟第一次页面展现时需要的代码分开。
图2示出了图1示出的方法的具体实施例的示意图。
首先把业务数据和web页面标记数据分离，接着根据业务需要把web页面标记数据再次分离。分离的标准是不能影响页面第一次加载的完整性。分离时可以把某些校验规则和功能按钮的实现代码跟第一次页面展现时需要的代码分离。
如何不影响第一次加载的完整性？
一个应用程序的某个功能页面在加载的时候，想让用户看到什么界面，这个界面就一定要在第一次被加载。具体的拆分点包括以下几个方面，但并不仅限于以下几个方面：1、点击页面上的某个按钮之后要执行的具体操作，比如高级查询按钮，点击高级查询之后，需要给用户显示高级查询的查询条件的输入框等等内容，这个内容可以不在第一次加载的时候加载，可以在用户点击高级查询的按钮的时候再从应用服务器上下载到浏览器上，然后显示给用户看。2、页面提交时的校验规则。比如现要在一个应用程序中注册一个账户，该账户在提交之前会做一系列的校验动作，比方说某个字段不能超过多少个中文字或者要是日期格式等等。因为这些校验规则是用户点击注册时候需要验证用的，所以第一次加载的时候完全没有必要从服务器上下载下来占用带宽，所以可以放在需要的时候下载，也就是在点击注册按钮提交的时候从服务器上下载该校验规则进行校验即可。
浏览器在加载时分三块异步加载。根据加载的完整性问题，可以将异步加载的数据分为三种数据块，具体的定义可以参考以下内容：
数据块一该数据块通过浏览器渲染之后，用户可以看到基本的web页面，不影响用户的后续操作。比如一个查询页面中的查询按钮和供查询结果显示的列表的框框，只是线条和框框，此时的列表中并没有查询的结果数据。
数据块二首次页面渲染需要的业务数据。比如查询之后的结果数据，这些数据是需要填充到页面上的。
数据块三用户看到基本的web页面之后，如果要操作相应的功能，比如点击web页面上的生成凭证功能，则需要下载执行该操作的具体的数据，该数据块有可能是一段javascript代码。
数据块一是浏览器最先加载的，加载该数据块只需要在浏览器的地址栏中输入相应的地址即可。
数据块一加载之后，数据块二可以根据需要随时加载。比如，用户需要看到查询的结果的数据。通用的加载方式是AJAX方式。注：Ajax(AsynchronousJavaScriptandXML)是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
重点是加载数据块三。数据块一加载之后，用户可以看到界面。数据块二加载之后，用户可以看到加载到相应的业务数据填充到界面上去。
数据块三的加载方式叙述如下：
用户做具体操作时，向服务器上发送请求，去下载数据块三。比如，用户点击高级查询按钮，这个时候页面可以不整体刷新，而是直接从服务器上下载需要渲染的页面的数据块。该数据块下载之后，浏览器执行，在当前页面上画出一个高级查询的界面，该界面上可能有不同的查询条件的输入框等等。注：数据块三可以是javascript数据包或者直接是从服务器上下载下来的html代码，该数据块被浏览器执行之后就会在web页面上出现查询框等。
从而，分布下载页面数据技术方案能够更强的支持超大的web页面，为saas应用提供了底层的技术方案支持。取得技术效果在于：1、可以突破因客户网络带宽大小对web开发的限制；2、可以解决使saas的单页面功能尽可能的丰富的技术问题。
尽管已经参照多个示范性实施方式描述了实施例，本领域技术人员应当理解，可以设计出多个其它修改和实施例，落入本说明书的精神和原理范围。更具体地，在本说明书、附图及所附的权利要求书的范围内的本组合布置的组成部分和/或布置中的各种变化和修改是可能的。除了组成部分和/或布置中的变化和修改之外，替代使用对于本领域技术人员而言是显然的。
Claims (8)
1.一种渲染大型Web页面的方法，其特征在于，包括：
将大型Web页面中的业务数据与Web页面标记数据分块；
根据用户业务要求继续将所述Web页面标记数据分块；以及
在加载所述大型Web页面时，异步加载已被分块的所述大型Web页面，其中所述异步加载包括：
首先加载第一数据块；
根据用户的业务要求，随时加载第二数据块；以及
在用户看到基本Web页面后，如果需要执行相应的操作，向服务器发送请求来下载对应于所述相应的操作的业务数据块，
其中所述第一数据块通过浏览器渲染后，能够使用户看到基本Web页面；以及所述第二数据块为首次页面渲染所需要的业务数据。
2.根据权利要求1所述的方法，其特征在于，还包括：浏览器执行下载的所述业务数据块，显示渲染页面。
3.根据权利要求1所述的方法，其特征在于，加载所述第二数据块的方式是异步JavaScript和XML技术。
4.根据权利要求1所述的方法，其特征在于，所述业务数据块包括JavaScript数据包或直接从服务器上下载的HTML代码。
5.根据权利要求1至4中任一项所述的方法，其特征在于，所述业务数据块在被浏览器执行之后在Web页面上显示对应于所述相应的操作的界面。
6.根据权利要求1至4中任一项所述的方法，其特征在于，根据用户业务要求继续将所述Web页面标记数据分块时采用的标准为：不影响页面第一次加载的完整性。
7.根据权利要求6所述的方法，其特征在于，分块时将校验规则跟第一次页面展现时需要的代码分开。
8.根据权利要求7所述的方法，其特征在于，还包括：分块时将功能按钮的实现代码跟第一次页面展现时需要的代码分开。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN200910083268.5A CN101551819B (zh) | 2009-04-30 | 2009-04-30 | 渲染大型Web页面的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN200910083268.5A CN101551819B (zh) | 2009-04-30 | 2009-04-30 | 渲染大型Web页面的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN101551819A CN101551819A (zh) | 2009-10-07 |
| CN101551819B true CN101551819B (zh) | 2011-12-07 |
Family
ID=41156066
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN200910083268.5A Expired - Fee Related CN101551819B (zh) | 2009-04-30 | 2009-04-30 | 渲染大型Web页面的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN101551819B (zh) |
Families Citing this family (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101729600B (zh) * | 2009-11-30 | 2012-11-28 | 用友软件股份有限公司 | 一种加速实现软件运营应用的方法和装置 |
| WO2012025040A1 (zh) * | 2010-08-27 | 2012-03-01 | Huang Bin | 可视化搜索引擎系统及其实现方法和应用 |
| CN102411625A (zh) * | 2011-03-21 | 2012-04-11 | 苏州阔地网络科技有限公司 | 一种渐进式输出显示方法及装置 |
| US8640047B2 (en) | 2011-06-01 | 2014-01-28 | Micorsoft Corporation | Asynchronous handling of a user interface manipulation |
| CN103530289B (zh) * | 2012-07-02 | 2018-06-22 | 腾讯科技（深圳）有限公司 | 网页显示方法和装置 |
| CN103761317B (zh) * | 2014-01-27 | 2017-08-29 | 北京京东尚科信息技术有限公司 | 一种多线程异步渲染系统及方法 |
| CN104850560A (zh) * | 2014-02-18 | 2015-08-19 | 北京京东尚科信息技术有限公司 | 一种实时加载网页中业务数据的方法和系统 |
| CN104391868B (zh) * | 2014-10-28 | 2018-12-18 | 用友优普信息技术有限公司 | 动态页面静态化的装置和方法 |
| CN105589902A (zh) * | 2014-12-02 | 2016-05-18 | 中国银联股份有限公司 | 一种通过浏览器访问服务器的页面的方法 |
| CN104461543A (zh) * | 2014-12-11 | 2015-03-25 | 武汉噢易云计算有限公司 | 一种网站页面浏览器端极速渲染的实现方法 |
| CN104573025B (zh) * | 2015-01-12 | 2018-09-04 | 北京京东尚科信息技术有限公司 | 一种提高页面加载速度的方法及系统 |
| CN105989046A (zh) * | 2015-02-03 | 2016-10-05 | 中国人寿保险股份有限公司 | 网站显示方法及系统、以及用户终端 |
| CN104699780A (zh) * | 2015-03-12 | 2015-06-10 | 浪潮集团有限公司 | 一种大数据量下提高网页响应速度的方法 |
| CN106156101A (zh) * | 2015-04-02 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 一种动态改变页面的方法及装置 |
| CN106156148B (zh) * | 2015-04-14 | 2020-08-21 | 腾讯科技（深圳）有限公司 | 一种页面的渲染方法、装置和终端设备 |
| CN105677708A (zh) * | 2015-12-28 | 2016-06-15 | 北京京东尚科信息技术有限公司 | 数据访问方法和装置 |
| CN106933640B (zh) * | 2017-04-26 | 2020-12-25 | 携程旅游网络技术（上海）有限公司 | 在移动终端的浏览器内加载Web页面的方法及系统 |
| US10963532B2 (en) | 2018-09-21 | 2021-03-30 | Citrix Systems, Inc. | Systems and methods for rendering weblinks inside a remote application using an embedded browser |
| CN109871499A (zh) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | 页面加载方法及客户端 |
| CN109949398A (zh) * | 2019-04-18 | 2019-06-28 | 成都四方伟业软件股份有限公司 | 粒子渲染方法、装置及电子设备 |
| CN111368235B (zh) * | 2020-02-25 | 2023-11-14 | 北京达佳互联信息技术有限公司 | 页面渲染和展示方法、装置、服务器、存储介质 |
| CN112182453A (zh) * | 2020-09-30 | 2021-01-05 | 北京字节跳动网络技术有限公司 | 一种数据加载方法、装置、计算机设备及存储介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1987851A (zh) * | 2005-12-22 | 2007-06-27 | 腾讯科技（深圳）有限公司 | 一种网页数据的更新显示方法 |
| CN101059800A (zh) * | 2006-04-21 | 2007-10-24 | 上海晨兴电子科技有限公司 | 在手机上显示电子书的方法和设备 |
-
2009
- 2009-04-30 CN CN200910083268.5A patent/CN101551819B/zh not_active Expired - Fee Related
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1987851A (zh) * | 2005-12-22 | 2007-06-27 | 腾讯科技（深圳）有限公司 | 一种网页数据的更新显示方法 |
| CN101059800A (zh) * | 2006-04-21 | 2007-10-24 | 上海晨兴电子科技有限公司 | 在手机上显示电子书的方法和设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN101551819A (zh) | 2009-10-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101551819B (zh) | 渲染大型Web页面的方法 | |
| KR100432936B1 (ko) | 분산형 데이터 처리 시스템 상에서 래거시 애플리케이션에엑세스를 제공하기 위한 방법, 장치 및 컴퓨터 프로그램제조물 | |
| US7865544B2 (en) | Method and system for providing XML-based asynchronous and interactive feeds for web applications | |
| CN100535900C (zh) | 用于提供异步门户页的方法和系统 | |
| CN102779164B (zh) | 一种业务系统及其动态页面的渲染方法 | |
| CN102184266B (zh) | 一种页面与数据分离的动态wap网站自动生成方法 | |
| US8001456B2 (en) | Methods for maintaining separation between markup and data at a client | |
| US8775926B2 (en) | Stylesheet conversion engine | |
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| KR100459301B1 (ko) | 사용자 인터페이스 및 그 구성 방법 | |
| US20030126555A1 (en) | Enhanced attribute prompting in browser clients | |
| US20070055929A1 (en) | Templates for variable data printing | |
| US20070240041A1 (en) | Methods and apparatus for generating an aggregated cascading style sheet | |
| US9646103B2 (en) | Client-side template engine and method for constructing a nested DOM module for a website | |
| CN104375808B (zh) | 界面显示方法及装置 | |
| US8078989B2 (en) | Internet access GUI for mobile devices | |
| US20160012551A1 (en) | Apparatus and Application Server for Providing a Service to a User | |
| US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
| CN101860734B (zh) | 一种ajax实现动态图像增量传输与显示的方法 | |
| CN101441631A (zh) | 一种用于异步网页浏览的数据访问方法 | |
| CN101604339A (zh) | 在线定制门户系统的方法及门户定制系统 | |
| US10742764B2 (en) | Web page generation system | |
| US20160012144A1 (en) | Javascript-based, client-side template driver system | |
| US8151184B2 (en) | Method for promoting the accessing efficiency with embedded web page | |
| US20160012023A1 (en) | Self-Referencing of Running Script Elements in Asynchronously Loaded DOM Modules |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| C56 | Change in the name or address of the patentee |
Owner name: YONYOU NETWORK TECHNOLOGY CO., LTD. Free format text: FORMER NAME: UFIDA SOFTWARE CO., LTD. |
|
| CP01 | Change in the name or title of a patent holder |
Address after: 100094 Haidian District North Road, Beijing, No. 68 Patentee after: Yonyou Network Technology Co., Ltd. Address before: 100094 Haidian District North Road, Beijing, No. 68 Patentee before: UFIDA Software Co., Ltd. |
|
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20111207 Termination date: 20180430 |