页面展现方法和装置与流程

本申请涉及网页应用技术领域，尤其涉及一种页面展现方法和装置。

背景技术：

在网站中一般都包含有多个页面，为了实现不同的需求，经常会涉及到网页的切换。

由于不同页面之间会有所差别，浏览器每次需要切换页面时，都需要从网站获取待展现的页面对应的页面数据，然后加载并展现该页面。然而，浏览器在获取到页面数据之后，加载页面的过程需要较长的时间，导致页面展现速度过慢。

技术实现要素：

有鉴于此，本申请提供了一种页面展现方法和装置，以提高页面加载速度，减少页面展现速度过慢的情况。

为实现上述目的，一方面，本申请提供了一种页面展现方法，包括：

在展现出的第一页面上检测到页面切换操作时，获取待切换到的第二页面的源代码；

基于所述第一页面的源代码以及第二页面的源代码，确定所述第二页面与所述第一页面的差异元素信息，所述差异元素信息为所述第一页面以及第二页面中存在差异的元素的信息；

获取缓存的所述第一网页的第一虚拟文档对象模型dom文件，所述第一虚拟dom文件包括所述第一网页中各个页面元素对应的虚拟dom节点；

依据所述差异元素信息，更新所述第一网页的第一虚拟dom文件，以构建出所述第二网页对应的第二虚拟dom文件，所述第二虚拟dom文件包括所述第二网页中各个页面元素对应的虚拟dom节点；

将所述第二虚拟dom文件映射为所述第二网页的真实dom文件；

基于所述第二网页的真实dom文件加载并展现所述第二网页。

优选的，所述差异元素信息包括以下任意一种或者多种：

第一页面中具有且第二页面中不具有的第一网页元素；

第二网页中具有且第一页面中不具有的第二网页元素；

第二网页与第一网页中相同类型但属性值不同的第三网页元素；

所述依据所述差异元素信息，更新所述第一网页的第一虚拟dom文件，以构建出所述第二网页对应的第二虚拟dom文件，包括：

如果所述差异元素信息包括所述第一页面元素，将所述第一虚拟dom文件中与所述第一网页元素对应的虚拟dom节点删除；

如果所述差异元素信息包括所述第二网页元素，在所述第一虚拟dom文件中创建与所述第二网页元素对应的虚拟dom节点；

如果所述差异元素信息包括所述第三网页元素，将所述第一虚拟dom文件中所述第三网页元素对应的虚拟dom节点的属性值调整为所述第二网页中所述第三网页元素对应的属性值，得到所述第二网页对应的虚拟dom文件。

优选的，所述如果所述差异元素信息包括所述第二网页元素，在所述第一虚拟dom文件中创建与所述第二网页元素对应的虚拟dom节点，包括：

如果所述差异元素信息包括所述第二网页元素，从组件库中调用与所述第二网页元素对应的组件，并将调用的组件作为所述第二网页元素对应的虚拟dom节点添加到所述第一虚拟dom文件中。

优选的，所述在展现出的第一页面上检测到页面切换操作时，获取待切换到的第二页面的源代码，包括：

在展现出的第一页面上检测到页面切换操作时，确定输入所述页面切换操作的用户；

确定与所述用户的用户权限以及所述页面切换操作匹配的第二页面，并获取所述第二页面的源代码。

优选的，在所述基于所述第二网页的真实dom文件加载并展现所述第二网页之后，还包括：

在内存中缓存所述第二虚拟dom文件。

又一方面，本申请还提供了一种页面展现装置，包括：

源代码获取单元，用于在展现出的第一页面上检测到页面切换操作时，获取待切换到的第二页面的源代码；

元素比较单元，用于基于所述第一页面的源代码以及第二页面的源代码，确定所述第二页面与所述第一页面的差异元素信息，所述差异元素信息为所述第一页面以及第二页面中存在差异的元素的信息；

文件获取单元，用于获取缓存的所述第一网页的第一虚拟文档对象模型dom文件，所述第一虚拟dom文件包括所述第一网页中各个页面元素对应的虚拟dom节点；

文件调整单元，用于依据所述差异元素信息，更新所述第一网页的第一虚拟dom文件，以构建出所述第二网页对应的第二虚拟dom文件，所述第二虚拟dom文件包括所述第二网页中各个页面元素对应的虚拟dom节点；

文件转换单元，用于将所述第二虚拟dom文件映射为所述第二网页的真实dom文件；

页面展现单元，用于基于所述第二网页的真实dom文件加载并展现所述第二网页。

优选的，所述元素比较单元确定出的所述差异元素信息包括以下任意一种或者多种：

第一页面中具有且第二页面中不具有的第一网页元素；

第二网页中具有且第一页面中不具有的第二网页元素；

第二网页与第一网页中相同类型但属性值不同的第三网页元素；

所述文件调整单元，包括：

节点删除单元，用于如果所述差异元素信息包括所述第一页面元素，将所述第一虚拟dom文件中与所述第一网页元素对应的虚拟dom节点删除；

节点创建单元，用于如果所述差异元素信息包括所述第二网页元素，在所述第一虚拟dom文件中创建与所述第二网页元素对应的虚拟dom节点；

属性更改单元，用于如果所述差异元素信息包括所述第三网页元素，将所述第一虚拟dom文件中所述第三网页元素对应的虚拟dom节点的属性值调整为所述第二网页中所述第三网页元素对应的属性值，得到所述第二网页对应的虚拟dom文件。

优选的，所述节点创建单元，包括：

节点创建子单元，用于如果所述差异元素信息包括所述第二网页元素，从组件库中调用与所述第二网页元素对应的组件，并将调用的组件作为所述第二网页元素对应的虚拟dom节点添加到所述第一虚拟dom文件中。

优选的，所述源代码获取单元，包括：

权限确定子单元，用于在展现出的第一页面上检测到页面切换操作时，确定输入所述页面切换操作的用户；

代码获取子单元，用于确定与所述用户的用户权限以及所述页面切换操作匹配的第二页面，并获取所述第二页面的源代码。

优选的，还包括：

文件缓存单元，用于在所述页面展现单元基于所述第二网页的真实dom文件加载并展现所述第二网页之后，在内存中缓存所述第二虚拟dom文件。

经由上述的技术方案可知，在需要将第一页面切换为第二页面时，可以根据第一页面以及第二页面中的元素差异，以及已缓存的该第一页面的虚拟dom文件，构建出第二页面的虚拟dom文件，这样，在将第二页面的虚拟dom文件转换为真实dom文件之后，直接基于该第二网页的真实dom文件进行页面加载便可以完成该第二页面的加载并展现，从而无需针对第二页面中每个元素分别进行一次页面加载，有效减少了页面切换过程中由于每次加载元素所需的重复加载页面的次数，从而避免了多次加载页面中重复数据所导致的耗时，有利于提高页面展现速度。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1示出了本申请的一种页面展现方法的一种流程示意图；

图2示出了本申请的一种页面展现方法的又一种流程示意图；

图3示出了本申请的一种页面展现装置的一种组成结构示意图。

具体实施方式

本申请实施例的方案适用于浏览器完成页面的加载以及展现，以提高完成页面加载的效率，提高页面展现速度。

下面结合附图对本申请的方案进行介绍。

如图1所示，其示出了本申请一种页面展现方法一个实施例的流程示意图，本实施例的方法可以应用于浏览器(也称为浏览器客户端)，本实施例的方法可以包括：

s101，在展现出的第一页面上检测到页面切换操作时，获取待切换到的第二页面的源代码。

其中，为了便于区分，将浏览器已展现出的页面称为第一页面，而将待切换到的页面称为第二页面。其中，该第一页面与第二页面为属于同一个网站的页面。

其中，该页面切换操作为触发将第一页面切换为其他页面的操作。如，在展现出第一页面之后，用户可以通过点击该第一页面中图片、链接地址等，以触发请求第二页面。

可选的，考虑到网站中针对不同用户可能所希望呈现的网页内容会有所差别，因此，本申请实施例中还可以设置不同用户的权限。不同权限的用户所能访问的页面会有所差别，且不同权限的用户所能访问的同一页面的内容也会有所差别。相应的，在检测到页面切换操作时，还可以确定输入该页面切换操作的用户。然后，基于该用户的用户权限以及该页面切换操作，确定与该用户权限匹配的第二页面，并获取第二页面的源代码。

如，以购物网站为例，网站的管理人员以及普通用户所能看到的同一网页也会有所差别，因此，在检测到该页面切换操作之后，浏览器可以将用户的信息发送给网站的服务器，并由服务器确认出用户的权限之后，确定与该用户权限匹配的第二页面。

s102，基于该第一页面的源代码以及第二页面的源代码，确定该第二页面与该第一页面中的差异元素信息。

可以理解的是，页面的源代码中包含了构成该页面的所有元素的信息。其中，此处所提到的元素也可以称为页面的对象是指网页页面的页面元素，如，网页中的图片、文件、空间等都属于页面中的元素。

其中，该差异元素信息为该第一页面以及第二页面中存在差异的元素的信息。该差异元素信息可以通过对比第一页面以及第二页面的源代码，来分析出这两个页面之间所具有的不同的元素以及元素的标识、元素的属性值等等信息。

可选的，该差异元素信息可以包括如下任意一种或者多种：

第一页面中具有且第二页面中不具有的第一网页元素；

第二网页中具有且第一页面中不具有的第二网页元素；

第二网页与第一网页中相同类型但属性值不同的第三网页元素。

其中，第一网页元素是指仅仅在第一页面中包含，而第二页面中未包含的元素。如，假设第一页面中具有图片，而该第二网页中没有图片这一元素，则该图片就属于第一网页元素。

该第二网页元素是指第二网页中包含的元素，但是第一页面中却没有相应的元素。

而第三网页元素是指第二页面以及第一页面中都具有同一类型的一种元素，但是第二页面中该元素的属性值与第一页面中该元素的属性值不同。例如，第二网页中具有文本这一元素，而第一页面中也具有相同类型的该文本的元素，但是第二网页与该第一网页中该文本的内容不同，则该文本属于第三网页元素。

需要说明的是，为了便于区分，第二页面与第一页面中不同类型的差异元素，分别将不同差异类型的网页元素分别称为第一网页元素、第二网页元素以及第三网页元素。而相对第一网页而言，考虑到所切换到的第二网页有多种可能，因此，该第一网页与第二网页之间的存在差异的元素也会有所不同，如，第一网页中可能不存在仅仅第一网页有而第二网页不具有的第一网页元素，因此，本申请实施例中，对于第一网页元素、第二网页元素以及第三网页元素中的任意一种类型的网页元素均可能会出现不存在该种类型的网页元素、存在一个或者多个该种类型的网页元素的情况。

s103，获取缓存的该第一网页的第一虚拟文档对象模型(documentobjectmodel，dom)文件。

其中，该第一虚拟dom文件包括该第一网页中各个页面元素对应的虚拟dom节点。其中，虚拟dom文件中包含的虚拟dom节点也成为虚拟dom元素，是指利用javascript(简称为js，一种直译式脚本语言)对象模拟出的dom节点(也成为dom元素)。其中，基于js对象模拟dom节点实际上就是网页元素映射在js对象上，本申请对其具体实现不加限制。与真实的dom文件对应，一个虚拟dom文件就可以看成虚拟出的dom树。

其中，为了便于区分，本申请实施例将第一网页对应的虚拟dom文件称为第一虚拟dom文件，而将后续构建出的第二网页的虚拟dom文件称为第二虚拟dom文件。

本申请实施例中，浏览器加载网页是先构建出网页的虚拟dom文件，然后再将虚拟dom文件转换为真实dom文件，并基于真实dom文件完成网页的加载与展现，由此可知，已展现出的每个网页都会对应有该网页的虚拟dom文件。因此，该第一网页对应的第一dom虚拟文件为加载该第一网页之前，构建出的包含该第一网页中各个页面元素对应的虚拟dom节点的文件。

s104，依据该差异元素信息，更新该第一网页的第一虚拟dom文件，以构建出该第二网页对应的第二虚拟dom文件。

其中，该第二虚拟dom文件包括该第二网页中各个页面元素对应的虚拟dom节点。与前面第一虚拟dom文件类似，该第二虚拟dom文件中包含给第二网页中各个页面元素的虚拟dom节点，每个网页元素的虚拟dom节点为将该网页元素映射为js对象得到的。

可以理解的是，完全重新构建一个网页对应的虚拟dom文件的复杂度较高且耗时也会相对较长。而由于同一个网站的不同网页之间一般都具有一些相同类型的元素，如，不同网页种可能都会有同一款文本元素等，因此，在已经有网站中一个网页对应的虚拟dom文件的情况下，可以在该网页对应的虚拟dom文件的基础上进行调整，以构建出另一个网页对应的dom文件，从而实现降低构建dom文件所需的耗时，并降低复杂度。

基于此，本申请通过比较第一网页与第二网页中存在差异的差异元素，然后，基于差异元素信息，对该第一网页的第一虚拟dom文件进行虚拟dom节点的删除、增加或者属性修改等更新操作，以使得更新后的第一虚拟dom文件包含且仅包含第二网页中各个网页元素对应的虚拟dom节点。

可选的，在差异元素信息包含前面提到的第一页面元素、第二网页元素以及第三网页元素中的任意一种或者多种的情况下，更新该第一虚拟dom文件可以包括如下几种可能情况：

如果该差异元素信息包括该第一页面元素，将该第一虚拟dom文件中与该第一网页元素对应的虚拟dom节点删除；

如果该差异元素信息包括该第二网页元素，在该第一虚拟dom文件中创建与该第二网页元素对应的虚拟dom节点；

如果该差异元素信息包括该第三网页元素，将该第一虚拟dom文件中该第三网页元素对应的虚拟dom节点的属性值调整为该第二网页中该第三网页元素对应的属性值，得到该第二网页对应的虚拟dom文件。

可以理解的是，对于每一个第一页面元素、第二网页元素以及第三网页元素均需要分别执行以上相应的操作。

s105，将该第二虚拟dom文件映射为该第二网页的真实dom文件。

可以理解的是，由于浏览器需要基于真实的dom树来加载并展现网页，而第二虚拟dom文件中包含的虚拟dom节点，每个虚拟dom节点都是一个js对象，因此，需要将第二虚拟dom文件中各个js对象转换为真实的dom节点，以实现将第二虚拟dom文件转换为真实dom文件。

其中，将表征虚拟dom节点的js对象转换为真实dom节点可以获取虚拟dom节点中的节点标签，该节点标签用于表征该dom节点对应的真实dom节点，然后，虚拟dom节点与真实dom节点的映射关系，转换出该节点标签对应的真实dom节点。

s106，基于该第二网页的真实dom文件加载并展现该第二网页。

其中，真实dom文件可以看成是一个dom树，基于dom树加载网页的过程可以采用现有的任意方式，本申请对此不加限制。

本申请的发明人经研究发现：现有的页面展现过程中，浏览器是直接根据网页的真实dom树加载网页，在该过程中dom元素的频繁创建和修改是最耗时的。这是因为：根据网页中包含的网页元素，每次向dom树中创建了一个元素对应的dom节点，浏览器就会依据当前已构建的dom树加载一遍网页，然而，由于网页中包含的网页元素的数量较多，这样，浏览器在完全展现网页之前，需要多次频繁基于dom树进行页面加载，从而造成使得整个页面加载过程耗时较长，效率较低。

而本申请在确定出待切换的第二网页之后，会先在内存中构建出该第二网页的虚拟dom文件，并在得到第二网页对应的虚拟dom文件之后，再将该第二网页对应的虚拟dom文件转换为真实的dom文件，这样，浏览器只需要基于最终转化出的真实dom文件进行一次页面加载便可以完成该第二网页的加载，从而避免了多次加载页面所造成的复杂度以及耗时，有利于提高页面展现速度。

可选的，为了后续需要将第二网页切换为其他网页时，也能够较为快速的切换到该其他网页，在基于第二网页的真实dom文件加载并展现第二网页之后，还可以在内存中缓存该第二虚拟dom文件。

为了便于理解，如图2，其示出了本申请一种页面展现方法又一个实施例的流程示意图，本实施例的方法可以包括：

s201，在展现出的第一页面上检测到页面切换操作时，确定输入页面切换操作的用户。

s202，确定与该用户的用户权限以及该页面切换操作匹配的第二页面，并获取该第二页面的源代码。

s203，基于该第一页面的源代码以及第二页面的源代码，确定该第二页面与该第一页面中的差异元素信息。

其中，差异元素信息包括以下任意一种或者多种：

第一页面中具有且第二页面中不具有的第一网页元素；

第二网页中具有且第一页面中不具有的第二网页元素；

第二网页与第一网页中相同类型但属性值不同的第三网页元素；

s204，获取缓存的该第一网页的第一虚拟文档对象模型dom文件。

其中，该第一虚拟dom文件包括该第一网页中各个页面元素对应的虚拟dom节点。

s205，如果该差异元素信息包括该第一页面元素，将该第一虚拟dom文件中与该第一网页元素对应的虚拟dom节点删除。

针对每个第一页面元素均需要执行该步骤s205。

以上步骤s201-205可以参见前面实施例的相关介绍，在此不再赘述。

s206，如果差异元素信息包括第二网页元素，从组件库中调用与第二网页元素对应的组件，并将调用的组件作为该第二网页元素对应的虚拟dom节点添加到该第一虚拟dom文件中。

其中，该组件库中包括多个组件，每个组件都是基于js对象构建出的虚拟dom节点。

在确定出第二网页元素之后，可以直接从组件库中调用与该第二网页元素对应的组件，该组件就是该第二网页元素对应的基于js对象模拟的虚拟dom节点，从而无需在实时基于js对象模拟虚拟dom节点，有利于提高创建该第二网页元素对应的虚拟dom节点的便捷性。

s207，如果该差异元素信息包括该第三网页元素，将该第一虚拟dom文件中该第三网页元素对应的虚拟dom节点的属性值调整为该第二网页中该第三网页元素对应的属性值，得到该第二网页对应的虚拟dom文件。

s208，将该第二虚拟dom文件映射为该第二网页的真实dom文件。

s209，基于该第二网页的真实dom文件加载并展现该第二网页。

s210，在内存中缓存该第二虚拟dom文件。

对应本申请的一种页面展现方法，本申请还提供了一种页面展现装置。

如图3，其示出了本申请一种页面展现装置一个实施例的组成结构示意图，本实施例的页面展现装置可以应用于浏览器，该装置可以包括：

源代码获取单元301，用于在展现出的第一页面上检测到页面切换操作时，获取待切换到的第二页面的源代码；

元素比较单元302，用于基于所述第一页面的源代码以及第二页面的源代码，确定所述第二页面与所述第一页面的差异元素信息，所述差异元素信息为所述第一页面以及第二页面中存在差异的元素的信息；

文件获取单元303，用于获取缓存的所述第一网页的第一虚拟文档对象模型dom文件，所述第一虚拟dom文件包括所述第一网页中各个页面元素对应的虚拟dom节点；

文件调整单元304，用于依据所述差异元素信息，更新所述第一网页的第一虚拟dom文件，以构建出所述第二网页对应的第二虚拟dom文件，所述第二虚拟dom文件包括所述第二网页中各个页面元素对应的虚拟dom节点；

文件转换单元305，用于将所述第二虚拟dom文件映射为所述第二网页的真实dom文件；

页面展现单元306，用于基于所述第二网页的真实dom文件加载并展现所述第二网页。

在一种可能的实现方式中，所述元素比较单元确定出的所述差异元素信息包括以下任意一种或者多种：

第一页面中具有且第二页面中不具有的第一网页元素；

第二网页中具有且第一页面中不具有的第二网页元素；

第二网页与第一网页中相同类型但属性值不同的第三网页元素；

所述文件调整单元，包括：

节点删除单元，用于如果所述差异元素信息包括所述第一页面元素，将所述第一虚拟dom文件中与所述第一网页元素对应的虚拟dom节点删除；

节点创建单元，用于如果所述差异元素信息包括所述第二网页元素，在所述第一虚拟dom文件中创建与所述第二网页元素对应的虚拟dom节点；

属性更改单元，用于如果所述差异元素信息包括所述第三网页元素，将所述第一虚拟dom文件中所述第三网页元素对应的虚拟dom节点的属性值调整为所述第二网页中所述第三网页元素对应的属性值，得到所述第二网页对应的虚拟dom文件。

可选的，所述节点创建单元，包括：

节点创建子单元，用于如果所述差异元素信息包括所述第二网页元素，从组件库中调用与所述第二网页元素对应的组件，并将调用的组件作为所述第二网页元素对应的虚拟dom节点添加到该第一虚拟dom文件中。

在又一种可能的实现方式中，所述源代码获取单元，包括：

权限确定子单元，用于在展现出的第一页面上检测到页面切换操作时，确定输入所述页面切换操作的用户；

代码获取子单元，用于确定与所述用户的用户权限以及所述页面切换操作匹配的第二页面，并获取所述第二页面的源代码

可选的，本实施例的装置还可以包括：

文件缓存单元，用于在所述页面展现单元基于所述第二网页的真实dom文件加载并展现所述第二网页之后，在内存中缓存所述第二虚拟dom文件。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。