CN110647322A - 列表渲染方法、装置、电子设备和计算机可读介质 - Google Patents

Abstract

本申请实施例公开了列表渲染方法、装置、电子设备和计算机可读介质。该方法的实施例包括：渲染空列表容器；接收列表数据，列表数据包括至少一个列表对象的节点信息；对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板；基于各列表对象的节点树和所包含的节点的布局属性，在空列表容器中，对各列表对象对应的视图树模板中的视图进行渲染。该实施方式降低了在列表渲染过程中的内存空间的占用量。

Description

列表渲染方法、装置、电子设备和计算机可读介质

技术领域

本申请实施例涉及计算机技术领域，具体涉及列表渲染方法、装置、电子设备和计算机可读介质。

背景技术

随着计算机技术的发展，应用于各种电子设备(如手机、平板等移动终端)的应用(Application，APP)越来越丰富。通常，应用可以采用渲染列表的方式，将信息展示于电子设备的前端。为了提升用户体验，越来越多的应用支持在页面滚动的过程中实时渲染列表。

现有的方式，通常在JS侧下发滚动视图组件中的列表数据后，分别创建各个列表对象(cell)中的各节点对应的视图(view)，从而生成各个列表对象对应的视图树(ViewTree)，最后对各个视图树中的视图进行渲染。然而，当页面中的列表对象较多时，则需创建大量的视图和视图树，导致占用内存空间较大，易造成内存不足及页面滚动时列表加载卡顿等情况。

发明内容

本申请实施例提出了列表渲染方法、装置、电子设备和计算机可读介质，以降低列表渲染过程中对内存空间的占用量。

第一方面，本申请实施例提供了一种列表渲染方法，该方法包括：接收列表数据，列表数据包括至少一个列表对象的节点信息；对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板，其中，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应；基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

第二方面，本申请实施例提供了一种列表渲染装置，该装置包括：…接收单元，被配置成接收列表数据，列表数据包括至少一个列表对象的节点信息；解析单元，被配置成对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；获取单元，被配置成将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板，其中，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应；渲染单元，被配置成基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

第三方面，本申请实施例提供了一种电子设备，包括：一个或多个处理器；存储装置，其上存储有一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如第一方面中所描述的方法。

第四方面，本申请实施例提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面中所描述的方法。

本申请实施例提供的列表渲染方法、装置、电子设备和计算机可读介质，在接收到列表数据后，对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；而后，将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板；最后基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。由此，可以使结构相同的节点树所对应的列表对象共用一个视图树模板，且可直接获取及复用已存在的视图树模板，因此，降低了视图树的创建数量，减少了内存空间的占用量。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是根据本申请的列表渲染方法的一个实施例的流程图；

图2是根据本申请的列表渲染方法的又一个实施例的流程图；

图3是根据本申请的列表渲染装置的一个实施例的结构示意图；

图4是适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

请参考图1，其示出了根据本申请的列表渲染方法的一个实施例的流程100。在本实施例中，列表渲染方法可应用于手机、平板电脑等各种电子设备。上述电子设备可以安装有各种应用(Application，APP)，如点评类应用、订餐类应用等。通常，在各类应用中可以以列表的形式呈现信息。例如，在订餐类应用中，可以通过渲染列表的方式呈现各个列表对象(每一条门店的信息，包括该门店的图片、简介、名称等)。

实践中，在应用呈现页面的过程中，通常需要进行JS(JavaScript)侧与原生(native)侧的交互。此处，JS侧与native侧的交互，可以理解为JS代码与应用的原生代码(例如Objective-C或者安卓等)或原生组件之间的交互。

其中，native侧通常可分为三层，分别为桥接(Bridge)层、运行时层(Runtime)层和渲染层(Render)层。上述桥接层用于解释和执行JavaScript代码。运行时层用于维护运行时环境，其可以对多种线程进行管理和调度，也可对一些注册表进行维护。渲染层可以进行视图的渲染，渲染层包含各视图及其管理类，可进行渲染相关接口的封装和实现方法等。本实施例中的具体操作可以由native侧执行，具体可以由native侧的渲染层执行。

该列表渲染方法，包括以下步骤：

步骤101，接收列表数据。

在本实施例中，列表渲染方法的执行主体可以接收JS侧发送的列表数据。其中，上述列表数据可以包括至少一个列表对象(cell)的节点信息。不同的列表对象可以对应有不同的节点信息。

实践中，一个列表可以由多个列表对象构成。每个列表对象可以包含多个节点，每个节点可以用于表征一个页面元素。作为示例，订餐类应用中可以以列表的形式呈现多条门店信息，每一条门店信息即为列表中的一个列表对象。其中，每一条门店信息可以包含门店的名称、图片、评分、距离、优惠活动信息、订单量等多项数据。门店信息所包含的每一项数据，即可视为一个页面元素。每一个元素可以作为列表对象的一个节点(node)，因而，每个列表对象中可以包含多个节点。

此处，对于每一个列表对象，该列表对象的节点信息可以是与该列表对象中的各个节点相关的各种信息，例如，可以包括但不限于的各节点的标识、种类、属性、父节点的标识、子节点的标识等信息。

需要说明的是，上述执行主体可以在渲染空的列表容器(如ListComponent)后，接收JS侧发送的列表数据。具体地，上述执行主体可以首先渲染空的列表容器。在渲染完成后，通知JS侧发送列表数据。之后，可以接收JS侧发送的列表数据。实践中，在用户持续滚动页面的过程中，每当滚动至已渲染的列表的底部时，均可以通知JS侧发送新的列表数据，从而执行本实施例中的步骤101-步骤104的操作。由此，可以实现边滑动页面边进行列表的渲染。

实践中，可以通过列表视图组件(例如ListView组件)来承载列表数据。其中，上述ListView组件支持多次渲染列表数据，而非一次性渲染所有列表数据，由此，利用ListView组件可实现在页面滑动的过程中持续渲染列表数据。此外，且ListView组件支持对已渲染且已滑出屏幕的列表对象的数据(如视图、视图树等)的复用，由此，在需要渲染新的列表对象时，可以复用已渲染的列表对象的视图、视图树等数据，从而降低内存空间的占用量。

步骤102，对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性。

在本实施例中，对于每一个列表对象，由于该列表对象的节点信息可以是与该列表对象中的各个节点相关的各种信息，例如，可以包括但不限于的各节点的标识、种类、属性、父节点的标识、子节点的标识等信息。因而，可以对该列表对象的节点信息进行分析，确定出该列表对象中的各节点之间的关系，从而生成用于表征各节点之间的关系的节点树(Node Tree)。实践中，节点树是节点即节点间的关系的集合。在节点树中，顶端的节点称为根节点。根节点之外的每个节点都有一个父节点。节点可以有任何数量的子节点。没有子节点的节点可称为叶子节点。拥有相同父节点的节点可称为同级节点。

此外，由于列表对象中的每一个节点可以指示一个页面元素，因此，节点信息中还可以包含各节点所指示的页面元素的属性信息(如文本、背景颜色、宽度、高度等、位置等)，因此，上述执行主体可以从节点信息中提取出或计算出各节点的布局属性(Layout)。此处，布局属性可以是用于控制元素的显示位置、显示形式和布局方式的属性。可选的，节点布局属性可以包括但不限于以下至少一项：节点所指示的页面元素的背景颜色、形状、尺寸、外边距、内边距、边界位置。

在本实施例的一些可选的实现方式中，每一个列表对象的节点信息可以包括该列表对象所包含的各节点的标识和上述各节点的父节点的标识。此时，对于每一个列表对象，上述执行主体通过如下步骤生成该列表对象对应的节点树：

第一步，从该列表对象所包含的节点中，查找父节点的标识为空的节点，将所查找到的节点作为根节点。

第二步，基于该列表对象所包含的其余节点的标识和各其余节点的父节点的标识，确定该列表对象所包含的各节点之间的父子关系。例如，节点N₁的父节点(ParentNode)为N₀，此时，节点N₁即为节点N₀的子节点(Children Node)。此时，可以建立节点N₁与节点N₀的父子关系。实践中，当某个节点存在多个子节点时，该节点的各子节点可称为同级节点(Sibling Node)。

第三步，生成用于描述上述各节点之间的父子关系的节点树。

步骤103，将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板。

在本实施例中，上述执行主体可以将所生成的各个节点树进行分析，将结构相同的节点树所对应的列表对象归入同一视图类型，从而得到所生成的各个节点树的视图类型。而后，可以获取各视图类型的视图树(View Tree)模板。

此处，上述执行主体中可以预先存储有多个视图树模板，每个视图树模板可以对应一种视图类型，每种视图类型可以对应一种节点树结构。实践中，每一种视图类型对应的视图树模板，可以是在首次渲染该视图类型的列表对象时创建的。即，首次出现一种新的节点树结构时，即可生成一种新的视图类型，从而创建一个新的视图树模板。

作为示例，分别与列表对象1、列表对象2、列表对象3、列表对象4、列表对象5对应的节点树分别为节点树1、节点树2、节点树3、节点树4和节点树5。其中，节点树1、节点树2和节点树3具有相同结构(可称为节点树结构1)，节点树4具有相同结构(可称为节点树结构2)。此时，可以将列表对象1、列表对象2和列表对象3归入同一视图类型(如视图类型A)，将列表对象4和列表对象5归入同一视图类型(如视图类型B)。而后，可以获取视图类型A的视图树模板(即与节点树结构1对应的视图树模板)和视图类型B的视图树模板(即与节点树结构2对应的视图树模板)。

需要说明的是，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应。例如，列表对象1的节点树1中包含节点a、节点b、节点c。其中，节点a的类型为文本类，节点b和节点c的类型均为图像类。此时，列表对象1所属视图类型A的视图树模板中，需要包含与节点a对应的视图a(用于渲染文本)、与节点b对应的视图b(用于渲染图像)和与节点c对应的视图c(用于渲染图像)。

在本实施例的一些可选的实现方式中，每一个列表对象的节点信息还可以包括该列表对象所包含的各节点的类型(如文本类、图像类等)。此时，上述执行主体可以按照如下步骤将结构相同的节点树所对应的列表对象归入同一视图类型：

第一步，对于所生成的每一个节点树，从该节点树的根节点起，利用递归算法记录各节点的类型、各节点的子节点的类型和各节点的子节点的数量，将所记录的信息汇总为字符串，并确定上述字符串的哈希值。

第二步，将具有相同哈希值的节点树作为结构相同的节点树，将结构相同的节点树所对应的列表对象归入同一视图类型。

步骤104，基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

在本实施例中，由于布局属性可以用于控制元素的显示位置、显示形式和布局方式等，因此，对于每一个列表对象，上述执行主体可以基于该列表对象的节点树和该列表对象所包含的节点的布局属性，在预先渲染的空的列表容器中，对各列表对象对应的视图树模板中的视图进行渲染。

在本实施例的一些可选的实现方式中，上述执行主体可以分别将每一个列表对象作为目标列表对象，将上述目标列表对象对应的视图模板作为目标视图模板，执行如下步骤：

第一步，对于上述目标列表对象中的每一个节点，确定上述目标视图树模板中与该节点对应的视图，将该节点的布局属性作为上述视图的属性。

第二步，基于上述目标视图树模板中的各个视图的属性，对上述目标视图树模板中的各个视图进行渲染。

本申请的上述实施例提供的方法，在接收到列表数据后，对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；而后，将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板；最后基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。由此，可以使结构相同的节点树所对应的列表对象共用一个视图树模板，且可直接获取及复用已存在的视图树模板，因此，降低了视图树的创建数量，减少了内存空间的占用量。

进一步参考图2，其示出了列表渲染方法的又一个实施例的流程200。该列表渲染方法的流程200，包括以下步骤：

步骤201，接收列表数据。

本实施例中的步骤201可参见图1所示的实施例中的步骤101，此处不再赘述。

步骤202，对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性。

本实施例中的步骤202可参见图1所示的实施例中的步骤102，此处不再赘述。

步骤203，对于所生成的每一个节点树，从该节点树的根节点起，利用递归算法记录各节点的类型、各节点的子节点的类型和各节点的子节点的数量，将所记录的信息汇总为字符串，并确定字符串的哈希值。

在本实施例中，每一个列表对象的节点信息可以包括该列表对象所包含的各节点的类型(如文本类、图像类等)。对于所生成的每一个节点树，上述执行主体可以从该节点树的根节点起，利用递归算法(recursion algorithm)逐一地记录该节点树中的每一个节点的类型、各节点的子节点的类型和各节点的子节点的数量。实践中，递归算法在计算机科学中是指一种通过重复将问题分解为同类的子问题而解决问题的方法。递归算法可以被用于解决很多的计算机科学问题。绝大多数编程语言支持函数的自调用，在这些语言中函数可以通过调用自身来进行递归。计算理论可以证明递归的作用可以完全取代循环，因此在很多函数编程语言中习惯用递归来实现循环。

具体地，上述执行主体可以首先记录根节点的类型、根节点的子节点的数量和类型。而后，可以将根节点的其中一个子节点作为父节点，记录该父节点的类型、该父节点的子节点的数量和类型。而后，可以将该父节点的其中一个子节点作为新的父节点，记录该新的父节点的类型、该父节点的子节点的数量和类型。当全部的节点均执行完此操作后，可以将所记录的信息汇总为字符串(即string类型的数据)。实践中，该字符串可以是JSON(JavaScript Object Notation，JS对象简谱)等格式的字符串。

在本实施例中，上述执行主体每得到一个节点树对应的字符串后，可以确定该字符串的哈希值。实践中，哈希值又可以称为散列值(hash values、hash codes、hash sums、或hashes)，哈希值是通过散列函数(Hash Function，也可以称为散列算法、哈希函数等)生成的值。散列函数可以把信息或数据压缩成摘要，使得数据量变小，将数据的格式固定。散列函数可以将数据打乱混合，重新创建一个数据，所创建的数据即为散列值。散列值通常用一个短的随机字母和数字组成的字符串来代表。

步骤204，将具有相同哈希值的节点树作为结构相同的节点树，将结构相同的节点树所对应的列表对象归入同一视图类型，并将哈希值作为视图类型的取值。

在本实施例中，上述执行主体可以将具有相同哈希值的节点树作为结构相同的节点树，将结构相同的节点树所对应的列表对象归入同一视图类型。

在本实施例中，可以将哈希值作为视图类型的取值。(即用哈希值表征视图类型)。

步骤205，对于每一视图类型，确定是否存在与该视图类型对应的视图树模板。

在本实施例中，对于步骤204所确定出的每一个视图类型，上述执行主体可以确定是否存在与该视图类型对应的视图树模板。实践中，上述执行主体中可以预先存储有多个视图树模板，每个视图树模板可以对应一种视图类型，每种视图类型可以对应一种节点树结构。实践中，每一种视图类型对应的视图树模板，可以是在首次渲染该视图类型的列表对象时创建的。即，首次出现一种新的节点树结构时，即可生成一种新的视图类型，从而创建一个新的视图树模板。

需要说明的是，由于视图类型可以使用哈希值来表征，因此，上述执行主体中可以存储有哈希值与视图树模板的对应关系。对于步骤204所确定出的每一个视图类型，可以通过查询该视图类型对应的哈希值，确定出与该哈希值具有对应关系的视图树模板，从而得到该视图类型的视图树模板。

步骤206，响应于确定存在，获取与该视图类型对应的视图树模板。

在本实施例中，对于每一视图类型，若存在与该视图类型对应的视图树模板，上述执行主体可以直接获取与该视图类型对应的视图树模板。

步骤207，响应于确定不存在，基于该视图类型中的列表对象的视图树，创建与该视图类型对应的视图树模板。

在本实施例中，对于每一视图类型，若不存在与该视图类型对应的视图树模板，上述执行主体可以创建与该视图类型对应的视图树模板。具体地，可以根据节点树的结构进行视图树模板的创建，使节点树中的节点与视图树模板中的视图一一对应。

步骤208，基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

在本实施例中，上述执行主体可以分别将每一个列表对象作为目标列表对象，将上述目标列表对象对应的视图模板作为目标视图模板，执行如下步骤：

第一步，对于上述目标列表对象中的每一个节点，确定上述目标视图树模板中与该节点对应的视图，将该节点的布局属性作为上述视图的属性。

第二步，基于上述目标视图树模板中的各个视图的属性，对上述目标视图树模板中的各个视图进行渲染。此处，由于布局属性可以用于控制元素的显示位置、显示形式和布局方式等，因此，上述执行主体可以按照各个布局属性所指示的显示位置、显示形式和布局方式等，渲染视图。

从图2中可以看出，与图1对应的实施例相比，本实施例中的列表渲染方法的流程200涉及了在已有视图树模板的情况下直接复用视图树模板的步骤，以及，在不存在视图树模板时创建视图树模板的步骤。由此，本实施例描述的方案可以直接获取及复用已存在的视图树模板，降低了视图树的创建数量，减少了内存空间的占用量。

进一步参考图3，作为对上述各图所示方法的实现，本申请提供了一种列表渲染装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图3所示，本实施例所述的列表渲染装置300包括：接收单元301，被配置成接收列表数据，上述列表数据包括至少一个列表对象的节点信息；解析单元302，被配置成对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；获取单元303，被配置成将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板，其中，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应；渲染单元304，被配置成基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

在本实施例的一些可选的实现方式中，上述获取单元进一步被配置成：对于每一视图类型，确定是否存在与该视图类型对应的视图树模板；响应于确定存在，获取与该视图类型对应的视图树模板；响应于确定不存在，基于该视图类型中的列表对象的视图树，创建与该视图类型对应的视图树模板。

在本实施例的一些可选的实现方式中，每一个列表对象的节点信息包括该列表对象所包含的各节点的标识和上述各节点的父节点的标识；以及上述解析单元进一步被配置成：对于每一个列表对象，执行如下步骤：从该列表对象所包含的节点中，查找父节点的标识为空的节点，将所查找到的节点作为根节点；基于该列表对象所包含的其余节点的标识和各其余节点的父节点的标识，确定该列表对象所包含的各节点之间的父子关系；生成用于描述上述各节点之间的父子关系的节点树。

在本实施例的一些可选的实现方式中，每一个列表对象的节点信息包括该列表对象所包含的各节点的类型；以及上述获取单元进一步被配置成：对于所生成的每一个节点树，从该节点树的根节点起，利用递归算法记录各节点的类型、各节点的子节点的类型和各节点的子节点的数量，将所记录的信息汇总为字符串，并确定上述字符串的哈希值；将具有相同哈希值的节点树作为结构相同的节点树，将结构相同的节点树所对应的列表对象归入同一视图类型。

在本实施例的一些可选的实现方式中，上述渲染单元进一步被配置成：分别将每一个列表对象作为目标列表对象，将上述目标列表对象对应的视图模板作为目标视图模板，执行如下步骤：对于上述目标列表对象中的每一个节点，确定上述目标视图树模板中与该节点对应的视图，将该节点的布局属性作为上述视图的属性；基于上述目标视图树模板中的各个视图的属性，对上述目标视图树模板中的各个视图进行渲染。

在本实施例的一些可选的实现方式中，上述布局属性包括以下至少一项：节点所指示的页面元素的背景颜色、形状、尺寸、外边距、内边距、边界位置。

本申请的上述实施例提供的装置，在接收到列表数据后，对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；而后，将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板；最后基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。由此，可以使结构相同的节点树所对应的列表对象共用一个视图树模板，且可直接获取及复用已存在的视图树模板，因此，降低了视图树的创建数量，减少了内存空间的占用量。

下面参考图4，其示出了适于用来实现本申请实施例的电子设备的计算机系统400的结构示意图。图4示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图4所示，计算机系统400包括中央处理单元(CPU)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储部分408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有系统400操作所需的各种程序和数据。CPU 401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

以下部件连接至I/O接口405：包括键盘、鼠标等的输入部分406；包括诸如液晶显示器(LCD)等以及扬声器等的输出部分407；包括硬盘等的存储部分408；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分409。通信部分409经由诸如因特网的网络执行通信处理。驱动器410也根据需要连接至I/O接口405。可拆卸介质411，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器410上，以便于从其上读出的计算机程序根据需要被安装入存储部分408。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分409从网络上被下载和安装，和/或从可拆卸介质411被安装。在该计算机程序被中央处理单元(CPU)401执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：渲染空列表容器；接收列表数据，列表数据包括至少一个列表对象的节点信息；对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板；基于各列表对象的节点树和所包含的节点的布局属性，在空列表容器中，对各列表对象对应的视图树模板中的视图进行渲染。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种列表渲染方法，其特征在于，包括：

接收列表数据，所述列表数据包括至少一个列表对象的节点信息；

对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；

将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板，其中，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应；

基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

2.根据权利要求1所述的列表渲染方法，其特征在于，所述获取各视图类型的视图树模板，包括：

对于每一视图类型，确定是否存在与该视图类型对应的视图树模板；

响应于确定存在，获取与该视图类型对应的视图树模板；

响应于确定不存在，基于该视图类型中的列表对象的视图树，创建与该视图类型对应的视图树模板。

3.根据权利要求1所述的列表渲染方法，其特征在于，每一个列表对象的节点信息包括该列表对象所包含的各节点的标识和所述各节点的父节点的标识；以及

对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，包括：

对于每一个列表对象，执行如下步骤：

从该列表对象所包含的节点中，查找父节点的标识为空的节点，将所查找到的节点作为根节点；

基于该列表对象所包含的其余节点的标识和各其余节点的父节点的标识，确定该列表对象所包含的各节点之间的父子关系；

生成用于描述所述各节点之间的父子关系的节点树。

4.根据权利要求3所述的列表渲染方法，其特征在于，每一个列表对象的节点信息包括该列表对象所包含的各节点的类型；以及

所述将结构相同的节点树所对应的列表对象归入同一视图类型，包括：

对于所生成的每一个节点树，从该节点树的根节点起，利用递归算法记录各节点的类型、各节点的子节点的类型和各节点的子节点的数量，将所记录的信息汇总为字符串，并确定所述字符串的哈希值；

将具有相同哈希值的节点树作为结构相同的节点树，将结构相同的节点树所对应的列表对象归入同一视图类型。

5.根据权利要求1所述的列表渲染方法，其特征在于，所述基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染，包括：

分别将每一个列表对象作为目标列表对象，将所述目标列表对象对应的视图模板作为目标视图模板，执行如下步骤：

对于所述目标列表对象中的每一个节点，确定所述目标视图树模板中与该节点对应的视图，将该节点的布局属性作为所述视图的属性；

基于所述目标视图树模板中的各个视图的属性，对所述目标视图树模板中的各个视图进行渲染。

6.根据权利要求1-5之一所述的列表渲染方法，其特征在于，所述布局属性包括以下至少一项：节点所指示的页面元素的颜色、背景形状、尺寸、外边距、内边距、边界位置。

7.一种列表渲染装置，其特征在于，包括：

接收单元，被配置成接收列表数据，所述列表数据包括至少一个列表对象的节点信息；

解析单元，被配置成对各列表对象的节点信息进行解析，生成分别与各列表对象对应的节点树，并确定各列表对象所包含的节点的布局属性；

获取单元，被配置成将结构相同的节点树所对应的列表对象归入同一视图类型，获取各视图类型的视图树模板，其中，每一个列表对象的节点树中的节点与该列表对象所属视图类型的视图树模板中的视图一一对应；

渲染单元，被配置成基于各列表对象的节点树和所包含的节点的布局属性，对各列表对象对应的视图树模板中的视图进行渲染。

8.根据权利要求7所述的列表渲染装置，其特征在于，所述渲染单元进一步被配置成：

分别将每一个列表对象作为目标列表对象，将所述目标列表对象对应的视图模板作为目标视图模板，执行如下步骤：

对于所述目标列表对象中的每一个节点，确定所述目标视图树模板中与该节点对应的视图，将该节点的布局属性作为所述视图的属性；

基于所述目标视图树模板中的各个视图的属性，对所述目标视图树模板中的各个视图进行渲染。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一所述的方法。

Images