CN112417344B - 渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种渲染方法、装置、电子设备及存储介质，其中，方法包括：获取回滚指令；根据回滚指令控制列表进行回滚，并获取当前视口之中的回滚页面元素；获取回滚页面元素的渲染对象集合，其中，渲染对象集合包括多个渲染对象；根据渲染对象集合之中的多个渲染对象对回滚页面元素进行渲染。该方法在获取到回滚页面元素时，无需重新创建回滚页面元素的渲染对象，而是获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合对回滚页面元素进行渲染，实现了对渲染对象集合的复用，不仅可以减少流量消耗，而且可以加快渲染速度，改善用户的观看效果。

Description

渲染方法、装置、电子设备及存储介质

技术领域

本公开涉及互联网技术领域，尤其涉及一种渲染方法、装置、电子设备及存储介质。

背景技术

目前，随着电子设备，例如智能设备功能的不断强大，对于智能设备的功能要求也越来越多，因此智能设备所需要显示的页面内容也越来越多，越来越丰富。然而，页面内容的丰富也会带来加载时间长等问题。

相关技术之中，在页面元素从视口滚动出去后再回滚至视口时，通常是重新创建页面元素的渲染对象，不仅增加了流量消耗，而且导致渲染速度缓慢、影响了用户的观看效果。

发明内容

本公开旨在至少在一定程度上解决相关技术中的技术问题之一。

为此，本公开提出了如下技术方案。

本公开第一方面实施例提出了一种渲染方法，包括：获取回滚指令；根据所述回滚指令控制列表进行回滚，并获取当前视口之中的回滚页面元素；获取所述回滚页面元素的渲染对象集合，其中，所述渲染对象集合包括多个渲染对象；根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染。

另外，根据本公开上述实施例的渲染方法还可以具有如下附加的技术特征。

根据本公开的一个实施例，所述获取所述回滚页面元素的渲染对象集合，包括：获取所述回滚页面元素的多个属性和元素内容；根据所述多个属性从缓存池之中获取所述多个属性对应的多个属性渲染对象，以及所述元素内容对应的内容渲染对象。

根据本公开的一个实施例，所述根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染，包括：根据所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

根据本公开的一个实施例，所述根据所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染，包括：从所述缓存池之中获取所述回滚页面元素对应的布局信息；根据所述布局信息对所述多个属性渲染对象和所述内容渲染对象进行排序；根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

根据本公开的一个实施例，所述根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染，包括：按照排序顺序对所述多个属性渲染对象和所述内容渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；根据所述渲染对象子树对所述回滚页面元素进行渲染。

根据本公开的一个实施例，渲染方法，还包括：在页面元素退出所述当前视口时，将所述页面元素对应的所述渲染对象集合存储至所述缓存池。

根据本公开的一个实施例，所述页面元素对应的所述渲染对象集合，通过以下步骤获得：获得所述页面元素的内容和多个属性；根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合。

根据本公开的一个实施例，所述根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合，包括：根据所述页面元素的内容生成内容渲染对象，并将所述内容渲染对象添加至所述渲染对象集合；根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象，并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。

本公开第二方面实施例提出了一种渲染装置，包括：第一获取模块，用于获取回滚指令；第一控制模块，用于根据所述回滚指令控制列表进行回滚，并获取当前视口之中的回滚页面元素；第一获取模块，用于获取所述回滚页面元素的渲染对象集合，其中，所述渲染对象集合包括多个渲染对象；第一渲染模块，用于根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染。

另外，根据本公开上述实施例的渲染装置还可以具有如下附加的技术特征。

根据本公开的一个实施例，所述第二获取模块，包括：第一获取单元，用于获取所述回滚页面元素的多个属性和元素内容；第二获取单元，用于根据所述多个属性从缓存池之中获取所述多个属性对应的多个属性渲染对象，以及所述元素内容对应的内容渲染对象。

根据本公开的一个实施例，所述第一控制模块，包括：第一获取单元，用于获取所述回滚页面元素的多个属性和元素内容；第二获取单元，用于根据所述多个属性从缓存池之中获取所述多个属性对应的多个属性渲染对象，以及所述元素内容对应的内容渲染对象。

根据本公开的一个实施例，所述第一渲染单元，具体用于：从所述缓存池之中获取所述回滚页面元素对应的布局信息；根据所述布局信息对所述多个属性渲染对象和所述内容渲染对象进行排序；根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

根据本公开的一个实施例，所述第一渲染单元，具体还用于：按照排序顺序对所述多个属性渲染对象和所述内容渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；根据所述渲染对象子树对所述回滚页面元素进行渲染。

根据本公开的一个实施例，渲染装置，还包括：第一存储模块，用于在页面元素退出所述当前视口时，将所述页面元素对应的所述渲染对象集合存储至所述缓存池。

根据本公开的一个实施例，渲染装置，还包括：第三获取模块，用于获得所述页面元素的内容和多个属性；第一生成模块，用于根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合。

根据本公开的一个实施例，所述第一生成模块，包括：第一生成单元，用于根据所述页面元素的内容生成内容渲染对象，并将所述内容渲染对象添加至所述渲染对象集合；第二生成单元，用于根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象，并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。

本公开第三方面实施例提出了一种电子设备，包括：处理器；用于存储所述处理器的可执行指令的存储器；其中，所述处理器被配置为调用并执行所述存储器存储的可执行指令，以实现本公开第一方面实施例提出的渲染方法。

本公开第四方面实施例提出了一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开第一方面实施例提出的渲染方法。

本公开第五方面实施例提出了一种计算机程序产品，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行本公开第一方面实施例提出的渲染方法。

本公开实施例的技术方案，在获取到回滚页面元素时，无需重新创建回滚页面元素的渲染对象，而是获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合对回滚页面元素进行渲染，实现了对渲染对象集合的复用，不仅可以减少流量消耗，而且可以加快渲染速度，改善用户的观看效果。

本公开附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。

附图说明

图1是根据本公开实施例的渲染方法的流程图。

图2是根据本公开一个实施例的获取回滚页面元素的渲染对象集合的流程图。

图3是根据本公开一个实施例的根据多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染的流程图。

图4是根据本公开一个示例的根据排序之后的多个渲染对象对回滚页面元素进行渲染的流程图。

图5是根据本公开一个实施例的获取页面元素对应的渲染对象集合的流程图。

图6是根据本公开一个示例的页面元素与多个渲染对象间的对应关系的示意图。

图7是根据本公开一个示例的生成页面元素的渲染对象集合的流程图。

图8是根据本公开实施例的渲染装置的结构示意图。

图9是根据本公开实施例的电子设备的结构示意图。

具体实施方式

下面详细描述本公开的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本公开，而不能理解为对本公开的限制。

下面参考附图描述本公开实施例的渲染方法、装置、电子设备及存储介质。

图1是根据本公开实施例的渲染方法的流程图，执行主体可以为电子设备，具体的，电子设备可以是但不限于计算机、移动终端，移动终端可以是但不限于个人电脑、智能手机、IPAD等。

如图1所示，该渲染方法包括以下步骤S101至S104。

S101，获取回滚指令。

其中，回滚可以理解为对页面或者视口进行与前一个滚动操作相反的滚动。可以理解的是，回滚可以使从视口滚动出去的页面元素再次滚动至当前视口。

本公开实施例，可将用于指示页面或者视口的列表进行回滚的指令称为回滚指令，该指令可以是根据用户对页面进行的触发控制生成的。用户通过相关操作（比如触屏操作、滚动操作等）对页面进行触发控制，例如，用户可通过滚动操作触发页面滚动，页面的滚动操作例如可以是：鼠标左键单击并拖拽滚动条的操作，或者，可以是滚动鼠标的操作，或者、还可以是在触摸屏中执行的滑动操作等，本公开实施例对此不做限定。

在实际应用中，电子设备可实时监控外界对页面发送的指令，在监控到有用户发送的回滚指令时，及时获取回滚指令。

S102，根据回滚指令控制列表进行回滚，并获取当前视口之中的回滚页面元素。

其中，视口可以理解为浏览器显示页面元素的屏幕区域，视口可包括布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。

其中，回滚页面元素，可以理解为从视口滚动出去后再次滚动至当前视口的页面元素。可以理解的是，页面元素可以是组成页面的基本元素，例如文字、图像、表格、超链接等等。

具体地，在获取到回滚指令之后，响应于回滚指令将控制列表进行回滚，回滚之后，获取当前视口之中的回滚页面元素。其中，回滚页面元素的数量可以是至少一个，回滚页面元素的类型可以也可以是至少一种。

S103，获取回滚页面元素的渲染对象集合，其中，渲染对象集合包括多个渲染对象。

本公开实施例中，无需为每个页面元素创建一个全功能的渲染对象，而是为一个页面元素创建一个包括多个渲染对象的渲染对象集合，通过渲染对象集合实现对页面元素的渲染，因此，提高了页面元素的渲染对象的创建速度，对页面元素的渲染，可以根据页面元素对应的多个渲染对象同时进行渲染，从而提高了页面元素的渲染速度，减少掉帧的可能性。

具体地，可以预先为每个页面元素创建一个包括多个渲染对象的渲染对象集合，并将每个渲染对象集合进行缓存，或者，可在页面元素从视口之中滚动出去（即退出）时，将该页面元素对应的渲染对象集合进行缓存。进而在获取到回滚页面元素之后，可在已缓存的各个渲染对象集合中获取回滚页面元素的渲染对象集合。

S104，根据渲染对象集合之中的多个渲染对象对回滚页面元素进行渲染。

在获取到渲染对象集合之后，根据其中的多个渲染对象对回滚页面元素进行渲染。需要说明的是，在回滚页面元素为多个时，每个回滚页面元素对应一个渲染对象集合，于是可以对多个回滚页面元素分别对应的多个渲染对象集合进行并行渲染，以提高渲染速度，且减少或者避免页面卡顿的现象。

举例而言，如果在视口A的列表向下滚动之前，视口A之中包括页面元素Y1和Y2，在视口A向下滚动之后，视口B中包括页面元素Y2和Y3，在视口B的列表向上滚动（回滚）之后，当前视口C中包括页面元素Y1和Y4，那么，可确定出Y1为回滚页面元素，于是可获取Y1对应的渲染对象集合，进而根据该渲染对象集合中的所有渲染对象对回滚页面元素Y1进行渲染，使得用户不用等待较长时间即可显示渲染的页面元素Y1。

由此，在获取到回滚页面元素时，无需重新创建回滚页面元素的渲染对象，而是获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合对回滚页面元素进行渲染，实现了对渲染对象集合的复用，不仅可以减少流量消耗，而且可以加快渲染速度，改善用户的观看效果。

需要说明的是，在上述步骤S103中，获取回滚页面元素的渲染对象集合时，为了防止误获取现象，保证准确获取到渲染对象集合，可根据回滚页面元素的属性和内容进行获取。

即在本公开的一个实施例中，上述步骤S103，可包括以下步骤S201及S202。

S201，获取回滚页面元素的多个属性和元素内容。

其中，元素内容可以是指回滚页面元素所包含的视觉上能看到的内容，例如可以是文字内容、图像内容等。

其中，回滚页面元素的属性可包括但不限于效果属性、背景属性、颜色属性等，不同的页面元素可包括不同的属性，例如，当页面元素为文本时，可包括字体大小、颜色、背景色、下划线等属性。

本公开实施例，可预先设置包括页面元素和对应的多个属性的属性库或者属性表，也即该属性库或者属性表可包含任何页面元素及对应的多个属性。

具体地，在获取到回滚页面元素之后，可确定出回滚页面元素的内容，同时，可通过查询预先设置的属性库或者属性表，得到页面元素对应的多个属性。

需要说明的是，该步骤S201中获取回滚页面元素的多个属性和元素内容的方式还可以是相关技术中的其他方式，只要可以实现步骤S201即可，本公开实施例对此不做具体限定。

S202，根据多个属性从缓存池之中获取多个属性对应的多个属性渲染对象，以及元素内容对应的内容渲染对象。

其中，缓存池可以是指用于缓存渲染对象集合的缓存器。本公开实施例中，可将属性对应的渲染对象称为属性渲染对象，例如背景色渲染对象，可将元素内容对应的渲染对象称为内容渲染对象，内容渲染对象可以是一个通用的渲染对象，可以是负责加载页面元素的内容的，例如文字渲染对象，就是加载页面元素之中的文字内容，其并不是与页面的具体内容有关，可以将内容渲染对象理解为一个“容器”。

具体地，可在页面元素从视口之中滚动出去时，将该页面元素对应的多个属性渲染对象和内容渲染对象缓存至缓存池中，在获取到回滚页面元素的多个属性和元素内容之后，根据多个属性从缓存池之中获取多个属性对应的多个属性渲染对象，以及元素内容对应的内容渲染对象，例如图片渲染对象。之后，即可执行上述步骤S104，即根据获取到的渲染对象对回滚页面元素进行渲染。

举例而言，如果页面元素文本框的多个属性渲染对象包括背景色渲染对象、字体颜色渲染对象及动画渲染对象，以及内容渲染对象：文字渲染对象，那么可将背景色渲染对象、字体颜色渲染对象、动画渲染对象、及文字渲染对象缓存于缓存池中，在该文本框再次回滚至当前视口时，可根据文本框的多个属性：背景色、字体颜色及动画属性从缓存池之中获取背景色渲染对象、字体颜色渲染对象及动画渲染对象，以及该文本框对应的文本渲染对象。之后，根据背景色渲染对象、字体颜色渲染对象、动画渲染对象及文本渲染对象对该文本框进行渲染。

由此，根据多个属性从缓存池之中获取多个属性对应的多个属性渲染对象，以及元素内容对应的内容渲染对象，可以保证渲染对象获取无误，提高了获取可靠性。

在执行完上述步骤S201至S202之后，即可执行上述步骤S104，即根据获取到的多个渲染对象对回滚页面元素进行渲染，其中获取到的渲染对象为多个属性对应的多个属性渲染对象，以及元素内容对应的内容渲染对象。

因此，在本公开的一个实施例中，上述步骤S104，可以包括：根据多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染。

具体地，在获取到多个属性对应的多个属性渲染对象，以及回滚页面元素内容对应的内容渲染对象之后，根据多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染，以实现对回滚页面元素的渲染。由此，根据属性和内容对回滚页面元素进行渲染，可以提高渲染的可靠性。

举例而言，如果3个回滚页面元素H1、H2、H3，其中H1对应5个属性、H2对应4个属性、H3对应3个属性，缓存池中包含H1对应的内容渲染对象d1、H2对应的内容渲染对象d2、H3对应的内容渲染对象d3，还包含12个属性渲染对象。那么，可在缓存池获取回滚页面元素H1、H2、H3分别对应的多个属性渲染对象及一个内容渲染对象，以根据获取到的渲染对象对回滚页面元素H1、H2、H3进行渲染，此时，可以实现对页面元素H1、H2、H3的并行渲染。

需要说明的是，本公开实施中，为了避免对回滚页面元素的进行重新布局计算，可将页面元素的布局结果也进行缓存，且在进行渲染时，结合布局结果进行渲染。

即在本公开的一个实施例中，如图3所示，根据多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染，可包括以下步骤S301至S303。

S301，从缓存池之中获取回滚页面元素对应的布局信息。

本公开实施例，可将记录页面元素在页面中或者视口中的布局位置和/或布局方式的信息称为布局信息，例如文本的行数和列数等等，也可以这样理解：页面元素基于其布局信息将该页面元素的内容显示在页面或者视口之中。可在页面元素生成时，将页面元素的布局信息缓存于缓存池中，或者，在页面元素从视口中滚动出去时，将该页面元素的布局信息缓存于缓存池中，以供随时调用。

S302，根据布局信息对多个属性渲染对象和内容渲染对象进行排序。

S303，根据排序之后的多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染。

具体地，在获取到多个属性渲染对象和内容渲染对象之后，进一步地从缓存池之中获取回滚页面元素对应的布局信息，可根据布局信息对多个属性渲染对象和内容渲染对象的等级进行排序。具体而言，当页面元素为多个时，可先根据多个内容渲染对象的等级，对渲染对象集合之中的多个内容渲染对象进行排序，然后根据每个页面元素对应的多个属性对应的等级，对每个渲染对象集合之中的多个属性内容渲染对象进行排序。排序时，可以进行顺序排序，等级越高，渲染顺序越靠前，从而排序越靠前；反之，等级越低，渲染顺序越靠后，从而排序越靠后。

举例而言，如果回滚页面元素Y1和Y2分别对应内容渲染对象A1、A2、且2个回滚页面元素均对应3个属性b1、b2、b3，分别对应的属性渲染对象为B1、B2、B3，根据回滚页面元素Y1和Y2的布局信息（比如Y2位于Y1的下层）可得到A1、A2的等级为A1高于A2，b1、b2、b3对应的等级从高到低依次为b2→b1→b3。

进一步地，如图4所示，上述步骤S303可包括以下步骤S401至S402。

S401，按照排序顺序对多个属性渲染对象和内容渲染对象进行拼接以生成回滚页面元素对应的渲染对象子树。

S402，根据渲染对象子树对回滚页面元素进行渲染。

具体地，按照多个属性渲染对象和内容渲染对象的排序顺序，将其进行依次拼接，以生成回滚页面元素对应的渲染对象子树。需要说明的是，当回滚页面元素的数量为多个时，可生成每个回滚页面元素对应的渲染对象子树，从而生成多个渲染对象子树，按照多个渲染对象子树分别对多个回滚页面元素进行并行渲染。

如上所述，描述了在视口之中的页面元素经滚动之后又回滚至当前视口之中时（将又回滚到当前视口的页面元素称为回滚页面元素），从缓存池中获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合之中的多个渲染对象对回滚页面元素进行渲染。为了有效实现这一过程，可在页面元素退出当前视口时，将其对应的渲染对象集合存储至缓存池中。

即在本公开的一个实施例中，渲染方法，还可包括：在页面元素退出当前视口时，将页面元素对应的渲染对象集合存储至缓存池。

需要说明的是，可根据用户的滚动指令控制列表进行滚动，从而使得某些页面元素退出当前视口。

具体地，可实时对视口之中的页面元素的状态进行监控，在监控到页面元素退出当前视口时，将该页面元素对应的渲染对象集合存储至缓存池中。之后（在控制页面回滚之后），如果退出视口的某些页面元素有回滚至当前视口，可在缓存池中获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合之中的多个渲染对象对回滚页面元素进行渲染。

由此，在页面元素滚动出去之后，将其渲染对象集合进行缓存，如果回滚至当前视口的话，则从缓存池中获取渲染对象集合，实现快速显示，改善了用户观看效果。

在本公开的一个实施例中，如图5所示，页面元素对应的渲染对象集合，可通过以下步骤S501及S502获得。

S501，获得页面元素的内容和多个属性。

其中，页面元素的内容可以是指页面元素所包含的视觉上能看到的内容，可以是文字中包含的内容，例如“五颜六色的花朵开满了整个花园”，也可以是图像中包含的内容，例如图像中的动物、树木、花朵等。

其中，页面元素的属性可包括但不限于效果属性、背景属性、颜色属性等，不同的页面元素可包括不同的属性，例如，当页面元素为文本时，可包括字体大小、颜色、背景色、下划线等属性。

本公开实施例，可预先设置包括页面元素和对应的多个属性的属性库或者属性表，也即该属性库或者属性表可包含任何页面元素及对应的多个属性。

具体地，可先获取视口中的页面元素，在获取到多个页面元素之后，可确定出页面元素的内容，同时，可通过查询预先设置的属性库或者属性表，得到页面元素对应的多个属性。

需要说明的是，该步骤S501中获取页面元素的内容和属性的方式还可以是相关技术中的其他方式，只要可以实现步骤S501即可，本公开实施例对此不做具体限制。

S502，根据页面元素的内容和多个属性生成页面元素对应的渲染对象集合。其中，每个渲染对象集合包括多个渲染对象。

本公开实施例中，一个页面元素的每个属性对应一个渲染对象，例如一个文本属性、一个按钮属性或一个列表属性。进而一个页面的多个属性对应相应的多个渲染对象（组成渲染对象集合），多个页面元素对应多个渲染对象集合。

需要说明的是，对页面元素渲染最终的目的是使页面元素对应的内容以渲染效果的方式显示于页面，例如，将页面中的内容（图片）以“飞入”的方式显示于页面，因而渲染需要结合页面元素具体的内容，基于此，本公开实施例可将页面元素的内容和页面元素对应的多个属性结合起来，生成多个属性对应的多个渲染对象，该多个渲染对象组成一个页面元素的渲染对象集合。

举例而言，如图6所示，如果待处理页面包含3个页面元素Y1、Y2、Y3，其中Y1对应5个属性（图6中的属性1表示第一个属性）、Y2对应4个属性、Y3对应3个属性，那么，可对应Y1生成包括5个渲染对象的渲染集合J1（图6中的渲染对象1表示第一个渲染对象）、对应Y2生成包括4个渲染对象的渲染集合J2、对应Y3生成包括3个渲染对象的渲染集合J3，进而3个页面元素Y1、Y2、Y3分别对应3个渲染对象集合J1、J2、J3。也就是说，对每一个页面元素建立多个渲染对象，相较于建立一个全能力的渲染对象，提高了页面元素的渲染对象的创建速度，对页面元素的渲染，可以根据页面元素对应的多个渲染对象同时进行渲染，从而提高了页面元素的渲染速度，减少掉帧的可能性。

进一步地，如图7所示，上述步骤S502，可包括以下步骤S701和S702。

S701，根据页面元素的内容生成内容渲染对象，并将内容渲染对象添加至渲染对象集合。

S702，根据页面元素的多个属性生成页面元素的多个属性渲染对象，并将页面元素的多个属性渲染对象添加至渲染对象集合。

本公开实施例中，多个属性渲染对象包括：显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。其中，显示效果处理渲染对象可用于进行页面元素的显示效果的渲染，例如，显示效果为火焰显示；操作处理渲染对象可用于进行页面元素的操作处理的渲染，动画处理渲染对象可用于进行页面元素的动画渲染，布局渲染对象可用于进行页面元素的布局渲染。

具体地，本公开实施例，可预先设置空的渲染对象集合，在获取到页面元素的内容和多个属性之后，根据每个页面元素的内容生成一个内容渲染对象，并将内容渲染对象添加至渲染对象集合，还可根据每个页面元素的每个属性生成一个属性渲染对象，从而生成页面元素的多个属性渲染对象，并将页面元素的多个属性渲染对象添加至渲染对象集合，从而得到渲染对象集合。

举例而言，如果3个页面元素Y1、Y2、Y3，其内容分别为N1、N2、N3，其中Y1对应5个属性、Y2对应4个属性、Y3对应3个属性，那么，可对应内容N1生成一个内容渲染对象d1、可对应内容N2生成一个内容渲染对象d2、可对应内容N3生成一个内容渲染对象d3，对应12个属性分别生成属性渲染对象s1、s2、s3、s4、s5、s6、s7、s8、s9、s10、s11及s12，将内容渲染对象及属性渲染对象均添加至渲染对象集合，从而形成渲染对象集合｛d1,d2,d3,s1,s2,s3,s4,s5,s6,s7,s8,s9,s10,s11,s12｝。

需要说明的是，在执行完上述步骤S701和S702后，即可根据渲染对象集合之中的多个渲染对象对页面元素进行渲染。

由此，分别对应页面元素的内容和属性进行渲染对象的生成，不仅提高了渲染对象的创建速度，而且保证了覆盖所有可能的渲染效果，丰富了渲染对象。

需要说明的是，相关技术中，由于页面元素的渲染是串行的，因此会导致页面的渲染更加缓慢，从而导致掉帧的可能性增加，而且，容易导致卡顿。而本公开实施例中，对每一个页面元素建立多个渲染对象，该多个渲染对象构成一个渲染对象集合，即多个页面元素分别对应多个渲染对象集合，从而在进行渲染时，可对页面对应的多个渲染对象集合进行并行渲染，以加快渲染速度，减少掉帧的可能性，并减少或者避免卡顿现象。

举例而言，如果3个页面元素Y1、Y2、Y3，其中Y1对应5个属性、Y2对应4个属性、Y3对应3个属性，那么，可对应Y1 生成包括5个渲染对象的渲染集合J1、对应Y2生成包括4个渲染对象的渲染集合J2、对应Y3生成包括3个渲染对象的渲染集合J3，进而3个页面元素Y1、Y2、Y3分别对应3个渲染对象集合J1、J2、J3（该3个渲染对象集合包括12个渲染对象）。之后，根据3个渲染对象集合J1、J2、J3包含的12个渲染对象生成渲染树，进而可以对该12个渲染对象进行并行渲染，以实现对对页面元素Y1、Y2、Y3的并行渲染。

由此，通过并行渲染实现渲染，可以加快渲染速度，减少掉帧的可能性，并减少或者避免页面卡顿的现象。

本公开实施例还提出了一种渲染装置，图8是根据本公开实施例的渲染装置的结构示意图。

如图8所示，该渲染装置100包括：第一获取模块110、第一控制模块120、第二获取模块130及第一渲染模块140。

其中，第一获取模块110，用于获取回滚指令；第一控制模块120，用于根据回滚指令控制列表进行回滚，并获取当前视口之中的回滚页面元素；第二获取模块130，用于获取回滚页面元素的渲染对象集合，其中，渲染对象集合包括多个渲染对象；第一渲染模块140，用于根据渲染对象集合之中的多个渲染对象对回滚页面元素进行渲染。

在一个实施例中，第二获取模块130，可包括：第一获取单元，用于获取回滚页面元素的多个属性和元素内容；第二获取单元，用于根据多个属性从缓存池之中获取多个属性对应的多个属性渲染对象，以及元素内容对应的内容渲染对象。

在一个实施例中，第一渲染模块140，可包括：第一渲染单元，用于根据多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染。

在一个实施例中，第一渲染单元，具体可用于：从缓存池之中获取回滚页面元素对应的布局信息；根据布局信息对多个属性渲染对象和内容渲染对象进行排序；根据排序之后的多个属性渲染对象和内容渲染对象对回滚页面元素进行渲染。

在一个实施例中，第一渲染单元，具体还用于：按照排序顺序对多个属性渲染对象和内容渲染对象进行拼接以生成回滚页面元素对应的渲染对象子树；根据渲染对象子树对回滚页面元素进行渲染。

在一个实施例中，渲染装置100，还可包括：第一存储模块，用于在页面元素退出当前视口时，将页面元素对应的渲染对象集合存储至缓存池。

在一个实施例中，渲染装置100，还可包括：第三获取模块，用于获得页面元素的内容和多个属性；第一生成模块，用于根据页面元素的内容和多个属性生成页面元素对应的渲染对象集合。

在一个实施例中，第一生成模块，可包括：第一生成单元，用于根据页面元素的内容生成内容渲染对象，并将内容渲染对象添加至渲染对象集合；第二生成单元，用于根据页面元素的多个属性生成页面元素的多个属性渲染对象，并将页面元素的多个属性渲染对象添加至渲染对象集合。

需要说明的是，该渲染装置的具体实施方式可参见上述渲染方法的具体实施方式，为避免冗余，此处不再详细赘述。

本公开实施例的渲染装置，在获取到回滚页面元素时，无需重新创建回滚页面元素的渲染对象，而是获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合对回滚页面元素进行渲染，实现了对渲染对象集合的复用，不仅可以减少流量消耗，而且可以加快渲染速度，改善用户的观看效果。

图9是根据本公开实施例的电子设备的结构框图。

如图9所示，该电子设备200包括：存储器210和处理器220，连接不同组件（包括存储器210和处理器220）的总线230。

其中，存储器210用于存储处理器220的可执行指令；处理器201被配置为调用并执行存储器202存储的可执行指令，以实现本公开上述实施例提出的渲染方法。

总线230表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构（ISA）总线，微通道体系结构（MAC）总线，增强型ISA总线、视频电子标准协会（VESA）局域总线以及外围组件互连（PCI）总线。

电子设备200典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备200访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器210还可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器（RAM）240和/或高速缓存存储器250。电子设备200可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统260可以用于读写不可移动的、非易失性磁介质（图9未显示，通常称为“硬盘驱动器”）。尽管图9中未示出，可以提供用于对可移动非易失性磁盘（例如“软盘”）读写的磁盘驱动器，以及对可移动非易失性光盘（例如CD-ROM, DVD-ROM或者其它光介质）读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线230相连。存储器210可以包括至少一个程序产品，该程序产品具有一组（例如至少一个）程序模块，这些程序模块被配置以执行本公开各实施例的功能。

具有一组（至少一个）程序模块270的程序/实用工具280，可以存储在例如存储器210中，这样的程序模块270包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块270通常执行本公开所描述的实施例中的功能和/或方法。

电子设备200也可以与一个或多个外部设备290（例如键盘、指向设备、显示器291等）通信，还可与一个或者多个使得用户能与该电子设备200交互的设备通信，和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备（例如网卡，调制解调器等等）通信。这种通信可以通过输入/输出（I/O）接口292进行。并且，电子设备200还可以通过网络适配器293与一个或者多个网络（例如局域网（LAN），广域网（WAN）和/或公共网络，例如因特网）通信。如图所示，网络适配器293通过总线230与电子设备200的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备200使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器220通过运行存储在存储器210中的程序，从而执行各种功能应用以及数据处理。

需要说明的是，本公开实施例的电子设备的实施过程参见前述对本公开实施例的渲染方法的解释说明，此处不再赘述。

本公开实施例的电子设备，在获取到回滚页面元素时，无需重新创建回滚页面元素的渲染对象，而是获取回滚页面元素对应的渲染对象集合，以根据渲染对象集合对回滚页面元素进行渲染，实现了对渲染对象集合的复用，不仅可以减少流量消耗，而且可以加快渲染速度，改善用户的观看效果。

为了实现上述实施例，本公开实施例还提出了一种非临时性计算机可读存储介质，该存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前所述的渲染方法。

为了实现上述实施例，本公开实施例还提供一种计算机程序产品，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行如前所述的渲染方法。

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

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

Claims (16)

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

获取回滚指令；

根据所述回滚指令控制列表进行回滚，并获取回滚后当前视口之中的回滚页面元素；

获取所述回滚页面元素的渲染对象集合，其中，所述渲染对象集合包括多个渲染对象，一个回滚页面元素对应一个渲染对象集合；

根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染，其中，当所述回滚页面元素为多个时，对多个回滚页面元素分别对应的多个渲染对象集合进行并行渲染；

其中，所述方法还包括：在页面元素退出所述当前视口时，将所述页面元素对应的所述渲染对象集合存储至缓存池；

所述方法还包括：缓存页面元素的布局信息；以及，根据渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染，包括：

获取回滚页面的布局信息，根据所述布局信息对所述多个渲染对象进行排序；

按照排序顺序对所述多个渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；

根据所述渲染对象子树对所述回滚页面元素进行渲染。

2.如权利要求1所述的方法，其特征在于，所述获取所述回滚页面元素的渲染对象集合，包括：

获取所述回滚页面元素的多个属性和元素内容；

根据所述多个属性从缓存池之中获取所述多个属性对应的多个属性渲染对象，以及所述元素内容对应的内容渲染对象。

3.如权利要求2所述的方法，其特征在于，所述根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染，包括：

根据所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

4.如权利要求3所述的方法，其特征在于，所述根据所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染，包括：

从所述缓存池之中获取所述回滚页面元素对应的布局信息；

根据所述布局信息对所述多个属性渲染对象和所述内容渲染对象进行排序；

根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

5.如权利要求4所述的方法，其特征在于，所述根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染，包括：

按照排序顺序对所述多个属性渲染对象和所述内容渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；

根据所述渲染对象子树对所述回滚页面元素进行渲染。

6.如权利要求1所述的方法，其特征在于，所述页面元素对应的所述渲染对象集合，通过以下步骤获得：

获得所述页面元素的内容和多个属性；

根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合。

7.如权利要求6所述的方法，其特征在于，所述根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合，包括：

根据所述页面元素的内容生成内容渲染对象，并将所述内容渲染对象添加至所述渲染对象集合；

根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象，并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。

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

第一获取模块，用于获取回滚指令；

第一控制模块，用于根据所述回滚指令控制列表进行回滚，并获取回滚后当前视口之中的回滚页面元素；

第二获取模块，用于获取所述回滚页面元素的渲染对象集合，其中，所述渲染对象集合包括多个渲染对象，一个回滚页面元素对应一个渲染对象集合；

第一渲染模块，用于根据所述渲染对象集合之中的多个渲染对象对所述回滚页面元素进行渲染，其中，当所述回滚页面元素为多个时，对多个回滚页面元素分别对应的多个渲染对象集合进行并行渲染；

其中，所述装置还包括：第一存储模块，用于在页面元素退出所述当前视口时，将所述页面元素对应的所述渲染对象集合存储至缓存池；

所述装置还用于：缓存页面元素的布局信息；以及，所述第一渲染模块，还用于：

获取回滚页面的布局信息，根据所述布局信息对所述多个渲染对象进行排序；

按照排序顺序对所述多个渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；

根据所述渲染对象子树对所述回滚页面元素进行渲染。

9.如权利要求8所述的装置，其特征在于，所述第二获取模块，包括：

第一获取单元，用于获取所述回滚页面元素的多个属性和元素内容；

第二获取单元，用于根据所述多个属性从缓存池之中获取所述多个属性对应的多个属性渲染对象，以及所述元素内容对应的内容渲染对象。

10.如权利要求9所述的装置，其特征在于，所述第一渲染模块，包括：

第一渲染单元，用于根据所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

11.如权利要求10所述的装置，其特征在于，所述第一渲染单元，具体用于：

从所述缓存池之中获取所述回滚页面元素对应的布局信息；

根据所述布局信息对所述多个属性渲染对象和所述内容渲染对象进行排序；

根据排序之后的所述多个属性渲染对象和所述内容渲染对象对所述回滚页面元素进行渲染。

12.如权利要求11所述的装置，其特征在于，所述第一渲染单元，具体还用于：

按照排序顺序对所述多个属性渲染对象和所述内容渲染对象进行拼接以生成所述回滚页面元素对应的渲染对象子树；

根据所述渲染对象子树对所述回滚页面元素进行渲染。

13.如权利要求8所述的装置，其特征在于，还包括：

第三获取模块，用于获得所述页面元素的内容和多个属性；

第一生成模块，用于根据所述页面元素的内容和多个属性生成所述页面元素对应的渲染对象集合。

14.如权利要求13所述的装置，其特征在于，所述第一生成模块，包括：

第一生成单元，用于根据所述页面元素的内容生成内容渲染对象，并将所述内容渲染对象添加至所述渲染对象集合；

第二生成单元，用于根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象，并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。

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

处理器；

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

其中，所述处理器被配置为调用并执行所述存储器存储的可执行指令，以实现如权利要求1-7中任一项所述的渲染方法。

16.一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1-7中任一项所述的渲染方法。

Images