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

Abstract

本公开提出一种渲染方法、装置、电子设备及存储介质，属于页面渲染技术领域。其中，该渲染方法包括：接收执行线程反馈的上一帧页面的执行结果；根据当前帧的页面数据进行渲染以生成渲染对象；根据上一帧页面的执行结果对渲染对象进行更新；以及根据更新之后的渲染对象进行绘制，以生成当前帧页面。由此，能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

Description

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

技术领域

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

背景技术

目前，随着电子设备，例如智能设备功能的不断强大，对于智能设备的功能要求也越来越多，因此智能设备所需要显示的页面内容也越来越丰富。针对电子设备，例如智能电视的页面生成，目前均是由UI线程（User Interface Thread，用户交互线程）来完成页面的绘制，该UI线程也称之为渲染主线程。

然而，渲染主线程不仅要根据页面内容进行页面的绘制，同时还需要接收用户的操作指令，并根据用户的操作执行开发者代码，以及根据代码执行结果生成该操作对应的执行结果。因此，可见渲染主线程在进行页面生成的时候，一方面要绘制页面内容，另一方面还需要根据用户的操作执行相应的代码并根据操作对应的执行结果对需要绘制的页面内容进行调整。具体而言，在接收到用户的操作之后，渲染主线程会调用开发者代码执行该操作，并获取操作结果，并根据该操作结果对需要绘制的页面内容进行调整，对调整之后的页面内容进行布局和渲染。可以看出，渲染主线程需要等待执行结果才能进行渲染。因此，如果开发者代码执行时间过长，就会导致渲染时间超过阈值时间，从而导致出现掉帧的现象。特别是，开发者代码越复杂，导致的掉帧现象越发频繁。频繁掉帧会严重影响用户的观感，因此亟待解决。

发明内容

本公开实施例提供一种渲染方法、装置、电子设备及存储介质。

本公开第一方面实施例提出了一种渲染方法，包括：接收执行线程反馈的上一帧页面的执行结果；根据当前帧的页面数据进行渲染以生成渲染对象；根据所述上一帧页面的执行结果对所述渲染对象进行更新；以及根据更新之后的渲染对象进行绘制，以生成当前帧页面。

可选地，在所述接收执行线程反馈的上一帧页面的执行结果之前，还包括：接收用户针对上一帧页面的用户操作指令；将所述针对所述上一帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述上一帧页面的用户操作指令生成所述上一帧页面的执行结果。

可选地，在所述根据更新之后的渲染对象进行绘制，以生成当前帧页面之后，还包括：接收用户针对所述当前帧页面的用户操作指令；将所述针对所述当前帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述当前帧的用户操作指令生成所述当前帧页面的执行结果，其中，所述当前帧页面的执行结果用于更新下一帧页面。

可选地，所述根据所述上一帧页面的执行结果对所述渲染对象进行更新，包括：将所述上一帧页面的执行结果加入目标页面元素队列；接收当前帧页面的同步信号；根据所述当前帧页面的同步信号，从所述目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象；根据所述至少一个待变化渲染对象对所述渲染对象进行更新。

可选地，所述用户针对上一帧页面的用户操作指令包括点击事件，所述上一帧页面的执行结果包括创建、删除或更新待变化渲染对象。

可选地，所述根据所述至少一个待变化渲染对象对所述渲染对象进行更新，包括：如果所述上一帧页面的执行结果为创建所述待变化渲染对象，则在所述渲染对象之中增加所述待变化渲染对象；如果所述上一帧页面的执行结果为删除所述待变化渲染对象，则在所述渲染对象之中删除对应的所述待变化渲染对象；如果所述上一帧页面的执行结果为更新所述待变化渲染对象，则在所述渲染对象之中获取所述待变化渲染对象所对应的渲染对象，并根据所述待变化渲染对象的属性更新对应的所述渲染对象的属性。

可选地，通过动画回调函数更新所述渲染对象。

可选地，上述渲染方法还包括：接收用户针对当前帧页面的操作指令；以及根据所述操作指令生成所述同步信号。

可选地，上述渲染方法还包括：在达到预设时间周期时，生成所述同步信号。

可选地，所述用户操作指令为滚动操作指令，所述方法还包括：根据所述滚动操作指令对当前视口进行调整；获取所述当前视口之中的至少一个页面元素；获取所述至少一个页面元素对应的至少一个渲染对象；根据所述当前帧页面的执行结果对所述至少一个渲染对象进行更新。

可选地，上述渲染方法还包括：将移出所述当前视口的页面元素所对应的渲染对象存入缓存池。

可选地，所述上一帧页面的执行结果为多个，且所述执行线程在接收到所述上一帧页面的同步信号时，发送所述多个执行结果。

本公开第二方面实施例提出了一种渲染装置，包括：接收模块，用于接收执行线程反馈的上一帧页面的执行结果；渲染模块，用于根据当前帧的页面数据进行渲染以生成渲染对象；更新模块，用于根据所述上一帧页面的执行结果对所述渲染对象进行更新；以及绘制模块，用于根据更新之后的渲染对象进行绘制，以生成当前帧页面。

可选地，上述渲染装置还包括：操作指令接收模块，用于接收用户针对上一帧页面的用户操作指令；发送模块，用于将所述针对所述上一帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述上一帧页面的用户操作指令生成所述上一帧页面的执行结果。

可选地，所述操作指令接收模块，还用于接收所述用户针对所述当前帧页面的用户操作指令；所述发送模块，还用于将所述针对所述当前帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述当前帧的用户操作指令生成所述当前帧页面的执行结果，其中，所述当前帧页面的执行结果用于更新下一帧页面。

可选地，所述更新模块包括：队列管理子模块，用于将所述上一帧页面的执行结果加入目标页面元素队列；同步子模块，用于接收当前帧页面的同步信号；获取子模块，用于根据所述当前帧页面的同步信号，从所述目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象；更新子模块，用于根据所述至少一个待变化渲染对象对所述渲染对象进行更新。

可选地，所述用户针对上一帧页面的用户操作指令包括点击事件，所述上一帧页面的执行结果包括创建、删除或更新待变化渲染对象。

可选地，所述更新子模块，用于：在所述上一帧页面的执行结果为创建所述待变化渲染对象时，在所述渲染对象之中增加所述待变化渲染对象；在所述上一帧页面的执行结果为删除所述待变化渲染对象时，在所述渲染对象之中删除对应的所述待变化渲染对象；在所述上一帧页面的执行结果为更新所述待变化渲染对象时，在所述渲染对象之中获取所述待变化渲染对象所对应的渲染对象，并根据所述待变化渲染对象的属性更新对应的所述渲染对象的属性。

可选地，通过动画回调函数更新所述渲染对象。

可选地，所述更新模块还包括：接收子模块，用于接收用户针对当前帧页面的操作指令；第一同步信号生成子模块，用于根据所述操作指令生成所述同步信号。

可选地，上述更新模块还包括：第二同步信号生成子模块，用于在达到预设时间周期时，生成所述同步信号。

可选地，所述用户操作指令为滚动操作指令，所述装置还包括：视口调整模块，用于根据所述滚动操作指令对当前视口进行调整；页面元素获取模块，用于获取所述当前视口之中的至少一个页面元素；渲染对象获取模块，用于获取所述至少一个页面元素对应的至少一个渲染对象；其中，所述更新模块，还用于根据所述当前帧页面的执行结果对所述至少一个渲染对象进行更新。

可选地，上述渲染装置还包括：缓存模块，用于将移出所述当前视口的页面元素所对应的渲染对象存入缓存池。

可选地，所述上一帧页面的执行结果为多个，且所述执行线程在接收到所述上一帧页面的同步信号时，发送所述多个执行结果。

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

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

本公开实施例提供的渲染方法、装置、电子设备及存储介质，通过电子设备接收执行线程反馈的上一帧页面的执行结果，并根据当前帧的页面数据进行渲染以生成渲染对象，以及根据上一帧页面的执行结果对渲染对象进行更新，而后根据更新之后的渲染对象进行绘制，以生成当前帧页面。由此，能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

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

附图说明

本公开上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解。

图1为本公开实施例所提供的一种渲染方法的流程示意图。

图2为本公开实施例所提供的另一种渲染方法的流程示意图。

图3为本公开实施例所提供的另一种渲染方法的流程示意图。

图4为本公开实施例所提供的一种渲染方法的结构示意图。

图5为本公开实施例所提供的另一种渲染方法的结构示意图。

图6为根据本申请一个实施例的电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开实施例相一致的所有实施方式。

在本公开实施例使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开实施例。在本公开实施例中所使用的单数形式的“一种”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开实施例可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开实施例范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”及“若”可以被解释成为“在……时”或“当……时”或“响应于确定”。

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

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

[01]本公开实施例提供的渲染方法，可以由电子设备来执行，该电子设备可为PC（Personal Computer，个人计算机）电脑、平板电脑或服务器等，此处不做任何限定。

在本公开实施例中，电子设备中可以设置有处理组件、存储组件和驱动组件。可选的，该驱动组件和处理组件可以集成设置，该存储组件可以存储操作系统、应用程序或其他程序模块，该处理组件通过执行存储组件中存储的应用程序来实现本公开实施例提供的渲染方法。

图1为本公开实施例所提供的一种渲染方法的流程示意图。

本公开实施例的渲染方法，还可由本公开实施例提供的渲染装置执行，该装置可配置于电子设备中，以实现接收执行线程反馈的上一帧页面的执行结果，并根据当前帧的页面数据进行渲染以生成渲染对象，以及根据上一帧页面的执行结果对渲染对象进行更新，而后根据更新之后的渲染对象进行绘制，以生成当前帧页面，从而能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

[02]作为一种可能的情况，本公开实施例的渲染方法还可以在服务器端执行，服务器可以为云服务器，可以在云端执行该渲染方法。

如图1所示，该渲染方法，可包括：

步骤101，接收执行线程反馈的上一帧页面的执行结果。

需要说明的是，该实施例中所描述的执行线程可为JS（JavaScript，脚本语言）线程，该实施例中所描述的页面可为手机、平板电脑等电子设备的UI页面。其中，该页面可为电子设备系统（例如，Android（安卓）系统）的UI页面，也可以是安装在电子设备中的各种APP（Application，应用程序）的UI页面，此处不做任何限定。

在本公开实施例中，电子设备可通过UI线程可接收执行线程反馈的上一帧页面的执行结果。

需要说明的是，该实施例中所描述的UI线程和JS线程可由电子设备中的CPU控制器提供，也可由电子设备中的其他单元提供，此处不做任何限定。

为了清楚说明上一实施例，在本公开的一个实施例中，在接收执行线程反馈的上一帧页面的执行结果之前，还可包括接收用户针对上一帧页面的用户操作指令，并将针对上一帧页面的用户操作指令发送至执行线程，以使执行线程根据上一帧页面的用户操作指令生成上一帧页面的执行结果。其中，用户针对上一帧页面的用户操作指令可包括点击事件，即，click事件。

具体地，用户在使用电子设备（例如，手机）的过程中，可通过该电子设备的触摸屏对该电子设备提供的UI页面进行操作。当电子设备通过UI线程接收到用户针对该UI页面（即，上一帧页面）的操作指令（例如，单击UI页面中的某个虚拟按键、对UI页面进行滑动操作等）时，可将该操作指令发送至执行线程（例如，JS线程）。执行线程可在接收到该操作指令时，可根据该操作指令执行其对应的开发者代码，以得到该操作指令对应的执行结果，即，上一帧页面的执行结果。例如，假设该操作指令为页面的滚动指令，则执行线程在接收到该操作指令后，可根据该操作指令执行控制页面滚动的开发者代码。

而后，执行线程可将该执行结果提供给（发送至）UI线程，以便UI线程后续使用。

步骤102，根据当前帧的页面数据进行渲染以生成渲染对象。

需要说明的是，该实施例中所描述的当前帧的页面数据可为当前帧页面所需要展示的页面数据。

具体地，在用户使用电子设备（例如，手机）的过程中，在判定当前需要进行渲染时，UI线程可先获取当前帧的页面数据，并根据当前帧的页面数据进行渲染以生成渲染对象。其中，当前帧的页面数据可由其对应的后台服务器提供，也可由其对应的前端提供，此处不做任何限定。

需要说明的是，该实施例中所描述的渲染对象可为当前帧的页面数据的承载对象，也可为与当前帧的页面数据相关的对象，此处不做任何限定。

步骤103，根据上一帧页面的执行结果对渲染对象进行更新。

为了清楚说明上一实施例，在本公开的一个实施例中，可通过动画回调函数更新渲染对象。其中，该动画回调函数可为多个。

需要说明的是，该实施例中所描述的动画回调函数，可为预选封装好的函数，在根据上一帧页面的执行结果对渲染对象进行更新的过程中，可根据上一帧页面的执行结果，调用一个或多个动画回调函数对渲染对象进行更新。

步骤104，根据更新之后的渲染对象进行绘制，以生成当前帧页面。

具体地，在用户使用电子设备（例如，手机）的过程中，UI线程在生成上述的渲染对象之后，根据接收到的上一帧页面的执行结果对该对渲染对象进行更新，并根据更新之后的渲染对象进行绘制，以生成当前帧页面。

在本公开实施例之中，可将代码的执行从渲染主线程（即，UI线程）之中剥离出来，通过执行线程执行用户操作，同时，控制渲染主线程在执行当前帧页面渲染的时候，采用上一帧的操作执行结果。这样渲染主线程在渲染当前帧页面的时候就可以无需等待当前帧的用户操作执行结果，根据上一帧的操作执行结果进行渲染即可，极大地提高了渲染速度。由于两个帧页面之间的切换频率大于人眼的感知频率，因此人眼对于这种操作的延迟是感知不到的，进而在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

进一步地，在本公开的一个实施例中，在根据更新之后的渲染对象进行绘制，以生成当前帧页面之后，还可包括接收用户针对当前帧页面的用户操作指令，并将针对当前帧页面的用户操作指令发送至执行线程，以使执行线程根据当前帧的用户操作指令生成当前帧页面的执行结果，其中，当前帧页面的执行结果用于更新下一帧页面。

具体地，在用户使用电子设备（例如，手机）的过程中，在UI线程生成当前帧页面之后，如果用户对当前帧页面进行操作，则UI线程可接收到该用户针对当前帧页面的用户操作指令，并将针对当前帧页面的用户操作指令发送至执行线程，执行线程可在接收到该操作指令时，可根据该操作指令执行其对应的开发者代码，以该操作指令对应的执行结果，即，当前帧页面的执行结果。然后该执行线程可将该执行结果提供给（发送至）UI线程，以便UI线程后续使用。在判定下一帧页面需要进行渲染时，UI线程则可根据当前帧页面的执行结果对下一帧页面进行渲染，从而无需等待下一帧的用户操作执行结果，极大地提高了渲染速度。

为了清楚说明上一实施例，在本公开的一个实施例中，如图2所示，根据上一帧页面的执行结果对渲染对象进行更新，可包括：

步骤201，将上一帧页面的执行结果加入目标页面元素队列。

需要说明的是，该实施例中所描述的目标页面元素队列中可包括生成目标页面的所有的元素，或生成目标页面的部分元素，并且该目标页面元素队列可临时保存在元素组件库（例如，安卓元素组件库）上。

步骤202，接收当前帧页面的同步信号。其中，该同步信号可为一种垂直同步信号。

在本公开的一个实施例中，上述渲染方法还可包括接收用户针对当前帧页面的操作指令，并根据操作指令生成同步信号。

具体地，在用户使用电子设备（例如，手机）的过程中，UI线程在生成上述的渲染对象之后，可将接收到的上一帧页面的执行结果加入目标页面元素队列。而后当UI线程接收到用户针对当前帧页面的操作指令之后，可根据该操作指令生成同步信号。

在本公开的另一个实施例中，可在达到预设时间周期时，生成同步信号。其中，预设时间周期可根据实际情况进行标定。

具体地，在用使用电子设备（例如，手机）的过程中，UI线程在生成上述的渲染对象之后，若是在达到预设时间周期时未接收到用户针对当前帧页面的操作指令，则可直接生成同步信号。

步骤203，根据当前帧页面的同步信号，从目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象。

步骤204，根据至少一个待变化渲染对象对渲染对象进行更新。

具体地，在用户使用电子设备（例如，手机）的过程中，UI线程在得到同步信号之后，可根据同步信号，从目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象，并根据该至少一个待变化渲染对象对渲染对象进行更新。例如，根据待变化渲染对象的属性（例如，颜色、大小等）更新对应的渲染对象的属性。

进一步地，在本公开的一个实施例中，上一帧页面的执行结果可包括创建、删除或更新待变化渲染对象。

进一步地，在本公开的一个实施例中，上一帧页面的执行结果可为多个。例如，用户对多个操作项进行了操作，或者用户对某个操作项进行了操作，同时修改了该操作项的多个结果，例如尺寸，颜色等，这些情况均会产生多个执行结果。在该实施例之中，执行线程可以在计算出一个执行结果之后就将其发送至UI线程。在本公开的其他实施例之中，执行线程在计算出一个执行结果之后，并不直接发送，而是进行缓存，在执行线程在接收到上一帧页面的同步信号时，一起发送缓存的多个执行结果。因此，可以减少UI线程和执行线程的交互次数，进一步提高执行效率。

其中，根据至少一个待变化渲染对象对渲染对象进行更新，可包括如果上一帧页面的执行结果为创建待变化渲染对象，则在渲染对象之中增加待变化渲染对象；如果上一帧页面的执行结果为删除待变化渲染对象，则在渲染对象之中删除对应的待变化渲染对象；如果上一帧页面的执行结果为更新待变化渲染对象，则在渲染对象之中获取待变化渲染对象所对应的渲染对象，并根据待变化渲染对象的属性更新对应的渲染对象的属性。

具体地，在用户使用电子设备（例如，手机）的过程中，当上一帧页面的执行结果为创建待变化渲染对象，则可说明在当前帧页面中应有与该待变化渲染对象所对应的渲染对象，此时UI线程可在当前帧页面的渲染对象之中增加待变化渲染对象；当上一帧页面的执行结果为删除待变化渲染对象，则可说明在当前帧页面中应没有与该待变化渲染对象所对应的渲染对象，此时UI线程可在当前帧页面的渲染对象之中删除对应的待变化渲染对象；当上一帧页面的执行结果为更新待变化渲染对象，则说明在当前帧页面中有与该待变化渲染对象所对应的渲染对象，且该渲染对象与该待变化渲染对象的渲染不同，此时UI线程可在渲染对象之中获取该待变化渲染对象所对应的渲染对象，并根据待变化渲染对象的属性更新对应的渲染对象的属性。

为了清楚说明上述的实施例，下面详细描述当用户操作指令为滚动操作指令时，该方法的具体实现过程：

在本公开的一个实施例中，如图3所示，用户操作指令可为滚动操作指令，上述渲染方法还可包括：

步骤301，根据滚动操作指令对当前视口进行调整。

需要说明的是，该实施例中所描述的当前视口可为，电子设备通过显示屏提供的UI界面，即用户可视的UI界面。

具体地，在用户使用电子设备（例如，手机）的过程中，在UI线程生成当前帧页面之后，如果用户对当前帧页面进行滚动操作，则UI线程可接收到该用户针对当前帧页面的滚动操作指令，并可根据滚动操作指令对当前视口进行调整。

同时，UI线程还可将该滚动操作指令发送至执行线程，执行线程可在接收到该滚动操作指令时，可根据该滚动操作指令执行其对应的开发者代码，以该操作指令对应的执行结果，即，当前帧页面的执行结果。然后该执行线程可将该执行结果提供给（发送至）UI线程，以便UI线程后续使用。

步骤302，获取当前视口之中的至少一个页面元素。

步骤303，获取至少一个页面元素对应的至少一个渲染对象。

步骤304，根据当前帧页面的执行结果对至少一个渲染对象进行更新。

具体地，在UI线程根据滚动操作指令对当前视口进行调整的过程中，UI线程还可获取当前视口之中的至少一个页面元素（例如，一个虚拟按键、一个图片等），并获取至少一个页面元素对应的至少一个渲染对象。最后UI线程可根据执行线程提供的当前帧页面的执行结果对至少一个渲染对象进行更新。

进一步地，在本公开的一个实施例中，将移出当前视口的页面元素所对应的渲染对象存入缓存池。

具体地，在用户使用电子设备（例如，手机）的过程中，UI线程还可将移出当前视口的页面元素所对应的渲染对象存入缓存池，当用户通过发送滚动操作指令想再次查看已经移出当前视口的页面元素时，UI线程可直接从缓存池中调出该已经移出当前视口的页面元素对应的渲染对象，并可直接根据该渲染对象进行绘制，以生成页面。由此，可以进一步提高页面的渲染速度，且不会出现掉帧的问题。

根据本公开的实施例提供的渲染方法，首先接收执行线程反馈的上一帧页面的执行结果，并根据当前帧的页面数据进行渲染以生成渲染对象，然后根据上一帧页面的执行结果对渲染对象进行更新，并根据更新之后的渲染对象进行绘制，以生成当前帧页面。由此，能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

图4为本公开实施例所提供的一种渲染方法的结构示意图。

本公开实施例的渲染装置，可配置于电子设备中，以实现接收执行线程反馈的上一帧页面的执行结果，并根据当前帧的页面数据进行渲染以生成渲染对象，以及根据上一帧页面的执行结果对渲染对象进行更新，而后根据更新之后的渲染对象进行绘制，以生成当前帧页面，从而能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

如图4所示，该渲染装置400，可包括：接收模块410、渲染模块420、更新模块430和绘制模块440。

其中，接收模块410用于接收执行线程反馈的上一帧页面的执行结果。

渲染模块420用于根据当前帧的页面数据进行渲染以生成渲染对象。

更新模块430用于根据上一帧页面的执行结果对渲染对象进行更新。

绘制模块440用于根据更新之后的渲染对象进行绘制，以生成当前帧页面。

可选地，如图5所示，该渲染装置400还可包括：操作指令接收模块450和发送模块460。

其中，操作指令接收模块450用于接收用户针对上一帧页面的用户操作指令。

发送模块460用于将针对上一帧页面的用户操作指令发送至执行线程，以使执行线程根据上一帧页面的用户操作指令生成上一帧页面的执行结果。

可选地，操作指令接收模块450还用于接收用户针对当前帧页面的用户操作指令；发送模块460还用于将针对当前帧页面的用户操作指令发送至执行线程，以使执行线程根据当前帧的用户操作指令生成当前帧页面的执行结果，其中，当前帧页面的执行结果用于更新下一帧页面。

可选地，如图5所示，更新模块430可包括：队列管理子模块431、同步子模块432、获取子模块433和更新子模块434。

其中，队列管理子模块431用于将上一帧页面的执行结果加入目标页面元素队列。

同步子模块432用于接收当前帧页面的同步信号。

获取子模块433用于根据当前帧页面的同步信号，从目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象。

更新子模块434用于根据至少一个待变化渲染对象对渲染对象进行更新。

可选地，用户针对上一帧页面的用户操作指令包括点击事件，上一帧页面的执行结果包括创建、删除或更新待变化渲染对象。

可选地，更新子模块434用于：在上一帧页面的执行结果为创建待变化渲染对象时，在渲染对象之中增加待变化渲染对象；在上一帧页面的执行结果为删除待变化渲染对象时，在渲染对象之中删除对应的待变化渲染对象；在上一帧页面的执行结果为更新待变化渲染对象时，在渲染对象之中获取待变化渲染对象所对应的渲染对象，并根据待变化渲染对象的属性更新对应的渲染对象的属性。

可选地，通过动画回调函数更新渲染对象。

可选地，如图5所示，更新模块430还可包括：接收子模块435和第一同步信号生成子模块436。

其中，接收子模块435用于接收用户针对当前帧页面的操作指令。

第一同步信号生成子模块436用于根据操作指令生成同步信号。

可选地，如图5所示，更新模块430还可包括第二同步信号生成子模块437，其中，第二同步信号生成子模块437用于在达到预设时间周期时，生成同步信号。

可选地，如图5所示，用户操作指令为滚动操作指令，该渲染装置400还可包括：视口调整模块470、页面元素获取模块480和渲染对象获取模块490。

其中，视口调整模块470用于根据滚动操作指令对当前视口进行调整。

页面元素获取模块480用于获取当前视口之中的至少一个页面元素。

渲染对象获取模块490用于获取至少一个页面元素对应的至少一个渲染对象。

其中，更新模块430还用于根据当前帧页面的执行结果对至少一个渲染对象进行更新。

可选地，如图5所示，该渲染装置400还可包括：缓存模块401，其中，缓存模块401用于将移出当前视口的页面元素所对应的渲染对象存入缓存池。

可选地，上一帧页面的执行结果为多个，且执行线程在接收到上一帧页面的同步信号时，发送多个执行结果。

需要说明的是，前述对渲染方法实施例的解释说明也适用于该实施例的渲染装置，此处不再赘述。

本申请实施例的渲染装置，通过接收模块接收执行线程反馈的上一帧页面的执行结果，并通过渲染模块根据当前帧的页面数据进行渲染以生成渲染对象，以及通过更新模块根据上一帧页面的执行结果对渲染对象进行更新，而后通过绘制模块根据更新之后的渲染对象进行绘制，以生成当前帧页面。由此，能够在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

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

为了实现上述实施例，本公开还提出了一种存储介质。

其中，当存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如上所述的渲染方法。

为了实现上述实施例，本公开还提供一种计算机程序产品。

其中，该计算机程序产品由电子设备的处理器执行时，使得电子设备能够执行如上所述的方法。

图6是根据一示例性实施例示出的一种电子设备框图。图6示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图6所示，电子设备1000包括处理器111，其可以根据存储在只读存储器（ROM，Read Only Memory）112中的程序或者从存储器116加载到随机访问存储器（RAM，RandomAccess Memory）113中的程序而执行各种适当的动作和处理。在RAM 113中，还存储有电子设备1000操作所需的各种程序和数据。处理器111、ROM 112以及RAM 113通过总线114彼此相连。输入/输出（I/O，Input / Output）接口115也连接至总线114。

以下部件连接至I/O接口115：包括硬盘等的存储器116；以及包括诸如LAN（局域网，Local Area Network）卡、调制解调器等的网络接口卡的通信部分117，通信部分117经由诸如因特网的网络执行通信处理；驱动器118也根据需要连接至I/O接口115。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分117从网络上被下载和安装。在该计算机程序被处理器111执行时，执行本公开的方法中限定的上述功能。

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

在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

本公开的实施例提供的技术方案至少带来以下有益效果：

在本公开实施例之中，可将代码的执行从渲染主线程（即，UI线程）之中剥离出来，通过执行线程执行用户操作，同时，控制渲染主线程在执行当前帧页面渲染的时候，采用上一帧的操作执行结果。这样渲染主线程在渲染当前帧页面的时候就可以无需等待当前帧的用户操作执行结果，根据上一帧的操作执行结果进行渲染即可，极大地提高了渲染速度。由于两个帧页面之间的切换频率大于人眼的感知频率，因此人眼对于这种操作的延迟是感知不到的，进而在用户无延迟感知的情况下，极大地提高了页面的渲染速度，避免了掉帧的问题。

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

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

Claims (24)

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

接收执行线程反馈的上一帧页面的执行结果；

根据当前帧的页面数据进行渲染以生成渲染对象；

根据所述上一帧页面的执行结果对所述渲染对象进行更新；以及

根据更新之后的渲染对象进行绘制，以生成当前帧页面；

其中，所述根据所述上一帧页面的执行结果对所述渲染对象进行更新，包括：

将所述上一帧页面的执行结果加入目标页面元素队列；

接收当前帧页面的同步信号；

根据所述当前帧页面的同步信号，从所述目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象；

根据所述至少一个待变化渲染对象对所述渲染对象进行更新。

2.如权利要求1所述的方法，其特征在于，在所述接收执行线程反馈的上一帧页面的执行结果之前，还包括：

接收用户针对上一帧页面的用户操作指令；

将所述针对所述上一帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述上一帧页面的用户操作指令生成所述上一帧页面的执行结果。

3.如权利要求1所述的方法，其特征在于，在所述根据更新之后的渲染对象进行绘制，以生成当前帧页面之后，还包括：

接收用户针对所述当前帧页面的用户操作指令；

将所述针对所述当前帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述当前帧的用户操作指令生成所述当前帧页面的执行结果，其中，所述当前帧页面的执行结果用于更新下一帧页面。

4.如权利要求2所述的方法，其特征在于，所述用户针对上一帧页面的用户操作指令包括点击事件，所述上一帧页面的执行结果包括创建、删除或更新待变化渲染对象。

5.如权利要求4所述的方法，其特征在于，所述根据所述至少一个待变化渲染对象对所述渲染对象进行更新，包括：

如果所述上一帧页面的执行结果为创建所述待变化渲染对象，则在所述渲染对象之中增加所述待变化渲染对象；

如果所述上一帧页面的执行结果为删除所述待变化渲染对象，则在所述渲染对象之中删除对应的所述待变化渲染对象；

如果所述上一帧页面的执行结果为更新所述待变化渲染对象，则在所述渲染对象之中获取所述待变化渲染对象所对应的渲染对象，并根据所述待变化渲染对象的属性更新对应的所述渲染对象的属性。

6.如权利要求1所述的方法，其特征在于，通过动画回调函数更新所述渲染对象。

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

接收用户针对当前帧页面的操作指令；以及

根据所述操作指令生成所述同步信号。

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

在达到预设时间周期时，生成所述同步信号。

9.如权利要求3所述的方法，其特征在于，所述用户操作指令为滚动操作指令，所述方法还包括：

根据所述滚动操作指令对当前视口进行调整；

获取所述当前视口之中的至少一个页面元素；

获取所述至少一个页面元素对应的至少一个渲染对象；

根据所述当前帧页面的执行结果对所述至少一个渲染对象进行更新。

10.如权利要求9所述的方法，其特征在于，还包括：

将移出所述当前视口的页面元素所对应的渲染对象存入缓存池。

11.如权利要求1所述的方法，其特征在于，所述上一帧页面的执行结果为多个，且所述执行线程在接收到所述上一帧页面的同步信号时，发送多个执行结果。

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

接收模块，用于接收执行线程反馈的上一帧页面的执行结果；

渲染模块，用于根据当前帧的页面数据进行渲染以生成渲染对象；

更新模块，用于根据所述上一帧页面的执行结果对所述渲染对象进行更新；以及

绘制模块，用于根据更新之后的渲染对象进行绘制，以生成当前帧页面；

其中，所述更新模块包括：

队列管理子模块，用于将所述上一帧页面的执行结果加入目标页面元素队列；

同步子模块，用于接收当前帧页面的同步信号；

获取子模块，用于根据所述当前帧页面的同步信号，从所述目标页面元素队列之中获取至少一个目标页面元素所对应的待变化渲染对象；

更新子模块，用于根据所述至少一个待变化渲染对象对所述渲染对象进行更新。

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

操作指令接收模块，用于接收用户针对上一帧页面的用户操作指令；

发送模块，用于将所述针对所述上一帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述上一帧页面的用户操作指令生成所述上一帧页面的执行结果。

14.如权利要求13所述的装置，其特征在于，其中，

所述操作指令接收模块，还用于接收所述用户针对所述当前帧页面的用户操作指令；

所述发送模块，还用于将所述针对所述当前帧页面的用户操作指令发送至所述执行线程，以使所述执行线程根据所述当前帧的用户操作指令生成所述当前帧页面的执行结果，其中，所述当前帧页面的执行结果用于更新下一帧页面。

15.如权利要求13所述的装置，其特征在于，所述用户针对上一帧页面的用户操作指令包括点击事件，所述上一帧页面的执行结果包括创建、删除或更新待变化渲染对象。

16.如权利要求15所述的装置，其特征在于，所述更新子模块，用于：

在所述上一帧页面的执行结果为创建所述待变化渲染对象时，在所述渲染对象之中增加所述待变化渲染对象；

在所述上一帧页面的执行结果为删除所述待变化渲染对象时，在所述渲染对象之中删除对应的所述待变化渲染对象；

在所述上一帧页面的执行结果为更新所述待变化渲染对象时，在所述渲染对象之中获取所述待变化渲染对象所对应的渲染对象，并根据所述待变化渲染对象的属性更新对应的所述渲染对象的属性。

17.如权利要求12所述的装置，其特征在于，通过动画回调函数更新所述渲染对象。

18.如权利要求12所述的装置，其特征在于，所述更新模块还包括：

接收子模块，用于接收用户针对当前帧页面的操作指令；

第一同步信号生成子模块，用于根据所述操作指令生成所述同步信号。

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

第二同步信号生成子模块，用于在达到预设时间周期时，生成所述同步信号。

20.如权利要求14所述的装置，其特征在于，所述用户操作指令为滚动操作指令，所述装置还包括：

视口调整模块，用于根据所述滚动操作指令对当前视口进行调整；

页面元素获取模块，用于获取所述当前视口之中的至少一个页面元素；

渲染对象获取模块，用于获取所述至少一个页面元素对应的至少一个渲染对象；

其中，所述更新模块，还用于根据所述当前帧页面的执行结果对所述至少一个渲染对象进行更新。

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

缓存模块，用于将移出所述当前视口的页面元素所对应的渲染对象存入缓存池。

22.如权利要求12所述的装置，其特征在于，所述上一帧页面的执行结果为多个，且所述执行线程在接收到所述上一帧页面的同步信号时，发送多个执行结果。

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

处理器；

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

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至11中任一项所述的渲染方法。

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

Images