CN104714982B - 一种网页的加载方法和系统 - Google Patents

Abstract

本申请实施例提供了一种网页的加载方法和系统，所述方法包括：当接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；采用所述网页框架数据和所述动态资源数据生成第一网页数据；采用所述第一网页数据和所述静态资源数据生成第二网页数据；将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。本申请实现了基于前后端一致的模块化方案，前后端一致采用了约定大于配置的原则，不局限于某一具体的数据格式，而是由模块开发者自行制定，减少了沟通成本，同时可以支持业务的高度复用，大幅度提升了开发效率。

Description

一种网页的加载方法和系统

技术领域

本申请实施例涉及网页数据处理的技术领域，特别是涉及一种网页的加载方法和一种网页的加载系统。

背景技术

因特网Internet的迅猛发展将人们带入了信息社会和网络经济时代，对企业的发展和个人生活都产生了深刻的影响。为了能高效处理Internet海量的数据，在数据处理过程中产生了模块化，即是一种将复杂对象进行分解的一种规范，比如将一个网页分解为多个小区块，这个行为就是模块化。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有一下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

以电子商务(ElectronicCommerce)为例，电子商务是在Internet开放的网络环境下，基于浏览器/服务器应用方式，实现消费者的网上购物、商户之间的网上交易和在线电子支付的一种新型的商业运营模式。电子商务中的一个重要组成单元就是店铺。通过分析网页的组成结构，发现店铺的网页当中有很多可以重用的业务单元，为了能够快速复用和高效的维护，模块化是很好的解决方案。

传统的模块化主要是针对复杂的后端数据、服务进行剥离拆分，比如像银行的柜员系统，承接了大量的银行业务，每个业务都是一个模块，整个系统由不同的子模块组成，侧重点在于功能的服务、数据模块。因此模块化的对象基本是企业级别的，适用范围小。对于电子商务，传统的模块化方案不能解决店铺内的复用、维护等问题。开发人员需要花费大量的精力在沟通网页和数据的交互问题、网页联调、发布代码到生产环境等各种行为，还有Web网页性能问题。

模块化后的后端数据只有特定格式的数据模型，而为了实现与前端的网页交互，采用了Iframe的方式。Iframe方式本质上面会在当前网页重新打开一个新的会话，采用异步的方式渲染网页，用户需要分开等待两次请求时间，对于服务器端和浏览器端都增加了一次开销。同时Iframe的方式让网页的性能优化无法适用到Iframe的内容，性能无法进一步的优化，造成模块化的性能极其低下，也无法给用户良好的体验。

因此，目前需要本领域技术人员迫切解决的一个技术问题就是：提供一种网页数据模块化的方案，以减少系统资源开销，提高开发效率。

发明内容

本申请实施例所要解决的技术问题是提供一种网页的加载方法，用以减少系统资源开销，提高开发效率。

相应的，本申请实施例还提供了一种网页的加载系统，用以保证上述方法的实现及应用。

为了解决上述问题，本申请公开了一种网页的加载方法，包括：

当接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

采用所述网页框架数据和所述动态资源数据生成第一网页数据；

采用所述第一网页数据和所述静态资源数据生成第二网页数据；

将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

优选地，所述加载请求中包括网页标识，所述分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据的步骤包括：

提取所述加载请求中的网页标识；

采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

优选地，所述网页框架数据包括所述网页中固定格式的数据；

所述动态资源数据包括所述网页中可调整的数据；

所述静态资源数据包括计算机语言CSS数据、脚本语言JS数据和图片数据。

优选地，所述采用所述网页框架数据和所述动态资源数据生成第一网页数据的步骤包括：

按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

优选地，所述模板语言包括Velocity模板语言，所述网页框架数据包括变量名，所述动态资源包括所述变量名对应的值；

所述按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据的步骤包括：

启动所述Velocity模板语言对应的模板引擎；

采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

采用所述模板引擎获取网页框架数据；

将关联后的动态资源数据渲染到网页框架数据中。

优选地，所述采用所述第一网页数据和所述静态资源数据生成第二网页数据的步骤包括：

按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

优选地，所述将所述第二网页数据和所述静态资源数据发送至客户端的步骤包括：

通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

本申请还公开了一种网页的加载方法，包括：

向服务器发送网页的加载请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

接收所述服务器返回第二网页数据和静态资源数据；

采用所述第二网页数据和所述静态资源数据进行渲染。

本申请还公开了一种网页的加载系统，包括：

数据获取模块，用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

第一网页数据生成模块，用于采用所述网页框架数据和所述动态资源数据生成第一网页数据；

第二网页数据生成模块，用于采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据发送模块，用于将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

优选地，所述加载请求中包括网页标识，所述数据获取模块包括：

提取子模块，用于提取所述加载请求中的网页标识；

查找子模块，用于采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

获取子模块，用于分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

优选地，所述网页框架数据包括所述网页中固定格式的数据；

所述动态资源数据包括所述网页中可调整的数据；

所述静态资源数据包括计算机语言CSS数据、脚本语言JS数据和图片数据。

优选地，所述第一网页数据生成模块包括：

第一渲染子模块，用于按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

优选地，所述模板语言包括Velocity模板语言，所述网页框架数据包括变量名，所述动态资源包括所述变量名对应的值；所述第一渲染子模块包括：

启动子模块，用于启动所述Velocity模板语言对应的模板引擎；

关联子模块，用于采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

获取子模块，用于采用所述模板引擎获取网页框架数据；

第二渲染子模块，用于将关联后的动态资源数据渲染到网页框架数据中。

优选地，所述第二网页数据生成模块包括：

编排子模块，用于按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

添加子模块，用于将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

优选地，所述数据发送模块包括：

远程发送子模块，用于通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

本申请还公开了一种网页的加载系统，包括：

加载请求发送模块，用于向服务器发送加载的网页请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据接收模块，用于接收所述服务器返回第二网页数据和静态资源数据；

第三渲染模块，用于采用所述第二网页数据和所述静态资源数据进行渲染。

与背景技术相比，本申请包括以下优点：

本申请将网页划分成网页框架数据、动态资源数据和静态资源数据，在接收到网页的加载请求时，分别对网页框架数据和动态资源数据进行渲染生成第一网页数据，再基于静态资源数据采用第一网页数据生成第二网页数据，客户端可以基于浏览器的规范对第二网页数据和静态资源数据进行正常的渲染，本申请实现了基于前后端一致的模块化方案，前后端一致采用了约定大于配置的原则，不局限于某一具体的数据格式，而是由模块开发者自行制定，减少了沟通成本，同时可以支持业务的高度复用，大幅度提升了开发效率。本申请可以完全架构于互联网系统，能够自动解析出前后端内容，可以按需同步加载，实现了异步、同步渲染，极大的提高了性能，同时大大降低了系统的资源开销，可以满足高并发的业务需求。

本申请提供了统一的数据访问，在获取某些数据的同时，可以无需了解数据的来源、数据的调用方式，不用关注数据的细节能够极大的提高开发效率和降低应用对于数据的依赖性。

附图说明

图1示出了本申请的一种网页的加载方法实施例1的步骤流程图；

图2示出了本申请的一种商品的部分网页结构示例图；

图3示出了本申请的一种网页的加载方法实施例2的步骤流程图；

图4示出了本申请的一种设备部署架构图；

图5示出了本申请的一种网页的加载系统实施例1的结构框图；

图6示出了本申请的一种网页的加载系统实施例2的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

参照图1，示出了本申请的一种网页的加载方法实施例1的步骤流程图，具体可以包括如下步骤：

步骤101，当接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

网页的加载请求可以是指用户发出的加载某个网页的指示。例如，用户可以通过点击某链接来打开一个网页，或者在地址栏输入网址来打开一个网页等等。当用户点击某链接时，就相当于接收到了网页的加载请求；同样，当在地址栏输入某网址并点击确定按钮或按下回车键时，也相当于接收到了网页的加载请求。

在本申请的一种优选实施例中，所述加载请求中可以包括网页标识，所述步骤101具体可以包括如下子步骤：

子步骤S11，提取所述加载请求中的网页标识；

网页标识可以是能够代表一个唯一确定的网页的信息，可以包括统一资源标识符(Uniform Resource Identifier，URI)，统一资源标识符又具体可以包括统一资源定位符(Uniform Resource Locator，URL)，或者统一资源名称 (Uniform Resource Name，URN)等等。也可以包括请求加载的网页中的主题对象，例如，对于电子商务，主题对象可以为商品ID、商铺ID等等，对于新闻媒体，主题对象可以为新闻ID、专题ID等等。

子步骤S12，采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

应用本申请实施例，可以预先预定加载网页所需的网页框架数据、动态资源数据和静态资源数据，即网页标识对应的网页框架数据、动态资源数据和静态资源数据，记载在网页标识映射表中。

子步骤S13，分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

在网页标识映射表查找到所需的网页框架数据、动态资源数据和静态资源数据，即可以分别取对应的数据库中提取。

在具体实现中，网页框架数据和静态资源数据可以存储在分布式文件系统(例如内容分发网络CDN)中，动态资源数据可以存储在缓存服务器中。

在本申请的一种优选实施例中，所述网页框架数据可以包括所述网页中固定格式的数据；

所述动态资源数据可以包括所述网页中可调整的数据；

所述静态资源数据可以包括计算机语言CSS数据、脚本语言JS数据和图片数据。

在具体实现中，网页框架数据、动态资源数据和静态资源数据可以组成一个完整的网页。

网页框架数据可以是网页的基本框架，即可以为HTML源代码，对于网页上一些固定格式的数据，例如网页所属平台的LOGO(徽标或者商标)、展示图片的窗口等等。

动态资源数据可以是组成网页的其他基本数据和带有业务逻辑的模板，例如在电子商务中，可以将价格数据等经常变动的网页基本数据定义为动态资源数据。若当前登录的用户为会员，则可以加载对应的会员价格、促销活动等数据，若当前商品处于团购状态，则可以加载对应团购价格等数据，此些容易变动的且有固定格式的数据可以为带有业务逻辑的模板。

参照图2，示出了本申请的一种商品的部分网页结构示例图。如图2所示，在本示例中，在A区域中，网页框架数据可以包括两个指定大小和格式的图片框，动态资源数据可以包括两张与该图片框大小、格式对应的图片；由于商品的正常价格一般发生变化不大，而经常会有促销活动，而在促销活动中价格会经常发生变化，因此在B区域中，网页框架数据可以包括“价格：￥4018.00”，动态资源数据可以包括“参加促销：预付款￥59.00”；当该商品参加团购活动时，可以在C区域中显示当前团购状态，即C区域中的全部为动态资源数据，在团购结束后，C区域所示的动态资源数据可以不进行加载；在D区域中，动态资源数据可以包括联保的价格，即“￥88.39”，好修的价格，即“￥120.54”，30天内售出的数量，即“372”，交易成功的数量，即“0”，浏览的次数，即“225381”，其余皆可以为网页框架数据。

需要说明的是，本申请实施例可以指定除静态资源数据外的数据为网页框架数据或者动态资源数据。例如，在B区域中，可以将“价格：￥4018.00”和“参加促销：预付款￥59.00”都定义为动态资源数据。

计算机语言CSS(Cascading Style Sheets，层叠样式表单)数据是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。例如，运用计算机语言CSS数据，可以将图2所示的网页结构排版成A区域、B区域、C区域和D区域所示的位置。

脚本语言JS(JavaScript)数据是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。例如图2所示的A区域中，当用户点击小框中的图片时，可以在大框中显示对应的大图。

步骤102，采用所述网页框架数据和所述动态资源数据生成第一网页数据；

当获取到网页框架数据和动态资源数据之后，则可以进行后台的渲染。

在本发明的一种优选实施例中，所述步骤102具体可以包括如下子步骤：

子步骤S21，按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

需要说明的是，编译网页框架数据可以按照固定的模板语言进行编译，而模板语言可以有多种，对于不同模板语言，其渲染的规则是不尽相同的。

作为本申请实施例的一种优选示例，模板语言可以为Velocity模板语言。

Velocity是一个基于java的模板引擎(template engine)。当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC(Model ViewController，模型－视图－控制器)架构的web站点，也就是说，页面设计人员可以只关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity可以将java代码从web页面中分离出来，这样为web站点的长期维护提供了便利。

Velocity作为MVC框架中的V存在，和普通jsp页面有着不同，它是一种模板引擎，利用先编辑完的格式来作为大纲(即网页框架数据)，把一些需要变化的地方作为参数(即动态资源数据)传入，显示时将模板和参数合并，达到最终输出的样子。

Velocity的渲染过程中，可以使用java cc定义jjt文件生成解析器，渲染引擎读取Velocity模板文件，由解析器进行语法分析、并生成抽象语法树。然后深度遍历抽象语法树，递归的渲染每个节点，最终渲染完整个树。

在本申请的一种优选实施例中，所述网页框架数据可以包括变量名，所述动态资源可以包括所述变量名对应的值，所述子步骤S21进一步可以包括如下子步骤：

子步骤S211，启动所述Velocity模板语言对应的模板引擎；

Velocity的模板引擎在启动时，无论是采用Velocity.init()还是采用新建VelocityEngine类的方式均可以调用RuntimeInstance类中的init方法，通过设置的模板引擎属性初始化模板引擎。

子步骤S212，采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

创建VelocityContext对象，将网页框架数据中的变量名与动态资源数据中对应的值进行关联，具体可以直接将动态资源数据中对应的值传递给网页进行引用。

子步骤S213，采用所述模板引擎获取网页框架数据；

通过资源加载器(ResourceLoader)将模板文件(网页框架数据)加载到内存(转化为InputStream)，然后通过AST(Abstract Syntax Tree，语法树) 解析器将InputStream解析为一个AST。当执行 Velocity.getTemplate("template.vm")时，首先通过ResourceLoader将以字节流的形式加载template.vm文件，然后通过Parser生成如下Token集合：{[<html> <body>Hello],[$foo],[world！</body></html>]}。

子步骤S214，将关联后的动态资源数据渲染到网页框架数据中。

创建输出流(writer流)，将动态资源数据渲染到网页框架数据上，具体可以采用template.merge()进行渲染。

进一步地，当执行template.merge(context,writer)时，遍历网页框架数据对应的AST树，执行每个节点的渲染过程。如ASTText节点只是简单的将文本写入writer。ASTReference节点需要从context中获取引用的参数 paramObject的值onlyone将${paramObject}替换，并写入到writer中。Velocity 的AST中有多种节点，如ASTIdentitor等，有些需要反射机制处理。当整个 AST遍历结束，也就意味着模板渲染结束，渲染的结果写入writer流中。

当然，上述模板语言极其渲染方式只是作为示例，在实施本申请实施例时，可以根据实际情况设置其他模板语言极其渲染方式，例如JSP(JavaServer Pages)模板语言、FreeMaker模板语言等等，本申请实施例对此不加以限制。另外，除了上述模板语言极其渲染方式外，本领域技术人员还可以实际需要采用其它模板语言极其渲染方式，本申请实施例对此也不加以限制。

步骤103，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

第一网页数据和静态资源数据需要进行适应性调整，以使得浏览器正常进行渲染。

在本发明的一种优选实施例中，所述步骤103具体可以包括如下子步骤：

子步骤S31，按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

子步骤S32，将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

当网页框架数据和动态资源数据完成渲染后，可以获得网页中所有需要的静态资源数据的定义信息。按照该定义信息将对应的计算机语言CSS数据和脚本语言JS数据编排地址，则可以获得对应的CSS地址和JS地址，将 CSS地址和JS地址添加到第一网页数据中即可获得第二网页数据。

步骤104，将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

在本发明的一种优选实施例中，所述步骤104具体可以包括如下子步骤：

子步骤S41，通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

远程过程调用协议(Remote Procedure Call Protocol，RPC)是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。 RPC协议假定某些传输协议的存在，如TCP(Transmission Control Protocol，传输控制协议)或UDP(UserDatagram Protocol，用户数据包协议)，为通信程序之间携带信息数据。在OSI(OpenSystem Interconnect，开放系统互联)网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发包括网络分布式多程序在内的应用程序更加容易。

当客户端接收到第二网页数据和静态资源数据时，可以基于浏览器的规范，对第二网页数据和静态资源数据进行正常渲染。

本申请提供了统一的数据访问，在获取某些数据的同时，可以无需了解数据的来源、数据的调用方式，不用关注数据的细节能够极大的提高开发效率和降低应用对于数据的依赖性。

本申请将网页划分成网页框架数据、动态资源数据和静态资源数据，在接收到网页的加载请求时，分别对网页框架数据和动态资源数据进行渲染生成第一网页数据，再基于静态资源数据采用第一网页数据生成第二网页数据，客户端可以基于浏览器的规范对第二网页数据和静态资源数据进行正常的渲染，本申请实现了基于前后端一致的模块化方案，前后端一致采用了约定大于配置的原则，不局限于某一具体的数据格式，而是由模块开发者自行制定，减少了沟通成本，同时可以支持业务的高度复用，大幅度提升了开发效率。本申请可以完全架构于互联网系统，能够自动解析出前后端内容，可以按需同步加载，实现了异步、同步渲染，极大的提高了性能，同时大大降低了系统的资源开销，可以满足高并发的业务需求。

参照图3，示出了本申请的一种网页的加载方法实施例2的步骤流程图，具体可以包括如下步骤：

步骤301，向服务器发送网页的加载请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

步骤302，接收所述服务器返回第二网页数据和静态资源数据；

步骤303，采用所述第二网页数据和所述静态资源数据进行渲染。

在本申请的一种优选实施例中，所述网页框架数据可以包括所述网页中固定格式的数据；

所述动态资源数据可以包括所述网页中可调整的数据；

所述静态资源数据可以包括计算机语言CSS数据、脚本语言JS数据和图片数据。

则客户端(例如浏览器)渲染网页的过程可以如下：

1.当检测到用户输入网址时，浏览器向服务器发出请求加载该网址指示的网页，服务器返回对应的第二网页数据(HTML文本)和静态资源数据(计算机语言CSS数据和脚本语言JS数据)；

2.浏览器开始载入第二网页数据，当检测到＜head＞标签内有一个＜ link＞标签(CSS地址)时，则需要引用外部CSS文件(静态资源数据)；

3.浏览器继续载入HTML文本中＜body＞部分的代码，可以开始渲染网页；

4.当浏览器在HTML文本中检测到一个＜img＞标签时，需要引用了一张图片(静态资源数据)；

5.当浏览器检测到一个包含一行JavaScript代码的＜script＞标签(JS 地址)时，则立即运行JS文件(脚本语言JS数据)；

6.当检测到＜/HTML＞时，渲染完成。

为使本领域技术人员更好地理解本申请实施例，在本说明书中，将电子商务的店铺页面作为模块化方案的一种示例进行说明。

参照图4，示出了本申请的一种设备部署架构图。

客户有一个需求，需要将商铺页面中的图片的大小变大，一行显示3个商品。

当接收到这个需求后，开发者需要从发布系统中申请这个模块(商铺页面)的升级需求，然后将该功能从GIT(分布式版本控制系统)中拉取代码进行开发(重新编译或者调整网页框架数据)，开发完成后将模块化数据(网页框架数据)存储在分布式文件系统中，并在发布系统中提交发布申请；管理员接收到申请后，会去响应，响应成功后，可以发出一个消息出去，通知组件系统拉取网页框架数据、动态资源数据和静态资源数据，通知静态集群(存储静态资源数据的数据库)拉取静态资源数据，通知动态集群(存储动态资源数据的数据库)拉取动态资源数据，升级模块，同时通知缓存系统进行清除缓存操作，即完成整个升级过程。

当用户请求打开该商铺网页后，数据系统接收该请求并查找对应的网页框架数据、动态资源数据和静态资源数据。从分布式文件系统中拉取网页框架数据和静态资源，从缓存服务器(图上未示出)中拉取动态资源。在店铺系统中采用网页框架数据和动态资源数据生成第一网页数据，基于静态资源数据采用第一网页数据生成第二网页数据。通过RPC协议将第二网页数据和静态资源数据发送至组件系统(浏览器)，组件系统进行渲染。

当用户打开该店铺网页后，会显示新的效果(图片变大，一行显示3个商品)了。

参照图5，示出了本申请的一种网页的加载系统实施例1的结构框图，具体可以包括如下模块：

数据获取模块501，用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

第一网页数据生成模块502，用于采用所述网页框架数据和所述动态资源数据生成第一网页数据；

第二网页数据生成模块503，用于采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据发送模块504，用于将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

在本申请的一种优选实施例中，所述加载请求中可以包括网页标识，所述数据获取模块501可以包括如下子模块：

提取子模块，用于提取所述加载请求中的网页标识；

查找子模块，用于采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

获取子模块，用于分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

在本申请的一种优选实施例中，所述网页框架数据可以包括所述网页中固定格式的数据；

所述动态资源数据可以包括所述网页中可调整的数据；

所述静态资源数据可以包括计算机语言CSS数据、脚本语言JS数据和图片数据。

在本申请的一种优选实施例中，所述第一网页数据生成模块502可以包括如下子模块：

第一渲染子模块，用于按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

在本申请的一种优选实施例中，所述模板语言可以包括Velocity模板语言，所述网页框架数据可以包括变量名，所述动态资源可以包括所述变量名对应的值；所述第一渲染子模块进一步可以包括如下子模块：

启动子模块，用于启动所述Velocity模板语言对应的模板引擎；

关联子模块，用于采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

获取子模块，用于采用所述模板引擎获取网页框架数据；

第二渲染子模块，用于将关联后的动态资源数据渲染到网页框架数据中。

在本申请的一种优选实施例中，所述第二网页数据生成模块503可以包括如下子模块：

编排子模块，用于按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

添加子模块，用于将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

在本申请的一种优选实施例中，所述数据发送模块504可以包括如下子模块：

远程发送子模块，用于通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

参照图6，示出了本申请的一种网页的加载系统实施例2的结构框图，具体可以包括如下模块：

加载请求发送模块601，用于向服务器发送加载的网页请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据接收模块602，用于接收所述服务器返回第二网页数据和静态资源数据；

第三渲染模块603，用于采用所述第二网页数据和所述静态资源数据进行渲染。

需要说明的是，对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、系统、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，所述计算机设备包括一个或多个处理器 (CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitory media)，如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种网页的加载方法和一种网页的加载系统进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (16)

1.一种网页的加载方法，其特征在于，包括：

当接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

采用所述网页框架数据和所述动态资源数据生成第一网页数据；

采用所述第一网页数据和所述静态资源数据生成第二网页数据；

将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述加载请求中包括网页标识，所述分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据的步骤包括：

提取所述加载请求中的网页标识；

采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

3.根据权利要求1所述的方法，其特征在于，所述网页框架数据包括所述网页中固定格式的数据；

所述动态资源数据包括所述网页中可调整的数据；

所述静态资源数据包括计算机语言CSS数据、脚本语言JS数据和图片数据。

4.根据权利要求3所述的方法，其特征在于，所述采用所述网页框架数据和所述动态资源数据生成第一网页数据的步骤包括：

按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

5.根据权利要求4所述的方法，其特征在于，所述模板语言包括Velocity模板语言，所述网页框架数据包括变量名，所述动态资源包括所述变量名对应的值；

所述按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据的步骤包括：

启动所述Velocity模板语言对应的模板引擎；

采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

采用所述模板引擎获取网页框架数据；

将关联后的动态资源数据渲染到网页框架数据中。

6.根据权利要求3所述的方法，其特征在于，所述采用所述第一网页数据和所述静态资源数据生成第二网页数据的步骤包括：

按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

7.根据权利要求1或2或3或4或5或6所述的方法，其特征在于，所述将所述第二网页数据和所述静态资源数据发送至客户端的步骤包括：

通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

8.一种网页的加载方法，其特征在于，包括：

向服务器发送网页的加载请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

接收所述服务器返回第二网页数据和静态资源数据；

采用所述第二网页数据和所述静态资源数据进行渲染。

9.一种网页的加载系统，其特征在于，包括：

数据获取模块，用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据；

第一网页数据生成模块，用于采用所述网页框架数据和所述动态资源数据生成第一网页数据；

第二网页数据生成模块，用于采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据发送模块，用于将所述第二网页数据和所述静态资源数据发送至客户端；所述客户端用于对所述第二网页数据和所述静态资源数据进行渲染。

10.根据权利要求9所述的系统，其特征在于，所述加载请求中包括网页标识，所述数据获取模块包括：

提取子模块，用于提取所述加载请求中的网页标识；

查找子模块，用于采用所述网页标识在预置的网页标识映射表中查找所述网页对应的网页框架数据、动态资源数据和静态资源数据；

获取子模块，用于分别获取所述网页框架数据、所述动态资源数据和所述静态资源数据。

11.根据权利要求9所述的系统，其特征在于，所述网页框架数据包括所述网页中固定格式的数据；

所述动态资源数据包括所述网页中可调整的数据；

所述静态资源数据包括计算机语言CSS数据、脚本语言JS数据和图片数据。

12.根据权利要求11所述的系统，其特征在于，所述第一网页数据生成模块包括：

第一渲染子模块，用于按照编译所述网页框架数据的模板语言所对应的渲染规则，对所述网页框架数据和所述动态资源数据进行渲染，生成第一网页数据。

13.根据权利要求12所述的系统，其特征在于，所述模板语言包括Velocity模板语言，所述网页框架数据包括变量名，所述动态资源包括所述变量名对应的值；所述第一渲染子模块包括：

启动子模块，用于启动所述Velocity模板语言对应的模板引擎；

关联子模块，用于采用所述模板引擎将网页框架数据中的变量名与动态资源数据中对应的值进行关联；

获取子模块，用于采用所述模板引擎获取网页框架数据；

第二渲染子模块，用于将关联后的动态资源数据渲染到网页框架数据中。

14.根据权利要求11所述的系统，其特征在于，所述第二网页数据生成模块包括：

编排子模块，用于按照所述第一网页数据对所述计算机语言CSS数据和脚本语言JS数据编排地址，获得对应的CSS地址和JS地址；

添加子模块，用于将所述CSS地址和所述JS地址添加到所述第一网页数据中生成第二网页数据。

15.根据权利要求9或10或11或12或13或14所述的系统，其特征在于，所述数据发送模块包括：

远程发送子模块，用于通过远程过程调用协议将所述第二网页数据和所述静态资源数据发送至客户端。

16.一种网页的加载系统，其特征在于，包括：

加载请求发送模块，用于向服务器发送加载的网页请求；所述服务器用于在接收到网页的加载请求时，分别获取所述加载请求对应的网页框架数据、动态资源数据和静态资源数据，采用所述网页框架数据和所述动态资源数据生成第一网页数据，以及，采用所述第一网页数据和所述静态资源数据生成第二网页数据；

数据接收模块，用于接收所述服务器返回第二网页数据和静态资源数据；

第三渲染模块，用于采用所述第二网页数据和所述静态资源数据进行渲染。