CN111639287A - 一种页面处理方法、装置、终端设备及可读存储介质 - Google Patents

Abstract

本发明实施例提供了一种页面处理方法、装置、终端设备及可读存储介质，该页面处理方法应用于终端设备，该页面处理方法包括：接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令对待渲染目标页面进行更新，得到更新后的待渲染目标页面；基于更新后的待渲染目标页面构建第一虚拟文档对象模型树，并对比该第一虚拟文档对象模型树和基于待渲染目标页面构建的第二虚拟文档对象模型树，基于对比结果确定出目标文档对象模型元素节点；根据目标文档对象模型元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。采用这样的页面处理方法，提升了更新数据的加载速度，提升页面更新效率。

Description

一种页面处理方法、装置、终端设备及可读存储介质

技术领域

本发明涉及计算机应用领域，尤其涉及一种页面处理方法、装置、终端设备及可读存储介质。

背景技术

***界面包含有多个***对象，用户可以对该***对象进行操作以对***界面进行更新。在现有的***界面显示中，针对***对象进行操作时，会随着***中可操作对象的增加，数据复杂度加剧，从而导致***界面数据展示较慢，***界面中数据同步展示不及时。可见，如何提供一种页面处理方法能提升页面中更新数据的加载速度，从而提升页面渲染的效率是一个亟待解决的问题。

发明内容

本发明实施例提供了一种页面处理方法、装置、终端设备及可读存储介质，采用这样的页面处理方法，可以提升数据的加载速度，进而提升页面渲染的效率。

第一方面，本发明实施例提供了一种页面处理方法，所述方法应用于终端设备，所述方法包括：

接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；

基于所述更新后的待渲染目标页面构建第一虚拟文档对象模型树，所述第一虚拟文档对象模型树包括至少一个第一文档对象模型元素节点，各个第一文档对象模型元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；

对比所述第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，所述第二虚拟文档对象模型树是基于所述待渲染目标页面构建的；

根据所述目标文档对象模型元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

第二方面，本发明实施例提供了一种页面处理装置，所述方法配置于终端设备，所述装置包括：

数据获取模块，用于接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；

数据处理模块，用于基于所述更新后的待渲染目标页面构建第一虚拟文档对象模型树，所述第一虚拟文档对象模型树包括至少一个第一文档对象模型元素节点，各个第一文档对象模型元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；

所述数据处理模块，还用于将所述第一虚拟文档对象模型树和第二虚拟文档对象模型树对比，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，所述第二虚拟文档对象模型树是基于所述待渲染目标页面构建的；

所述数据处理模块，还用于根据所述目标文档对象模型元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

第三方面，本发明实施例提供了一种终端设备，所述终端设备包括输入设备和输出设备，所述终端设备还包括处理器，适于实现一条或多条指令，所述一条或多条指令适于由所述处理器加载并执行上述第一方面所述的页面处理方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面所述的页面处理方法。

本发明实施例中，终端设备接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令对待渲染目标页面进行更新，得到更新后的待渲染目标页面，进一步地，终端设备可以基于该更新后的待渲染目标页面构建第一虚拟文档对象模型树，其中，该第一虚拟文档对象模型树包括至少一个第一文档对象模型元素节点，各个第一文档对象模型元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。进而，终端设备可以对比第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，第二虚拟文档对象模型树是基于待渲染目标页面构建的，并根据该目标文档对象模型元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。采用这样的页面处理方法，通过构建虚拟文档对象模型树来缓解终端设备性能问题，并通过虚拟文档对象模型树的对比技术来提升更新数据的加载速度，从而提升页面渲染的效率。

附图说明

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

图1是本发明实施例提供的一种页面处理***的架构示意图；

图2是本发明实施例提供的一种页面处理方法的流程示意图；

图3是本发明实施例提供的一种目标页面与虚拟DOM树对应的示意图；

图4是本发明实施例提供的另一种页面处理方法的流程示意图；

图5是本发明实施例提供的一种待更新组件与待更新子组件之间的数据流示意图；

图6是本发明实施例提供的一种开发编辑页面的示意图；

图7是本发明实施例提供的一种页面处理装置的结构示意图；

图8是本发明实施例提供的一种终端设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参见图1，是本发明实施例提供的一种页面处理***的框架图，该页面处理***包括终端设备的浏览器模块10和渲染框架模块11。其中：渲染更新框架11为采用组件化开发的angularJS框架与采用虚拟文档对象模型(Document Object Model，DOM)的reactJS框架的结合框架。浏览器模块10对应的终端设备具体可以是智能手机、平板电脑、笔记本电脑、台式电脑、车载智能终端等，本发明实施例不做限定。

需要了解的是，真实DOM是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。真实DOM树将文档作为一个树形结构，真实DOM树的每个结点表示一个HTML标签或标签内的文本项。真实DOM树形结构精确地描述了HTML文档中标签间的相互关联性，对HTML文档的处理可以通过对真实DOM树的操作实现。在对真实DOM树进行渲染时，JavaScript(简称JS)渲染引擎可以提供真实DOM暴露接口供JS调用，来方便JS操作真实DOM。由于浏览器性能的限制，都应尽可能的减少操作DOM的次数。本方案采用虚拟DOM(即采用js对象模拟DOM节点)，使得页面的更新可以先反映在虚拟DOM上，等虚拟DOM更新完后，再将最终的虚拟DOM映射成真实DOM，以减少浏览器的计算压力，操作内存中的虚拟DOM的以提升更新数据的加载速度，进而提升页面更新的效率。

在一些可行的实施方式中，终端设备展示出浏览器10接收针对目标页面的页面更新指令，并根据渲染更新框架11中的工作流程和该页面更新指令对待渲染目标页面进行更新，得到更新后的待渲染目标页面，进一步地，终端设备可以基于该更新后的待渲染目标页面构建第一虚拟DOM树，其中，该第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。进而，终端设备可以采用reactJS框架的diff算法对比第一虚拟DOM树和第二虚拟DOM树，并基于对比结果从第一DOM元素节点中确定出目标DOM元素节点，其中，第二虚拟DOM树是基于待渲染目标页面构建的，并根据该目标DOM元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。采用这样的页面处理方法，通过构建虚拟DOM树来缓解终端设备性能问题，并通过虚拟DOM树的对比技术来提升数据加载的速度，从而提升页面渲染的效率。

请参见图2，是本发明实施例提供的一种页面处理方法的流程示意图，该方法可由终端设备执行，该页面处理方法包括如下步骤：

S201：接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令对该待渲染目标页面进行更新，得到更新后的待渲染目标页面。

终端设备可以展示开发编辑页面，该开发编辑页面中包括待渲染目标页面，终端设备通过交互设备接收针对该待渲染目标页面的页面更新指令，并根据该页面更新指令在前述开发编辑页面对该待渲染目标页面进行更新，得到更新后的待渲染目标页面。其中，交互设备可以是人机交互设备(例如鼠标等)，也可以是与该待渲染目标页面进行数据交互的终端(例如电脑、手机和服务器等)。

在一个实施例中，在终端设备接收针对待渲染目标页面的页面更新指令之前，终端设备还可以展示开发编辑页面，该开发编辑页面包括组件列表和页面编辑区，其中，组件列表包括至少一个组件。终端设备从组件列表中确定至少一个目标组件，并在该页面编辑区中对至少一个目标组件中的各个目标组件进行排版处理，得到待渲染目标页面。进一步地，终端设备可以将各个目标组件与数据模型进行双向数据绑定，并获取各个目标组件在数据模型中各自对应的应用数据，并基于各个目标组件对应的应用数据、组件属性和各个目标组件之间的层级信息生成第二虚拟DOM模型树，该第二虚拟DOM树包括至少一个第二DOM元素节点，其中，目标组件与所述第二DOM节点一一对应，进而，终端设备可以基于该第二虚拟DOM树对待渲染目标页面进行渲染，得到目标页面。

需要了解的是，将各个目标组件与数据模型进行双向数据绑定，即在目标组件发生变化时会相应的反应至数据模型中，数据模型中的应用数据更新时同样能映射到目标组件里。组件属性可以是组件的形状、大小、颜色以及在待渲染目标页面中的位置中的一种或多种。应用数据可以是组件的内容数据、配置数据或交互数据中的一种或多种。

示例性地，如图3所示，包括目标页面3a和目标页面3a对应的虚拟DOM树3b，目标页面3a包含三个组件，分别是组件1、组件2和组件3。终端设备根据该目标页面3a生成虚拟DOM树3b，虚拟DOM树3b的根元素节点中保存有目标页面3a的属性信息和状态信息，即该目标页面3a与虚拟DOM树3b中根DOM元素节点对应，虚拟DOM树中DOM元素节点1、DOM元素节点2、DOM元素节点3与目标页面3a中组件1、组件2、组件3一一对应。

在一个实施例中，上述组件列表中的组件可以由开发人员根据目标组件功能进行组件开发得到，组件列表中可以包括多种基础组件，如按钮、文本输入框、链接符、下拉框等。

可选地，还可以从组件列表中选取出至少一个组件，将其进行组合封装成组合功能组件，并将该组合功能组件添加至组件列表中，便于用户下次对该组合功能组件的复用。

可选地，终端设备可以获取模板页面(即已经排版好的其他待渲染页面)，按照业务功能将该模板页面拆分成至少一个业务功能组件模块组件，进而将该业务功能模块组件添加至组件列表中，以便用户下次对该业务功能模块组件的复用。采用这样的方式，可以提升组件的复用性，提高开发效率和代码质量，便于后期代码维护。

S202：基于该更新后的待渲染目标页面构建第一虚拟DOM树，该第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。

终端设备根据更新后的待渲染目标页面中的各个目标组件对应的应用数据、组件属性和所述各个目标组件之间的层级信息构建第一虚拟DOM树。

S203：对比第一虚拟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树的对比计算复杂度，提升了对比效率，从而提升了页面更新的效率。

S204：根据该目标DOM元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

终端设备将该目标DOM元素节点中组件对应的应用状态数据和组件属性映射至该目标DOM元素节点在目标页面对应的真实DOM树中对应的元素节点中，并操作该真实DOM树中对应的元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

本申请实施例中，终端设备可以接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令对待渲染目标页面进行更新，得到更新后的待渲染目标页面，进一步地，终端设备可以基于该更新后的待渲染目标页面构建第一虚拟DOM树，其中，该第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。进而，终端设备可以对比第一虚拟DOM树和第二虚拟DOM树，并基于对比结果从第一DOM元素节点中确定出目标DOM元素节点，其中，第二虚拟DOM树是基于待渲染目标页面构建的，并根据该目标DOM元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。采用这样的页面处理方法，通过构建虚拟DOM树来缓解终端设备性能问题，并通过虚拟DOM树的同层对比技术来提升数据加载的速度，从而提升页面渲染的效率。

请参见图4，是本发明实施例提供的另一种页面处理方法的流程示意图，该方法可由终端设备执行，该页面处理方法包括如下步骤：

S401：接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令的指示，从待渲染目标页面中确定出待更新目标组件，并从该待更新目标组件包括的至少一个子组件中确定出待更新子组件。

终端设备接收针对待渲染目标页面的页面更新指令，并根据该页面更新指令从待渲染目标页面包含的多个目标组件中确定出待更新目标组件，其中，待更新目标组件的个数小于或等于待渲染目标页面包含的目标组件的个数，在此不做具体限定。并且，当该待更新目标组件为至少一个组件合并的业务功能组件时，终端设备根据该页面更新指令从至少一个组件中确定出待更新子组件。

示例性地，待更新目标组件A由子组件a1和组件子a2组成，其中子组件a1的功能为跳转至指定页面1的链接功能，子组件a2的功能为点击确定的确定功能。一个页面更新指令指示了该待更新组件A的功能更新为跳转至指定页面2的链接功能，由于待更新目标组件A中的跳转至指定页面的链接功能由组件a1实行，这种情况下终端设备将待更新目标组件A中的子组件a1确定为待更新子组件。

S402：在该待渲染目标页面中根据该页面更新指令对待更新子组件进行更新，得到更新后的待渲染目标页面。

示例性地，如图5所示，根据该页面更新指令的指示，前述待更新组件(即图5中所示父组件)响应该页面更新指令，将该页面更新指令中指示的待更新的组件属性和应用数据传递给待更新子组件(即图5中所示子组件)，进而，由该待更新子组件进行该页面更新指令中指示的待更新的组件属性和应用数据的更新，得到更新后的待渲染目标页面。

S403：基于该更新后的待渲染目标页面构建第一虚拟DOM树，该第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。

S404：对比第一虚拟DOM树和第二虚拟DOM树，并基于对比结果从第一DOM元素节点中确定出目标DOM元素节点，其中，该第二虚拟DOM模型树是基于待渲染目标页面构建的。

S405：根据该目标DOM元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

其中，步骤S403-S405的具体实施方式可以参见前述实施例中步骤S202-S204的具体实施方式，在此不再过多赘述。

在一个实施例中，终端设备得到基于待渲染目标页面预渲染得到的目标页面之后，还可以接收组件删除指令，并根据该组件删除指令从待渲染目标页面中确定待删除组件。进一步地，终端设备可以将该待删除组件从待渲染目标页面中移除，并对待删除组件占用资源进行释放。其中，占用资源包括内存占用资源、网络请求资源、定时器资源和与待删除组件对应的第二DOM元素节点中的一种或多种。采用这样的方式，在组件删除后对该组件占用资源进行释放，避免了因组件删除出现的内存溢出。

其中，组件删除指令可以是由用户根据业务需求，针对待渲染目标页面中的目标组件发送的。

可选地，组件属性还包括生命周期，在基于该第二虚拟文档对象模型树对待渲染目标页面进行渲染，得到目标页面之后，终端设备还可以检测各个目标组件的生命周期，并验证该生命周期是否到达。若前述生命周期到达，则将该生命周期对应的目标组件确定为待删除组件，并将该待删除组件从待渲染目标页面中移除，以及对该待删除组件占用资源进行释放。其中，占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二文档对象模型元素节点中的一种或多种。

其中，生命周期为开发人员根据目标组件在业务需求中的功能作用设置的，后期可根据具体情况调整。终端设备检测各个目标组件的生命周期和各个目标组件的生效时长，若生效时长等于该生命周期，则判定该生命周期到达，并将该生命周期对应的目标组件确定为待删除组件。需要了解的是，生效时长为组件从开始生效时间(或开始运行时间、开始工作时间)到终端设备检测时的时长。

在一个实施例中，前述组件属性还包括功能属性，在页面编辑区中对至少一个目标组件中的各个目标组件进行排版操作，得到待渲染目标页面之后，终端设备还可以接收针对组件列表中组件的功能属性管理操作，并根据该功能属性管理操作确定待管理组件，其中，功能属性管理操作为业务功能新增操作、业务功能修改操作和业务功能删除操作的一种或多种，进一步地，终端设备对组件列表中的待管理组件进行功能属性管理，并对待渲染目标页面中和待管理组件匹配的目标组件进行同步功能属性管理。其中，业务功能包括但不限于链接、跳转、下拉、展示等。

示例性地，如图6所示，为一种开发编辑页面的示意图。终端设备从组件列表中确定组件1为目标组件构建了待渲染页面1、待渲染页面2和待渲染页面3。用户在开发编辑页面的组件列表中对组件1新增业务链接功能，则终端设备会对待渲染页面1、待渲染页面2和待渲染页面3中包括的组件1同步新增业务链接功能。

在本申请实施例中，终端设备接收针对待渲染目标页面的页面更新指令，并基于该页面更新指令的指示，从待渲染目标页面中确定出待更新目标组件，并从该待更新目标组件包括的至少一个子组件中确定出待更新子组件。进一步地，终端设备在该待渲染目标页面中根据该页面更新指令对待更新子组件进行更新，得到更新后的待渲染目标页面，并基于该更新后的待渲染目标页面构建第一虚拟DOM树，其中，该第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与更新后的待渲染目标页面包括的各个目标组件一一对应。进而，终端设备可以对比第一虚拟DOM树和第二虚拟DOM树，并基于对比结果从第一DOM元素节点中确定出目标DOM元素节点，其中，第二虚拟DOM树是基于待渲染目标页面构建的，并根据该目标DOM元素节点对基于待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。采用这样的页面处理方法，通过构建虚拟DOM树来缓解终端设备性能问题，并通过将页面更新指令中指示的待更新组件属性和应用数据传递至待更新组件中的子组件，由子组件对相关的待更新组件属性和应用数据进行加载更新，从而进一步地提升了数据加载的速度，提升页面渲染的效率。

请参见图7，为本申请实施例提供的一种页面处理装置的结构示意图，所述装置配置于终端设备，所述装置包括：

数据获取模块70，用于接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；

数据处理模块71，用于基于所述更新后的待渲染目标页面构建第一虚拟DOM树，所述第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；

所述数据处理模块71，还用于对比所述第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，所述第二虚拟文档对象模型树是基于所述待渲染目标页面构建的；

所述数据处理模块71，还用于根据所述目标DOM元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

在一个实施例中，所述数据处理单元71，具体还用于展示开发编辑页面，所述开发编辑页面包括组件列表和页面编辑区，所述组件列表包括至少一个组件；从所述组件列表中确定至少一个目标组件，并在所述页面编辑区中对所述至少一个目标组件中的各个目标组件进行排版处理，得到待渲染目标页面；将所述各个目标组件与数据模型进行双向数据绑定，并获取所述各个目标组件在所述数据模型中各自对应的应用数据；基于各个目标组件对应的应用数据、组件属性和所述各个目标组件之间的层级信息生成所述第二虚拟DOM树，所述第二虚拟DOM树包括至少一个第二DOM元素节点，所述目标组件与所述第二DOM元素节点一一对应；基于所述第二虚拟DOM树对所述待渲染目标页面进行渲染，得到目标页面。

在一个实施例中，所述数据处理单元71，具体用于将所述第一虚拟DOM树与所述第二虚拟DOM树进行同层对比，得到同层对比结果；根据所述同层对比结果，从所述第一DOM元素节点中确定出目标DOM元素节点。

在一个实施例中，所述数据处理单元71，具体用于基于所述页面更新指令的指示，从所述待渲染目标页面中确定出待更新目标组件，并从所述待更新目标组件包括的至少一个子组件中确定出待更新子组件；在所述待渲染目标页面中根据所述页面更新指令对所述待更新子组件进行更新，得到更新后的待渲染目标页面。

在一个实施例中，所述数据处理单元71，具体还用于接收组件删除指令，并根据所述组件删除指令从所述待渲染目标页面中确定待删除组件；将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二DOM元素节点中的一种或多种。

在一个实施例中，所述组件属性包括生命周期，所述数据处理单元71，具体还用于检测所述各个目标组件的生命周期，并验证所述生命周期是否到达；若所述生命周期到达，则将所述生命周期对应的目标组件确定为待删除组件，并将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二DOM元素节点中的一种或多种。

在一个实施例中，所述组件属性还包括功能属性，所述数据处理单元71，具体还用于接收针对所述组件列表中组件的功能属性管理操作，并根据所述功能属性管理操作确定待管理组件，所述功能属性管理操作为业务功能新增操作、业务功能修改操作和业务功能删除操作的一种或多种；对所述组件列表中所述待管理组件进行功能属性管理，并对所述待渲染目标页面中和所述待管理组件匹配的目标组件进行同步功能属性管理。

需要说明的是，本发明实施例所描述的页面处理装置的各单元模块的功能可根据图2或者图4所述的方法实施例中的方法具体实现，其具体实现过程可以参照图2或者图4的方法实施例的相关描述，此处不再赘述。

基于上述方法实施例以及装置项实施例的描述，本发明实施例还提供一种终端设备。请参见图8，该终端设备可至少包括处理器801、输入设备802、输出设备803以及存储器804；其中，处理器801、输入设备802、输出设备803以及存储器804可通过总线或者其它连接方式进行连接。所述存储器804中还可以包括计算机可读存储介质，该计算机可读存储介质用于存储计算机程序，所述计算机程序包括程序指令，所述处理器801用于执行所述存储器804存储的程序指令。处理器801(或称CPU(Central Processing Unit，中央处理器))是终端设备的计算核心以及控制核心，其适于实现一条或多条指令，具体适于加载并执行一条或多条指令从而实现上述页面处理方法实施例中的相应方法流程或相应功能。其中，处理器801被配置调用所述程序指令执行：接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；基于所述更新后的待渲染目标页面构建第一虚拟DOM树，所述第一虚拟DOM树包括至少一个第一DOM元素节点，各个第一DOM元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；对比所述第一虚拟DOM树和第二虚拟DOM树，并基于对比结果从所述第一DOM元素节点中确定出目标DOM元素节点，其中，所述第二虚拟DOM树是基于所述待渲染目标页面构建的；根据所述目标DOM元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

在一个实施例中，所述处理器801，具体还用于展示开发编辑页面，所述开发编辑页面包括组件列表和页面编辑区，所述组件列表包括至少一个组件；从所述组件列表中确定至少一个目标组件，并在所述页面编辑区中对所述至少一个目标组件中的各个目标组件进行排版处理，得到待渲染目标页面；将所述各个目标组件与数据模型进行双向数据绑定，并获取所述各个目标组件在所述数据模型中各自对应的应用数据；基于各个目标组件对应的应用数据、组件属性和所述各个目标组件之间的层级信息生成所述第二虚拟DOM树，所述第二虚拟DOM树包括至少一个第二DOM元素节点，所述目标组件与所述第二DOM元素节点一一对应；基于所述第二虚拟DOM树对所述待渲染目标页面进行渲染，得到目标页面。

在一个实施例中，所述处理器801，具体用于将所述第一虚拟DOM树与所述第二虚拟DOM树进行同层对比，得到同层对比结果；根据所述同层对比结果，从所述第一DOM元素节点中确定出目标DOM元素节点。

在一个实施例中，所述处理器801，具体用于基于所述页面更新指令的指示，从所述待渲染目标页面中确定出待更新目标组件，并从所述待更新目标组件包括的至少一个子组件中确定出待更新子组件；在所述待渲染目标页面中根据所述页面更新指令对所述待更新子组件进行更新，得到更新后的待渲染目标页面。

在一个实施例中，所述处理器801，具体还用于接收组件删除指令，并根据所述组件删除指令从所述待渲染目标页面中确定待删除组件；将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二DOM元素节点中的一种或多种。

在一个实施例中，所述组件属性包括生命周期，所述处理器801，具体还用于检测所述各个目标组件的生命周期，并验证所述生命周期是否到达；若所述生命周期到达，则将所述生命周期对应的目标组件确定为待删除组件，并将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二DOM元素节点中的一种或多种。

在一个实施例中，所述组件属性还包括功能属性，所述处理器801，具体还用于接收针对所述组件列表中组件的功能属性管理操作，并根据所述功能属性管理操作确定待管理组件，所述功能属性管理操作为业务功能新增操作、业务功能修改操作和业务功能删除操作的一种或多种；对所述组件列表中所述待管理组件进行功能属性管理，并对所述待渲染目标页面中和所述待管理组件匹配的目标组件进行同步功能属性管理。

应当理解，在本发明实施例中，所称处理器801可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器801还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立a硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

该存储器804可以包括只读存储器和随机存取存储器，并向处理器801提供指令和数据。存储器804的一部分还可以包括非易失性随机存取存储器。例如，存储器804还可以存储设备类型的信息。该输入设备802可以包括触控板、指纹采传感器(用于采集用户的指纹信息)、麦克风、实体键盘等，输出设备803可以包括显示器(LCD等)、扬声器等。

具体实现中，本发明实施例中所描述的处理器801、存储器804、输入设备802和输出设备803可执行本发明实施例提供的图2或者图4所述的方法实施例所描述的实现方式，也可执行本发明实施例图7所描述的页面处理装置的实现方法，在此不再赘述。

在本发明的另一实施例中提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令被处理器执行时实现本发明实施例提供的图2或者图4所述的方法实施所描述的实现方式，所述计算机可读存储介质可以是前述任一实施例所述的终端设备的内部存储单元，例如终端设备的硬盘或内存。所述计算机可读存储介质也可以是所述终端设备的外部存储设备，例如所述终端设备上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述终端设备的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述终端设备所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取可读存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。

其中，所述的可读存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上所揭露的仅为本发明的部分实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术工作人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于本发明所涵盖的范围。

Claims (10)

1.一种页面处理方法，其特征在于，所述方法应用于终端设备，所述方法包括：

接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；

基于所述更新后的待渲染目标页面构建第一虚拟文档对象模型树，所述第一虚拟文档对象模型树包括至少一个第一文档对象模型元素节点，各个第一文档对象模型元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；

对比所述第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，所述第二虚拟文档对象模型树是基于所述待渲染目标页面构建的；

根据所述目标文档对象模型元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

2.根据权利要求1所述方法，其特征在于，所述对比所述第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，包括：

将所述第一虚拟文档对象模型树与所述第二虚拟文档对象模型树进行同层对比，得到同层对比结果；

根据所述同层对比结果，从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点。

3.根据权利要求1所述方法，其特征在于，所述基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面，包括：

基于所述页面更新指令的指示，从所述待渲染目标页面中确定出待更新目标组件，并从所述待更新目标组件包括的至少一个子组件中确定出待更新子组件；

在所述待渲染目标页面中根据所述页面更新指令对所述待更新子组件进行更新，得到更新后的待渲染目标页面。

4.根据权利要求1-3任一项所述方法，所述接收针对待渲染目标页面的页面更新指令之前，还包括：

展示开发编辑页面，所述开发编辑页面包括组件列表和页面编辑区，所述组件列表包括至少一个组件；

从所述组件列表中确定至少一个目标组件，并在所述页面编辑区中对所述至少一个目标组件中的各个目标组件进行排版处理，得到待渲染目标页面；

将所述各个目标组件与数据模型进行双向数据绑定，并获取所述各个目标组件在所述数据模型中各自对应的应用数据；

基于各个目标组件对应的应用数据、组件属性和所述各个目标组件之间的层级信息生成所述第二虚拟文档对象模型树，所述第二虚拟文档对象模型树包括至少一个第二文档对象模型元素节点，所述目标组件与所述第二文档对象模型元素节点一一对应；

基于所述第二虚拟文档对象模型树对所述待渲染目标页面进行渲染，得到目标页面。

5.根据权利要求4所述方法，其特征在于，所述基于所述第二虚拟文档对象模型树对所述待渲染目标页面进行渲染，得到目标页面之后，所述方法还包括：

接收组件删除指令，并根据所述组件删除指令从所述待渲染目标页面中确定待删除组件；

将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二文档对象模型元素节点中的一种或多种。

6.根据权利要求4所述方法，所述组件属性包括生命周期，其特征在于，所述基于所述第二虚拟文档对象模型树对所述待渲染目标页面进行渲染，得到目标页面之后，所述方法还包括：

检测所述各个目标组件的生命周期，并验证所述生命周期是否到达；

若所述生命周期到达，则将所述生命周期对应的目标组件确定为待删除组件，并将所述待删除组件从所述待渲染目标页面中移除，并对所述待删除组件占用资源进行释放，所述占用资源包括内存占用资源、网络请求资源、定时器资源和与所述待删除组件对应的第二文档对象模型元素节点中的一种或多种。

7.根据权利要求4所述方法，所述组件属性还包括功能属性，其特征在于，所述从所述组件列表中确定至少一个目标组件，并在所述页面编辑区中对所述至少一个目标组件中的各个目标组件进行排版操作，得到待渲染目标页面之后，所述方法还包括：

接收针对所述组件列表中组件的功能属性管理操作，并根据所述功能属性管理操作确定待管理组件，所述功能属性管理操作为业务功能新增操作、业务功能修改操作和业务功能删除操作的一种或多种；

对所述组件列表中所述待管理组件进行功能属性管理，并对所述待渲染目标页面中和所述待管理组件匹配的目标组件进行同步功能属性管理。

8.一种页面处理装置，其特征在于，所述页面处理装置配置于终端设备。所述页面处理装置包括：

数据获取模块，用于接收针对待渲染目标页面的页面更新指令，并基于所述页面更新指令对所述待渲染目标页面进行更新，得到更新后的待渲染目标页面；

数据处理模块，用于基于所述更新后的待渲染目标页面构建第一虚拟文档对象模型树，所述第一虚拟文档对象模型树包括至少一个第一文档对象模型元素节点，各个第一文档对象模型元素节点与所述更新后的待渲染目标页面包括的各个目标组件一一对应；

所述数据处理模块，还用于对比所述第一虚拟文档对象模型树和第二虚拟文档对象模型树，并基于对比结果从所述第一文档对象模型元素节点中确定出目标文档对象模型元素节点，其中，所述第二虚拟文档对象模型树是基于所述待渲染目标页面构建的；

所述数据处理模块，还用于根据所述目标文档对象模型元素节点对基于所述待渲染目标页面预渲染得到的目标页面进行更新，得到更新后的目标页面。

9.一种终端设备，其特征在于，包括处理器和存储器，所述处理器和所述存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行权利要求1-7任一项所述方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储计算机程序，所述计算机程序被处理器执行以实现权利要求1-7任意一项所述方法。

Images