CN107220371A - 页面显示方法、装置及存储介质 - Google Patents

Abstract

本公开是关于一种页面显示方法、装置及存储介质，属于计算机技术领域。页面显示装置包括JavaScript执行层、转换层及原生层，方法包括：转换层将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，并将多个第一视图发送至原生层；当资源池中缓存有第一视图的视图结构数据对应的视图结构，原生层从资源池中获取视图结构，并将第一视图的视图数据添加到视图结构中，以实现页面显示。本公开原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

Description

页面显示方法、装置及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面显示方法、装置及存储介质。

背景技术

随着计算机技术的发展，为了方便用户使用，各种网页应用被开发出来。由于用户在浏览网页应用的页面时，页面的显示效果直接影响了用户的浏览体验，因此，为了提高用户的浏览体验，如何进行页面显示成为本领域人员较为关注的问题。

相关技术在进行页面显示时，主要借助页面显示装置，该页面显示装置包括JavaScript执行层和浏览器内核，具体显示过程为：JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件；在执行JavaScript文件的过程中，JavaScript执行层生成虚拟树形结构；JavaScript执行层将虚拟树形结构转换为浏览器内核可识别的树形结构，并将该树形结构发送至浏览器内核；浏览器内核根据该树形结构进行页面显示。

发明内容

本公开提供一种页面显示方法、装置及存储介质。

根据本公开实施例的第一方面，提供一种页面显示方法，所述方法应用于页面显示装置中，所述页面显示装置包括JavaScript执行层、转换层及原生层，所述方法包括：

所述JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件；

在执行所述JavaScript文件的过程中，所述JavaScript执行层生成虚拟树形结构，并向所述转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

在本公开的另一个实施例中，所述当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，包括：

所述原生层从所述视图结构数据中获取目标视图结构标识，并根据所述目标视图结构标识，从所述资源池中查找结构标识与所述目标结构标识相同的视图结构；

当查找到结构标识与所述目标结构标识相同的视图结构，所述原生层从所述资源池中获取所述视图结构。

在本公开的另一个实施例中，所述将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示，包括：

所述原生层根据所述第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将所述视图结构整合到所绘制的视图结构中，得到所述指定网页对应的视图结构；

所述原生层将所述第一视图的视图数据及其他第一视图的视图数据添加到所述指定网页对应的视图结构中，得到所述指定网页对应的原生页面；

所述原生层显示所述原生页面。

在本公开的另一个实施例中，所述方法还包括：

当所述第一视图处于隐藏状态时，所述原生层获取所述第一视图的视图结构数据对应的视图结构，并将所述视图结构存储到所述资源池中。

在本公开的另一个实施例中，所述向所述转换层发送第一绘制消息，包括：

所述JavaScript执行层调用与所述转换层之间的通信接口向所述转换层发送第一绘制消息。

在本公开的另一个实施例中，所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，包括：

基于预先构建的规则数据库，所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，所述规则数据库中存储有JavaScript语句与视图之间的对应关系。

在本公开的另一个实施例中，所述方法还包括：

当获取到更新的JavaScript语句和更新的视图，所述转换层根据所述更新的JavaScript语句和所述更新的视图，对所述规则数据库进行更新。

在本公开的另一个实施例中，所述方法还包括：

当在所述指定网页上检测到触发操作时，所述原生层向所述JavaScript执行层发送通知消息，所述通知消息包括变更的元素标识；

所述JavaScript执行层根据所述变更的元素标识，修改所述虚拟树形结构，并向所述转换层发送第二绘制消息，所述第二绘制消息包括所述修改后的虚拟树形结构；

所述转换层将所述修改后的虚拟树形结构中的多个元素转换为所述原生层可识别的多个第二视图，并将所述多个第二视图发送至所述原生层，由所述原生层进行页面显示。

在本公开的另一个实施例中，所述原生层向所述JavaScript执行层发送通知消息，包括：

所述原生层调用所述与所述JavaScript执行层之间的通信接口向所述JavaScript执行层发送通知消息。

根据本公开实施例的第二方面，提供一种页面显示装置，所述页面显示装置包括JavaScript执行层、转换层及原生层；

所述JavaScript执行层，用于对请求显示的指定网页进行解析，得到JavaScript文件；

所述JavaScript执行层，用于在执行所述JavaScript文件的过程中，生成虚拟树形结构，并向所述转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层，用于将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，所述原生层，用于当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

在本公开的另一个实施例中，所述原生层，还用于从所述视图结构数据中获取目标视图结构标识，并根据所述目标视图结构标识，从所述资源池中查找结构标识与所述目标结构标识相同的视图结构；

所述原生层，还用于当查找到结构标识与所述目标结构标识相同的视图结构，从所述资源池中获取所述视图结构。

在本公开的另一个实施例中，所述原生层，还用于根据所述第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将所述视图结构整合到所绘制的视图结构中，得到所述指定网页对应的视图结构；

所述原生层，还用于将所述第一视图的视图数据及其他第一视图的视图数据添加到所述指定网页对应的视图结构中，得到所述指定网页对应的原生页面；

所述原生层，还用于显示所述原生页面。

在本公开的另一个实施例中，所述原生层，还用于当所述第一视图处于隐藏状态时，获取所述第一视图的视图结构数据对应的视图结构，并将所述视图结构存储到所述资源池中。

在本公开的另一个实施例中，所述JavaScript执行层，还用于调用与所述转换层之间的通信接口向所述转换层发送第一绘制消息。

在本公开的另一个实施例中，所述转换层，还用于基于预先构建的规则数据库，将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，所述规则数据库中存储有JavaScript语句与视图之间的对应关系。

在本公开的另一个实施例中，所述转换层，还用于当获取到更新的JavaScript语句和更新的视图，根据所述更新的JavaScript语句和所述更新的视图，对所述规则数据库进行更新。

在本公开的另一个实施例中，所述原生层，还用于当在所述指定网页上检测到触发操作时，向所述JavaScript执行层发送通知消息，所述通知消息包括变更的元素标识；

所述JavaScript执行层，还用于根据所述变更的元素标识，修改所述虚拟树形结构，并向所述转换层发送第二绘制消息，所述第二绘制消息包括所述修改后的虚拟树形结构；

所述转换层，还用于将所述修改后的虚拟树形结构中的多个元素转换为所述原生层可识别的多个第二视图，并将所述多个第二视图发送至所述原生层，由所述原生层进行页面显示。

在本公开的另一个实施例中，所述原生层，还用于调用所述与所述JavaScript执行层之间的通信接口向所述JavaScript执行层发送通知消息。

根据本公开实施例的第三方面，提供了一种页面显示装置，包括：

处理器；

用于存储处理器可执行的指令的存储器；

其中，所述处理器被配置为：

JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件；

在执行所述JavaScript文件的过程中，所述JavaScript执行层生成虚拟树形结构，并向转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层将所述虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

根据本公开实施例的第四方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令至少一条指令，所述至少一条指令由处理器加载并执行以实现第一方面所述的页面显示方法。

本公开的实施例提供的技术方案可以包括以下有益效果：

原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种页面显示方法所涉及的实施环境。

图2是根据一示例性实施例示出的一种页面显示方法的流程图。

图3是根据一示例性实施例示出的一种页面显示方法的流程图。

图4是根据一示例性实施例示出的一种页面显示装置的框图。

图5是根据一示例性实施例示出的一种页面显示装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

参见图1，其示出了本公开实施例提供的页面显示方法所涉及的实施环境，该实施环境包括：终端101。

其中，终端101可以为智能手机、平板电脑、笔记本电脑等设备，本公开实施例不对终端101的产品形态进行具体限定。该终端101能够运行并显示网页应用对应的页面。具体地，终端可通过操作系统提供的全局搜索框内搜索网页应用，进而在检测到对该网页应用的点击操作后，运行并显示该网页应用对应的页面；该终端101还可在检测到对网页应用的快捷图标的点击操作后，运行并显示该网页应用对应的页面。为了提高显示效果，终端101包括页面显示装置，该页面显示装置包括JavaScript执行层、转换层及原生层。

其中，JavaScript执行层为终端操作系统提供的、能够执行JavaScript语句的逻辑层。该JavaScript执行层能够对网页进行解析，得到JavaScript文件，并根据该JavaScript文件生成虚拟树形结构；该JavaScript执行层还能够对虚拟树形结构进行修改，以使修改后的虚拟树形结构满足用户当前的显示需求。

转换层为终端操作系统提供的、能够进行语句转换的业务层，该转换层可以为操作系统内一个独立的业务层，也可以为原生层内负责语句转换的一个子层，本公开实施例不对转换层作具体的限定。该转换层内存储有JavaScript语句与视图之间的对应关系，能够将JavaScript执行层发送的虚拟树形结构转换成原生层可识别的视图，从而实现了web页面到原生页面的转换。

原生层为终端操作系统提供的、能够进行页面渲染的业务层。该原生层能够调用操作系统提供的通信接口，以触发操作系统进行页面的渲染；该原生层还能够在检测到对当前显示的页面的触发操作后，向JavaScript执行层发送通知消息，以使JavaScript执行层修改虚拟树形结构，重新执行页面渲染逻辑。

上述实施环境还可以包括服务器102。该服务器102为网页应用对应的后台服务器，该服务器102用于向终端101提供HTML5(HyperText Markup Language，超文本标记语言)数据和JavaScript文件。

在本公开实施例中，终端101与服务器102之间可通过有线网络或无线网络进行通信，从而保证终端101能够从服务器102上获取显示网页应用所需的数据。

图2是根据一示例性实施例示出的一种页面显示方法的流程图，如图2所示，页面显示方法用于终端中，该终端包括页面显示装置，该页面显示装置包括JavaScript执行层、转换层及原生层。该方法包括以下步骤。

在步骤S201中，JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件。

在步骤S202中，在执行JavaScript文件的过程中，JavaScript执行层生成虚拟树形结构，并向转换层发送第一绘制消息。

其中，第一绘制消息包括虚拟树形结构，虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述。

在步骤S203中，转换层将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，并将多个第一视图发送至原生层。

其中，每个第一视图包括视图数据和视图结构数据。

在步骤S204中，对于任一第一视图，当资源池中缓存有第一视图的视图结构数据对应的视图结构，原生层从资源池中获取视图结构，并将第一视图的视图数据添加到视图结构中，以实现页面显示。

本公开实施例提供的方法，原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

在本公开的另一个实施例中，当资源池中缓存有第一视图的视图结构数据对应的视图结构，原生层从资源池中获取视图结构，包括：

原生层从视图结构数据中获取目标视图结构标识，并根据目标视图结构标识，从资源池中查找结构标识与目标结构标识相同的视图结构；

当查找到结构标识与目标结构标识相同的视图结构，原生层从资源池中获取视图结构。

在本公开的另一个实施例中，将第一视图的视图数据添加到视图结构中，以实现页面显示，包括：

原生层根据第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将视图结构整合到所绘制的视图结构中，得到指定网页对应的视图结构；

原生层将第一视图的视图数据及其他第一视图的视图数据添加到指定网页对应的视图结构中，得到指定网页对应的原生页面；

原生层显示原生页面。

在本公开的另一个实施例中，该方法还包括：

当第一视图处于隐藏状态时，原生层获取第一视图的视图结构数据对应的视图结构，并将视图结构存储到资源池中。

在本公开的另一个实施例中，向转换层发送第一绘制消息，包括：

JavaScript执行层调用与转换层之间的通信接口向转换层发送第一绘制消息。

在本公开的另一个实施例中，转换层将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，包括：

基于预先构建的规则数据库，转换层将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，规则数据库中存储有JavaScript语句与视图之间的对应关系。

在本公开的另一个实施例中，该方法还包括：

当获取到更新的JavaScript语句和更新的视图，转换层根据更新的JavaScript语句和更新的视图，对规则数据库进行更新。

在本公开的另一个实施例中，该方法还包括：

当在指定网页上检测到触发操作时，原生层向JavaScript执行层发送通知消息，通知消息包括变更的元素标识；

JavaScript执行层根据变更的元素标识，修改虚拟树形结构，并向转换层发送第二绘制消息，第二绘制消息包括修改后的虚拟树形结构；

转换层将修改后的虚拟树形结构中的多个元素转换为原生层可识别的多个第二视图，并将多个第二视图发送至原生层，由原生层进行页面显示。

在本公开的另一个实施例中，原生层向JavaScript执行层发送通知消息，包括：

原生层调用与JavaScript执行层之间的通信接口向JavaScript执行层发送通知消息。

上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

图3是根据一示例性实施例示出的一种页面显示方法的流程图，如图3所示，页面显示方法用于终端中，该终端包括页面显示装置，该页面显示装置包括JavaScript执行层、转换层及原生层。该方法包括以下步骤。

在步骤S301中，JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件。

其中，指定网页为网页应用中的一个网页，该指定网页可以为网页应用中一级网页，可以为网页应用中的二级以上网页。当指定网页为一级网页时，指定网页源代码在获取时，可采用如下两种方式：

第一种方式、在浏览器启动的过程中，用户可根据自身的阅读需求，借助鼠标等设备在浏览器或操作系统的全局搜索框中输入网页应用的名称，当检测到用户对终端的浏览器或全局搜索框上所显示的网页应用链接的点击操作时，终端生成对指定网页的显示请求，在对指定网页的显示请求的触发下，终端可从服务器上获取指定网页源代码。其中，对指定网页的显示请求中至少携带指定网页的属性信息，包括网页标识、网页类型、网页大小等等。指定网页源代码包括JavaScript代码和HTML5数据。

第二种方式、如果终端本地存储器中存储有该指定网页链接，例如，桌面上显示有该指定网页对应的快捷图标等，则终端可在检测到用户对该快捷图标的点击操作时，生成对指定网页的显示请求，在对指定网页的显示请求的触发下，终端可从服务器上获取该指定网页源代码。

当指定网页为二级以上网页时，指定网页源代码在获取时，可采用如下方式：当检测到对网页应用中一级网页上任一条目(该条目为具有网页链接性质的标题、图标等)的点击操作时，终端生成对指定网页的显示请求，在对指定网页的显示请求的触发下，终端可从服务器上获取指定网页的源代码。

在对指定网页显示请求的触发下，终端内的JavaScript执行层对请求显示的指定网页进行JavaScript解析，得到JavaScript文件，该JavaScript文件中包括整个页面显示过程的逻辑代码。

在步骤S302中，在执行JavaScript文件的过程中，JavaScript执行层生成虚拟树形结构。

在执行JavaScript文件的过程中，JavaScript执行层可对HTML5数据进行HTML解析，得到虚拟树形结构。该虚拟树形结构包括多个元素。其中，元素为指定网页中用于描述网页属性信息、网页内容等的数据，且每个元素均采用JavaScript语句进行描述。在本公开实施例中，虚拟树形结构可以为VDOM(Virtual Document Object Model，文档对象模型)树。

在步骤S303中，JavaScript执行层调用与转换层之间的通信接口向转换层发送第一绘制消息。

由于虚拟树形结构中每个元素均采用JavaScript语句进行描述，而JavaScript语句无法被原生层识别，这使得相关技术在获取到虚拟树形结构之后，只能将虚拟树形结构转换为浏览器内核可识别的树形结构，进而由浏览器内核渲染成web页面进行显示。由于该过程所显示的页面为web页面，因而页面显示效果不佳。

为了提高页面显示效果，最大限度地还原页面的真实形态，同时为用户营销一种安装该网页应用的真实体验，本公开实施例提供的方法，在生成虚拟树形结构之后，JavaScript执行层还将生成第一绘制消息，进而向转换层发送第一绘制消息，该第一绘制消息包括虚拟树形结构等，用于触发转换层进行语句转换，从而显示指定网页对应的原生页面。进一步地，本公开实施例还提供了一种通信接口，该种通信接口能够实现JavaScript执行层与转换层之间的通信，基于该种通信接口，JavaScript执行层在向转换层发送第一绘制消息时，可调用与转换层之间的通信接口进行发送。

在步骤S304中，转换层将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图。

对于很多应用，研发人员在开发时通常会开发两种类型，一种是无需安装的网页应用，一种是需要安装的应用，这样，对于同一应用，就存在浏览器内核能够识别的HTML5数据和JavaScript代码、以及终端原生层能够识别的视图。在实际使用过程中，研发人员很难获知用户具体使用哪种类型的应用，因此，研发人员通常会将HTML5数据、JavaScript文件及视图一同打包在所开发的应用中。这样，当用户浏览网页应用对应的网页时，终端内的转换层可从JavaScript执行层解析后的数据中，获取JavaScript语句和视图。基于所获取到的JavaScript语句和视图，转换层可建立一个规则数据库。该规则数据库中存储有JavaScript语句与视图之间的对应关系。为了便于后续应用，转换层还将存储所建立的规则数据库。

基于预先构建的规则数据库，转换层在将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图时，可从规则数据库中获取虚拟树形结构中用于描述每个元素的JavaScript语句对应的视图，并将获取到的视图作为第一视图。其中，第一视图包括视图数据和视图结构数据，该视图数据用于确定该第一视图对应的页面内容，该视图结构数据用于确定第一视图对应的页面布局。

由于JavaScript语句并不是固定不变的，为了保证规则数据库的实时有效性，当获取到更新的JavaScript语句和更新的视图后，转换层还将根据更新的JavaScript语句和更新的视图，对规则数据库进行更新。

在步骤S305中，转换层将多个第一视图发送至原生层。

本公开实施例提供了一种通信接口，该种通信接口能够实现转换层与原生层之间的通信，基于该种通信接口，转换层可将虚拟树形结构中的多个元素所转换的多个第一视图发送至原生层，进而由原生层进行页面显示。

在步骤S306中，对于任一第一视图，当资源池中缓存有第一视图的视图结构数据对应的视图结构，原生层从资源池中获取视图结构，并将第一视图的视图数据添加到视图结构中，以实现页面显示。

本公开实施例中，原生层维护多个资源池，每个资源池用于存储一种类型的视图结构。当采用本公开实施例提供的方法进行页面显示时，如果因用户的触发操作任一视图由显示状态切换到隐藏状态时，原生层将获取该视图的视图数据对应的视图结构，并将该视图结构存储到资源池中。由于网页布局千变万化，相应地网页对应的视图结构也有很多种，为了便于在页面显示过程中查找能够复用的视图结构，原生层获取到视图结构后，可按照视图结构标识将视图结构存储到资源池中。其中，视图结构标识用于标识视图的结构，可在网页应用开发过程中由开发人员设置，且不同的视图结构对应不同的视图结构标识。

在本公开实施例中，原生层接收到转换层发送的第一视图后，原生层并不会直接绘制该第一视图，而是判断资源池中是否存储有该第一视图的视图结构数据对应的视图结构，进而根据资源池中是否存储有该第一视图的视图结构数据对应的视图结构，采用不同的方法获取对应的视图结构。具体实施时，原生层可从视图结构数据中获取目标视图结构标识，并根据目标视图结构标识，从资源池中查找结构标识与目标结构标识相同的视图结构，当查找到结构标识与目标结构标识相同的视图结构，原生层从资源池中获取视图结构；当未查找到结构标识与目标结构标识相同的视图结构，原生层可根据第一视图的视图结构数据，绘制对应的视图结构。考虑到实际显示过程中，网页形态的多样性，同一视图结构标识可能对应多个视图结构，这样，原生层在从资源池中获取视图结构时，可随机获取一个视图结构，在后续显示过程中，如果无法正常显示，可从资源池中获取其他视图结构，以避免影响用户的体验。

进一步地，当原生层从资源池中获取该视图结构后，资源池中将不再缓存该视图结构，也即是，本公开的资源池中缓存的是已绘制但当前未使用的视图结构。

当从资源池中获取到视图结构后，原生层将第一视图的视图数据添加到视图结构中，以实现页面显示。具体实施时，可采用如下步骤S3061～S3063：

S3061、原生层根据第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将视图结构整合到所绘制的视图结构中，得到指定网页对应的视图结构。

在实际整合时，可根据第一视图与其他第一视图之间的位置关系进行整合。

S3062、原生层将该第一视图的视图数据及其他第一视图的视图数据添加到指定网页对应的视图结构中，得到指定网页对应的原生页面。

原生层通过调用操作系统Native GUI(Graphical User Interface，图形用户界面)的API(Application Programming Interface，应用程序编程接口)对指定网页对应的视图结构进行渲染，得到指定网页布局，进而将每个第一视图的视图数据绘制到视图结构对应的网页布局中，得到指定网页对应的原生页面。

S3063、原生层显示原生页面。

需要说明的是：上述步骤S3061～S3063以复用一个第一视图对应的视图结构为例，实际应用中，如果多个第一视图的视图结构可以复用，则可复用多个第一视图的视图结构，对于复用的每个第一视图的视图结构，均可按照上述步骤S3061～S3063进行页面显示。

在本公开的另一个实施例中，因用户的操作，当第一视图由显示状态切换到隐藏状态时，原生层可获取该第一视图的视图结构数据对应的视图结构，并将视图结构存储到资源池中，以在后续进行页面显示时复用。

在步骤S307中，当在指定网页上检测到触发操作时，原生层调用与JavaScript执行层之间的通信接口向JavaScript执行层发送通知消息。

其中，触发操作包括但不限于滑动操作和点击操作等。在指定网页对应的原生页面的显示过程中，当检测到对该原生页面的滑动操作时，或者检测到对该原生页面上任一网页链接的点击操作时，原生页面上所显示的内容将发生变化，此时原生层将向JavaScript执行层发送通知消息，该通知消息用于重新触发上述页面显示逻辑，以使所显示的页面满足用户当前的浏览需求。其中，通知消息包括变更的元素标识及操作类型，该操作类型包括增加操作、删除操作等等。

上述原生层在向JavaScript执行层发送通知消息时，可调用与JavaScript执行层之间的通信接口向JavaScript执行层发送通知消息。

在步骤S308中，JavaScript执行层根据变更的元素标识，修改虚拟树形结构，并向转换层发送第二绘制消息。

当接收到通知消息后，JavaScript执行层按照对变更的元素标识对应元素的操作类型，修改虚拟树形结构。例如，如果操作类型为删除操作，则JavaScript执行层将删除虚拟树形结构中该元素标识对应元素；如果操作类型为增加操作，则JavaScript执行层将增加虚拟树形机构中该元素标识对应元素。

基于修改后的修改虚拟树形结构，JavaScript执行层将生成第二绘制消息，该第二绘制消息包括修改后的虚拟树形结构等，进而通过调用与转换层之间的通信接口向转换层发送第二绘制消息。

在步骤S309中，转换层将修改后的虚拟树形结构中的多个元素转换为原生层可识别的多个第二视图，并将多个第二视图发送至原生层，由原生层进行页面显示。

当接收到第二绘制消息后，转换层基于预先构建的规则数据库，将修改后的虚拟树形结构中的多个元素转换为原生层可识别的多个第二视图。

此处需要说明的是，第一视图和第二视图仅为了说明页面显示内容变化时，不同的元素所对应的视图将发生变化，实际上，触发操作前后，页面上同一元素对应的第一视图和第二视图是相同的。

当获取到多个第二视图后，转换层通过调用与原生层之间的通信接口将多个第二视图发送至原生层，进而由原生层根据第二视图进行页面显示。原生层在根据转换层发送的多个第二视图进行页面显示时，可采用如下方式：原生层获取变更的元素标识对应的第一视图，并判断资源池中是否缓存有变更的元素标识对应的第一视图，当资源池中缓存有该第一视图的视图结构数据对应的视图结构，原生层从资源池中获取该视图结构，同时原生层获取未变更的元素标识对应的视图结构，该视图结构内已添加了视图数据，进而将获取到的视图结构和未变更的元素标识对应的视图结构进行整合，得到变更后的指定网页对应的视图结构，进而将变更的视图元素标识对应的第一视图的视图数据添加到相应的视图结构中，得到变更后的指定网页对应的原生页面。

本公开实施例提供的方法，原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

图4是根据一示例性实施例示出的一种页面显示装置示意图。参照图4，该页面显示装置包括：JavaScript执行层、转换层及原生层。

JavaScript执行层401被配置为对请求显示的指定网页进行解析，得到JavaScript文件；

JavaScript执行层被配置为在执行JavaScript文件的过程中，生成虚拟树形结构，并向转换层402发送第一绘制消息，该第一绘制消息包括虚拟树形结构，虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

转换层402被配置为将虚拟树形结构中的多个元素转换为原生层403可识别的多个第一视图，并将多个第一视图发送至原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，原生层403被配置为当资源池中缓存有第一视图的视图结构数据对应的视图结构，从资源池中获取视图结构，并将第一视图的视图数据添加到视图结构中，以实现页面显示。

在本公开的另一个实施例中，原生层403被配置为从视图结构数据中获取目标视图结构标识，并根据目标视图结构标识，从资源池中查找结构标识与目标结构标识相同的视图结构；

原生层403被配置为当查找到结构标识与目标结构标识相同的视图结构，从资源池中获取视图结构。

在本公开的另一个实施例中，原生层403被配置为根据第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将视图结构整合到所绘制的视图结构中，得到指定网页对应的视图结构；

原生层403被配置为将第一视图的视图数据及其他第一视图的视图数据添加到指定网页对应的视图结构中，得到指定网页对应的原生页面；

原生层403被配置为显示原生页面。

在本公开的另一个实施例中，原生层403被配置为当第一视图处于隐藏状态时，获取第一视图的视图结构数据对应的视图结构，并将视图结构存储到资源池中。

在本公开的另一个实施例中，JavaScript执行层401被配置为调用与转换层402之间的通信接口向转换层发送第一绘制消息。

在本公开的另一个实施例中，转换层402被配置为基于预先构建的规则数据库，将虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，该规则数据库中存储有JavaScript语句与视图之间的对应关系。

在本公开的另一个实施例中，转换层402被配置为当获取到更新的JavaScript语句和更新的视图，根据更新的JavaScript语句和更新的视图，对规则数据库进行更新。

在本公开的另一个实施例中，原生层403被配置为当在指定网页上检测到触发操作时，向JavaScript执行层发送通知消息，通知消息包括变更的元素标识；

JavaScript执行层401被配置为根据变更的元素标识，修改虚拟树形结构，并向转换层发送第二绘制消息，该第二绘制消息包括修改后的虚拟树形结构；

转换层402被配置为将修改后的虚拟树形结构中的多个元素转换为原生层可识别的多个第二视图，并将多个第二视图发送至原生层，由原生层进行页面显示。

在本公开的另一个实施例中，原生层402被配置为调用与JavaScript执行层之间的通信接口向JavaScript执行层发送通知消息。

本公开实施例提供的装置，原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图5是根据一示例性实施例示出的一种用于页面显示的装置500的框图。例如，装置500可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图5，装置500可以包括以下一个或多个组件：处理组件502，存储器504，电源组件506，多媒体组件508，音频组件510，输入/输出(I/O)接口512，传感器组件514，以及通信组件516。

处理组件502通常控制装置500的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件502可以包括一个或多个处理器520来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件502可以包括一个或多个模块，便于处理组件502和其他组件之间的交互。例如，处理组件502可以包括多媒体模块，以方便多媒体组件508和处理组件502之间的交互。

存储器504被配置为存储各种类型的数据以支持在装置500的操作。这些数据的示例包括用于在装置500上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器504可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件506为装置500的各种组件提供电力。电源组件506可以包括电源管理系统，一个或多个电源，及其他与为装置500生成、管理和分配电力相关联的组件。

多媒体组件508包括在所述装置500和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件508包括一个前置摄像头和/或后置摄像头。当装置500处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件510被配置为输出和/或输入音频信号。例如，音频组件510包括一个麦克风(MIC)，当装置500处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器504或经由通信组件516发送。在一些实施例中，音频组件510还包括一个扬声器，用于输出音频信号。

I/O接口512为处理组件502和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件514包括一个或多个传感器，用于为装置500提供各个方面的状态评估。例如，传感器组件514可以检测到装置500的打开/关闭状态，组件的相对定位，例如所述组件为装置500的显示器和小键盘，传感器组件514还可以检测装置500或装置500一个组件的位置改变，用户与装置500接触的存在或不存在，装置500方位或加速/减速和装置500的温度变化。传感器组件514可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件514还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件514还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件516被配置为便于装置500和其他设备之间有线或无线方式的通信。装置500可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件516经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件516还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置500可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器504，上述指令可由装置500的处理器520执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本公开实施例提供的装置，原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

本公开实施例提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令至少一条指令，所述至少一条指令由处理器加载并执行以实现图2或图3所述的页面显示方法。

本公开实施例提供的计算机可读存储介质，原生层在接收到第一视图后，将判断资源池中是否缓存有第一视图的视图结构数据对应的视图结构，如果资源池中缓存有对应的视图结构，则无需重新绘制，可根据缓存的视图结构进行页面显示。该过程缩短了页面绘制时间，降低了系统内存占用量，大大提升了系统性能。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (20)

1.一种页面显示方法，其特征在于，所述方法应用于页面显示装置中，所述页面显示装置包括JavaScript执行层、转换层及原生层，所述方法包括：

所述JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件；

在执行所述JavaScript文件的过程中，所述JavaScript执行层生成虚拟树形结构，并向所述转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

2.根据权利要求1所述的方法，其特征在于，所述当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，包括：

所述原生层从所述视图结构数据中获取目标视图结构标识，并根据所述目标视图结构标识，从所述资源池中查找结构标识与所述目标结构标识相同的视图结构；

当查找到结构标识与所述目标结构标识相同的视图结构，所述原生层从所述资源池中获取所述视图结构。

3.根据权利要求1所述的方法，其特征在于，所述将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示，包括：

所述原生层根据所述第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将所述视图结构整合到所绘制的视图结构中，得到所述指定网页对应的视图结构；

所述原生层将所述第一视图的视图数据及其他第一视图的视图数据添加到所述指定网页对应的视图结构中，得到所述指定网页对应的原生页面；

所述原生层显示所述原生页面。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

当所述第一视图处于隐藏状态时，所述原生层获取所述第一视图的视图结构数据对应的视图结构，并将所述视图结构存储到所述资源池中。

5.根据权利要求1所述的方法，其特征在于，所述向所述转换层发送第一绘制消息，包括：

所述JavaScript执行层调用与所述转换层之间的通信接口向所述转换层发送第一绘制消息。

6.根据权利要求1所述的方法，其特征在于，所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，包括：

基于预先构建的规则数据库，所述转换层将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，所述规则数据库中存储有JavaScript语句与第一视图之间的对应关系。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

当获取到更新的JavaScript语句和更新的第一视图，所述转换层根据所述更新的JavaScript语句和所述更新的第一视图，对所述规则数据库进行更新。

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

当在所述指定网页上检测到触发操作时，所述原生层向所述JavaScript执行层发送通知消息，所述通知消息包括变更的元素标识；

所述JavaScript执行层根据所述变更的元素标识，修改所述虚拟树形结构，并向所述转换层发送第二绘制消息，所述第二绘制消息包括所述修改后的虚拟树形结构；

所述转换层将所述修改后的虚拟树形结构中的多个元素转换为所述原生层可识别的多个第二视图，并将所述多个第二视图发送至所述原生层，由所述原生层进行页面显示。

9.根据权利要求8所述的方法，其特征在于，所述原生层向所述JavaScript执行层发送通知消息，包括：

所述原生层调用所述与所述JavaScript执行层之间的通信接口向所述JavaScript执行层发送通知消息。

10.一种页面显示装置，其特征在于，所述页面显示装置包括JavaScript执行层、转换层及原生层；

所述JavaScript执行层，用于对请求显示的指定网页进行解析，得到JavaScript文件；

所述JavaScript执行层，用于在执行所述JavaScript文件的过程中，生成虚拟树形结构，并向所述转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层，用于将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，所述原生层，用于当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

11.根据权利要求10所述的装置，其特征在于，所述原生层，还用于从所述视图结构数据中获取目标视图结构标识，并根据所述目标视图结构标识，从所述资源池中查找结构标识与所述目标结构标识相同的视图结构；

所述原生层，还用于当查找到结构标识与所述目标结构标识相同的视图结构，从所述资源池中获取所述视图结构。

12.根据权利要求10所述的装置，其特征在于，所述原生层，还用于根据所述第一视图之外的其他第一视图的视图结构数据，绘制其他第一视图对应的视图结构，并将所述视图结构整合到所绘制的视图结构中，得到所述指定网页对应的视图结构；

所述原生层，还用于将所述第一视图的视图数据及其他第一视图的视图数据添加到所述指定网页对应的视图结构中，得到所述指定网页对应的原生页面；

所述原生层，还用于显示所述原生页面。

13.根据权利要求10所述的装置，其特征在于，所述原生层，还用于当所述第一视图处于隐藏状态时，获取所述第一视图的视图结构数据对应的视图结构，并将所述视图结构存储到所述资源池中。

14.根据权利要求10所述的装置，其特征在于，所述JavaScript执行层，还用于调用与所述转换层之间的通信接口向所述转换层发送第一绘制消息。

15.根据权利要求10所述的装置，其特征在于，所述转换层，还用于基于预先构建的规则数据库，将所述虚拟树形结构中的多个元素转换为所述原生层可识别的多个第一视图，所述规则数据库中存储有JavaScript语句与视图之间的对应关系。

16.根据权利要求15所述的装置，其特征在于，所述转换层，还用于当获取到更新的JavaScript语句和更新的视图，根据所述更新的JavaScript语句和所述更新的视图，对所述规则数据库进行更新。

17.根据权利要求10所述的装置，其特征在于，所述原生层，还用于当在所述指定网页上检测到触发操作时，向所述JavaScript执行层发送通知消息，所述通知消息包括变更的元素标识；

所述JavaScript执行层，还用于根据所述变更的元素标识，修改所述虚拟树形结构，并向所述转换层发送第二绘制消息，所述第二绘制消息包括所述修改后的虚拟树形结构；

所述转换层，还用于将所述修改后的虚拟树形结构中的多个元素转换为所述原生层可识别的多个第二视图，并将所述多个第二视图发送至所述原生层，由所述原生层进行页面显示。

18.根据权利要求17所述的装置，其特征在于，所述原生层，还用于调用所述与所述JavaScript执行层之间的通信接口向所述JavaScript执行层发送通知消息。

19.一种页面显示装置，其特征在于，包括：

处理器；

用于存储处理器可执行的指令的存储器；

其中，所述处理器被配置为：

JavaScript执行层对请求显示的指定网页进行解析，得到JavaScript文件；

在执行所述JavaScript文件的过程中，所述JavaScript执行层生成虚拟树形结构，并向转换层发送第一绘制消息，所述第一绘制消息包括所述虚拟树形结构，所述虚拟树形结构包括多个元素，每个元素均采用JavaScript语句进行描述；

所述转换层将所述虚拟树形结构中的多个元素转换为原生层可识别的多个第一视图，并将所述多个第一视图发送至所述原生层，每个第一视图包括视图数据和视图结构数据；

对于任一第一视图，当资源池中缓存有所述第一视图的视图结构数据对应的视图结构，所述原生层从所述资源池中获取所述视图结构，并将所述第一视图的视图数据添加到所述视图结构中，以实现页面显示。

20.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令至少一条指令，所述至少一条指令由处理器加载并执行以实现如权利要求1至9任一项所述的页面显示方法。