CN111460342B - 页面的渲染展示方法、装置、电子设备及计算机存储介质 - Google Patents

Abstract

本发明实施例提供了一种页面的渲染展示方法、装置、电子设备及计算机存储介质。其中，所述页面的渲染展示方法包括：根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；若请求使用游戏模式，则根据所述待展示页面数据，对用于绘制游戏页面的绘图元素进行绘制；将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。通过本发明实施例，可以提升渲染速度。

Description

页面的渲染展示方法、装置、电子设备及计算机存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种页面的渲染展示方法、装置、电子设备及计算机存储介质。

背景技术

用户在浏览网页时，通常是通过浏览器请求网页数据，并通过浏览器中的渲染引擎(又称内核)将网页数据渲染在显示设备上。浏览器的渲染过程主要包括以下过程：加载网页数据，解析网页数据获取网页中的页面元素，根据网页数据对页面元素进行排版，根据排版结果进行绘制并将绘制结果输出。

随着技术的发展，浏览器的功能越来越多，如可以使用浏览器的渲染功能渲染游戏画面，从而可以在浏览器上运行一些网页游戏。但是，现有技术中，由于运行网络游戏时，需要浏览器进行频繁的计算和画面渲染，导致在浏览器上运行网页游戏，尤其使用移动设备上的浏览器运行网页游戏时，运行效果不好，存在着许多问题，例如，CPU占用过高、耗电过快、画面丢帧等，使得显示效果不好。

发明内容

有鉴于此，本发明实施例提供一种页面的渲染展示方案，以解决上述部分或全部问题。

根据本发明实施例的第一方面，提供了一种页面的渲染展示方法包括：根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；若请求使用游戏模式，则根据所述待展示页面数据，对用于绘制所述游戏页面的绘图元素进行绘制；将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

根据本发明实施例的第二方面，提供了一种页面的渲染展示装置包括：确定模块，用于根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；绘制模块，用于若请求使用游戏模式，则根据所述待展示页面数据，对用于绘制所述游戏页面的绘图元素进行绘制；输出模块，用于将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

根据本发明实施例的第三方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如第一方面所述的页面的渲染展示方法对应的操作。

根据本发明实施例的第四方面，提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面所述的页面的渲染展示方法。

根据本发明实施例提供的页面的渲染展示方案，在进行页面的渲染展示时，确定待展示页面是否请求使用游戏模式，若请求使用游戏模式，则将绘制后的绘图元素输出到为其分配的独立窗口，进行游戏页面的渲染展示，使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

附图说明

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

图1为根据本发明实施例一的一种页面的渲染展示方法的步骤流程图；

图2为根据本发明实施例二的一种页面的渲染展示方法的步骤流程图；

图3为根据本发明实施例三的一种页面的渲染展示方法的步骤流程图；

图4为根据本发明实施例四的一种页面的渲染展示方法的步骤流程图；

图5为根据本发明实施例五的一种页面的渲染展示装置的结构框图；

图6为根据本发明实施例六的一种页面的渲染展示装置的结构框图；

图7为根据本发明实施例七的一种电子设备的结构示意图；

图8为根据本发明的使用场景中默认的渲染流水线的示意图；

图9为根据本发明的使用场景中简化的渲染流水线的示意图。

具体实施方式

为了使本领域的人员更好地理解本发明实施例中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明实施例一部分实施例，而不是全部的实施例。基于本发明实施例中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本发明实施例保护的范围。

下面结合本发明实施例附图进一步说明本发明实施例具体实现。

实施例一

参照图1，示出了根据本发明实施例一的一种页面的渲染展示方法的步骤流程图。

本实施例的页面的渲染展示方法包括以下步骤：

步骤S102：根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式。

绘图元素用于为页面提供2D或3D绘图功能。针对不同类型的待展示页面数据，其中包含的所述绘图元素可能不同，本实施例对此不作限定。

在本申请一具体实现中，所述绘图元素不仅可以为页面提供绘图功能，而且可以支持动态绘制。例如，HTML5中的Canvas元素等等。

其中，所述Canvas元素(又称Canvas标签)是HTML5中一种页面元素，其用于在所述待展示页面中定义一个绘图区域，以绘制2D或3D图像，而且所述Canvas元素支持使用JavaScript进行动态绘制。利用所述绘图元素，浏览器可以实现运行游戏、播放视频等功能。

游戏页面可以是利用所述绘图元素绘制的展示有游戏场景、游戏人物等的页面。

针对不同的待展示页面数据，可以采用匹配的方式确定其对应的待展示页面是否请求使用游戏模式。

例如，针对在待展示页面数据中添加有游戏标识的待展示页面数据，获得待展示页面数据后，根据其中的所述游戏标识的指示确定对应的待展示页面是否请求使用游戏模式。

又例如，根据待展示页面数据对应的网址(例如，IP地址)，确定对应的待展示页面数据是否使用游戏模式，等等。

步骤S104：若请求使用游戏模式，则根据所述待展示页面数据，对用于绘制游戏页面的绘图元素进行绘制。

所述待展示页面数据中除包含所述绘图元素外，还可能包含其他页面元素，如段落元素“<p>”、Script元素“<script>”等等。

在进行页面展示时，仅需绘制所述待展示页面数据中可见的页面元素，例如，用于绘制游戏页面的所述绘图元素。

针对不同的所述绘图元素，可以采用匹配的绘制方式进行绘制，本实施例对此不作限定。例如，若所述绘图元素为Canvas元素，则可以通过调用对应的绘图方法(如2DCanvas API或WebGL API)的方式对其进行绘制。

步骤S106：将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

在浏览器渲染展示页面时，通常情况下，浏览器会为待展示页面创建一个窗口(window)，用于展示其中可见的页面元素。通常情况下，所有可见的页面元素均渲染在创建的窗口中。

现有技术中，通过渲染待展示页面的每一帧画面，实现待展示页面的渲染展示。在展示一帧画面时，需要等待所有可见的页面元素绘制完成后，通过合成器对所有绘制结果进行复杂的合成处理(如矩阵变换、半透明混合等)后，将合成结果输出到窗口中进行展示。这就使得每帧画面的渲染时间过长，无法有效保证帧率(Frame Rate，每秒更新画面的次数，每更新一次画面为一帧)和帧间距(Frame Pacing，更新每一帧所需时间)等，容易出现丢帧、画面跳动等问题。

对于请求使用游戏模式的待展示页面，由于需要根据用户的操作进行频繁的计算和重新绘制，这种问题会更加严重，若无法保证帧率和帧间距，就会出现用户操作响应不及时等影响游戏体验的问题。

在本实施例中，为了适应请求使用游戏模式的待展示页面的特点，为用于绘制所述游戏页面的绘图元素分配了独立窗口，用于展示与游戏页面对应的绘图元素。若所述待展示页面中还包括其他需要绘制的页面元素，则为其他页面元素分配一个所述独立窗口之外的附加窗口，使用该附加窗口展示其他页面元素。

在用于绘制所述游戏页面的所述绘图元素绘制完成后，将绘制结果输出到为其分配的独立窗口中，以进行所述游戏页面的渲染展示。

这样一方面，使得所述绘图元素的渲染展示不必等待其他页面元素的绘制结果，可以输出到独立窗口进行展示，从而使得游戏页面每帧画面的绘制时间更短，有助于减小帧间距，缩短游戏页面中每帧画面的重绘用时，进而保证游戏页面的帧率，避免画面卡顿，对操作响应不及时等问题。

另一方面，由于在游戏运行时，游戏页面更新较为频繁，即需要频繁进行重新绘制的页面元素为用于绘制所述游戏页面的所述绘图元素，故而通过为所述绘图元素分配独立窗口，在进行渲染展示时，仅需要对绘图元素进行计算和绘制即可，使得计算量大大减少，降低了CPU(中央处理器)、GPU(图形处理器)等的占用率，也降低了耗电。

通过本实施例，在进行页面的渲染展示时，确定待展示页面是否请求使用游戏页面，若请求使用游戏模式，则将绘制后的绘图元素输出到为其分配的独立窗口，进行游戏页面的渲染展示，使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题，提高了运行效果。

本实施例的页面的渲染展示方法可以由任意适当的具有数据处理能力的电子设备执行，包括但不限于：服务器、移动终端(如平板电脑、手机等)和PC机等。

实施例二

参照图2，示出了根据本发明实施例二的一种页面的渲染展示方法的步骤流程图。

本实施例的页面的渲染展示方法包括前述的步骤S102～S106。

其中，所述步骤S102包括以下子步骤：

子步骤S1021：根据所述待展示页面数据，确定所述待展示页面数据中的所述绘图元素及其对应的绘图上下文。

绘图上下文是通过对应的所述绘图元素创建的，用于指示在对应的所述绘图元素中的绘制内容。

针对不同的待展示页面数据，其中包含的绘图元素、对应的绘图上下文可以不同。例如，HTML5的待展示页面数据中的绘图元素为Canvas元素，对应的绘图上下文为CanvasRendering Context。

Canvas元素支持进行2D绘图和3D绘图，相应的，进行2D绘图时，使用2D绘图上下文(2D Canvas Rendering Context)，进行3D绘图时，使用3D绘图上下文(WebGL RenderingContext)。

针对不同的待展示页面数据，可以采用匹配的方式确定其中的绘图元素以及与之对应的绘图上下文。

以HTML5为例，通过对待展示页面数据进行解析，获取其中的Canvas元素，并根据待展示页面数据对Canvas元素对应的绘图上下文进行初始化，并根据初始化结果获取绘图元素对应的绘图上下文。

例如，通过对所述待展示页面数据进行解析，确定所述待展示页面数据中的Canvas元素，使用canvas.getContext()方法，根据待展示页面数据初始化所述绘图元素的3D绘图上下文。

如获取的绘图上下文：gl＝canvas.getContext("webgl",{alpha:false,antialias:false,gameMode:true})。

其中，gameMode属性为本实施例中额外增加的用于指示对应的绘图元素是否用于请求使用游戏模式的属性。

对绘图上下文初始完成后，就确定了与绘图元素对应的绘图上下文。

为了确定绘图上下文初始化是否正确，可以使用getContextAttributes()方法进行验证。

例如：var gameMode＝gl.getContextAttributes().gameMode？true:false。

子步骤S1022：根据所述绘图上下文中的第一属性，确定所述待展示页面是否请求使用游戏模式，所述第一属性用于指示对应的绘图元素是否请求使用游戏模式。

第一属性用于指示对应的绘图元素是否请求使用游戏模式。不同的绘图元素中的第一属性不同，例如，在Canvas元素中，其第一属性为额外增加的gameMode属性。

在本申请一具体实现中，若第一属性(即gameMode)为true则指示其对应的所述绘图元素请求使用游戏模式绘制所述游戏页面；反之，则指示其对应的所述绘图元素不请求使用游戏模式进行绘制。

由上，通过本实施例，在绘图上下文中增加第一属性，用于指示对应的绘图元素是否请求使用游戏模式。这样需要通过浏览器运行游戏时，待展示页面数据只需要将绘图元素对应的绘图上下文中的第一属性设置为匹配的值即可。浏览器通过解析待展示页面数据，获取绘图上下文就可以方便地根据其中的所述第一属性确定对应的所述绘图元素是否用于绘制游戏页面，进而确定待展示页面是否请求使用游戏模式，使得浏览器兼容性更好。

若请求使用游戏模式，在进行页面的渲染展示时，则将绘制后的绘图元素输出到为其分配的独立窗口，进行游戏页面的渲染展示。这样使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

本实施例的页面的渲染展示方法可以由任意适当的具有数据处理能力的电子设备执行，包括但不限于：服务器、移动终端(如平板电脑、手机等)和PC机等。

实施例三

参照图3，示出了根据本发明实施例三的一种页面的渲染展示方法的步骤流程图。

本实施例的页面的渲染展示方法包括以下前述的步骤S102～S106。

其中，所述步骤S102可以采用前述的实施例二中的实现方式或其他实现方式。

所述步骤S104包括以下子步骤：

子步骤S1041：在内核线程中，对所述待展示页面数据进行分析，根据分析结果，生成与所述游戏页面对应的绘制指令。

对所述待展示页面数据进行分析通常在内核线程中由中央处理器(CPU)执行，所述分析包括但不限于：对待展示页面数据进行解析、JavaScript计算等。

根据分析结果，确定需要绘制的游戏页面的某一待展示帧的内容，进而生成对应的绘制指令，以指示在对应的所述绘图元素中绘制所述待展示帧的内容。例如，针对Canvas元素，通过JavaScript计算完成后，调用WebGL API或者2D Canvas API生成绘制指令。

子步骤S1042：在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制。

本领域技术人员可以根据需要采用合适的方式根据所述绘制指令对所述绘图元素进行绘制。例如，针对调用WebGL API或者2D Canvas API生成的绘制指令，使用对应的WebGL或者2D Canvas进行绘制，以将所述绘制指令指示绘制的内容转化为与屏幕上的像素对应的信息。

在本实施例中，使用内核线程执行绘制指令的过程，使用图形处理器线程(GPU线程)执行绘制的过程，实现了绘制过程中的硬件加速，提升了绘制效率，有助于保证页面渲染时的帧率。

此外，在一具体实现中，所述子步骤S1042具体为：在图形处理器线程中，根据所述绘制指令，在离屏窗口中绘制用于绘制所述游戏页面的所述绘图元素。

其中，所述离屏窗口可以是为所述绘图元素面分配的缓存空间(buffer)，在根据所述绘制指令进行绘制时，先将待展示帧的内容绘制到所述离屏窗口内，在需要展示该帧内容时，再将离屏窗口内的该帧内容复制到显示窗口。

这样可以使用离屏窗口缓冲绘制内容，提升渲染效率，保证帧率，避免画面卡顿。

本实施例，通过对所述待展示页面数据进行分析，可以快速获取绘制指令，从而提升绘制效率。此外，根据绘制指令进行绘制的过程可以由图形处理器线程执行，实现硬件加速，提升绘制效率。通过将待展示帧的内容绘制到离屏窗口中，使得渲染效率更高。

在需要展示该帧画面时，将绘制后的绘图元素的离屏窗口内的数据输出到为其分配的独立窗口内，进行游戏页面的渲染展示，使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

本实施例的页面的渲染展示方法可以由任意适当的具有数据处理能力的电子设备执行，包括但不限于：服务器、移动终端(如平板电脑、手机等)和PC机等。

实施例四

参照图4，示出了根据本发明实施例四的一种页面的渲染展示方法的步骤流程图。

本实施例的页面的渲染展示方法包括前述的步骤S102～S106。

其中，所述步骤S102可以采用实施例二中所述的实现方式，或其他实现方式。

所述步骤S104可以采用实施三中所述的实现方式，或其他实现方式。

在本实施例中，若所述步骤S104采用实施例三中的实现方式，则所述步骤S106具体为：将离屏窗口中绘制的所述绘图元素复制到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

所述独立窗口是为所述游戏页面对应的所述绘图元素分配的用于展示其的窗口。在本实施例中，所述独立窗口中的绘图元素为全屏不透明的绘图元素，即所述绘图元素铺满所述独立窗口。

由于为游戏页面创建了独立窗口，使用于绘制所述游戏页面的所述绘图元素可以独立于待展示页面中的其他页面元素进行展示，因此使游戏页面的展示不需依赖其他页面元素的绘制结果，在输出绘制结果时可以将绘制在离屏窗口中的所述绘图元素复制到所述独立窗口中，无需进行复杂的矩阵变换等操作，提升了游戏页面的渲染速度，降低了计算量和资源占用率。

需要说明的是，除了用于绘制所述游戏页面的绘图元素外，其他全屏不透明的绘图元素均可以采用本实施例中的步骤S102～S106的方法进行绘制和展示，以提升绘图元素的渲染速度，使页面的渲染展示效果更好。

通过本实施例，在进行页面的渲染展示时，确定待展示页面是否请求使用游戏模式，若请求使用游戏模式，则将绘制在离屏窗口中的绘图元素复制输出到为其分配的独立窗口中，进行游戏页面的渲染展示。这样使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

实施例五

参照图5，示出了根据本发明实施例五的一种页面的渲染展示装置的结构框图。

本实施例的页面的渲染展示装置包括确定模块502、绘制模块504和输出模块506。

其中，所述确定模块502，用于根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式。

绘图元素用于为页面提供2D或3D绘图功能。针对不同类型的待展示页面数据，其中包含的所述绘图元素可能不同，本实施例对此不作限定。

在本申请一具体实现中，所述绘图元素不仅可以为页面提供绘图功能，而且可以支持动态绘制。例如，HTML5中的Canvas元素等等。

其中，所述Canvas元素(又称Canvas标签)是HTML5中一种页面元素，其用于在所述待展示页面中定义一个绘图区域，以绘制2D或3D图像，而且所述Canvas元素支持使用JavaScript进行动态绘制。利用所述绘图元素，浏览器可以实现运行游戏、播放视频等功能。

游戏页面可以是利用所述绘图元素绘制的展示有游戏场景、游戏人物等的页面。

针对不同的待展示页面数据，可以采用匹配的方式确定其对应的待展示页面是否请求使用游戏模式。

例如，针对在待展示页面数据中添加有游戏标识的待展示页面数据，获得待展示页面数据后，根据其中的所述游戏标识的指示确定对应的待展示页面是否请求使用游戏模式。

又例如，根据待展示页面数据对应的网址(例如，IP地址)，确定对应的待展示页面数据是否使用游戏模式，等等。

所述绘制模块504，用于在确定请求使用游戏模式时，根据所述待展示页面数据，对用于绘制游戏页面的绘图元素进行绘制。

所述待展示页面数据中除包含所述绘图元素外，还可能包含其他页面元素，如段落元素“<p>”、Script元素“<script>”等等。

在进行页面展示时，仅需绘制所述待展示页面数据中可见的页面元素，例如，用于绘制游戏页面的所述绘图元素。

针对不同的所述绘图元素，可以采用匹配的绘制方式进行绘制，本实施例对此不作限定。例如，若所述绘图元素为Canvas元素，则可以通过调用对应的绘图方法(如2DCanvas API或WebGL API)的方式对其进行绘制。

所述输出模块506，用于将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

在浏览器渲染展示页面时，通常情况下，浏览器会为待展示页面创建一个窗口(window)，用于展示其中可见的页面元素。通常情况下，所有可见的页面元素均渲染在创建的窗口中。

现有技术中，通过渲染待展示页面的每一帧画面，实现待展示页面的渲染展示。在展示一帧画面时，需要等待所有可见的页面元素绘制完成后，通过合成器对所有绘制结果进行复杂的合成处理(如矩阵变换、半透明混合等)后，将合成结果输出到窗口中进行展示。这就使得每帧画面的渲染时间过长，无法有效保证帧率(Frame Rate，每秒更新画面的次数，每更新一次画面为一帧)和帧间距(Frame Pacing，更新每一帧所需时间)等，容易出现丢帧、画面跳动等问题。

对于请求使用游戏模式的待展示页面，由于需要根据用户的操作进行频繁的计算和重新绘制，这种问题会更加严重，若无法保证帧率和帧间距，就会出现用户操作响应不及时等影响游戏体验的问题。

在本实施例中，为了适应请求使用游戏模式的待展示页面的特点，为用于绘制所述游戏页面的绘图元素分配了独立窗口，用于展示与游戏页面对应的绘图元素。若所述待展示页面中还包括其他需要绘制的页面元素，则为其他页面元素分配一个所述独立窗口之外的附加窗口，使用该附加窗口展示其他页面元素。

在用于绘制所述游戏页面的所述绘图元素绘制完成后，将绘制结果输出到为其分配的独立窗口中，以进行所述游戏页面的渲染展示。

这样一方面，使得所述绘图元素的渲染展示不必等待其他页面元素的绘制结果，可以输出到独立窗口进行展示，使得游戏页面每帧画面的绘制时间更短，有助于减小帧间距，缩短游戏页面中每帧画面的重绘用时，进而保证游戏页面的帧率，避免画面卡顿，对操作响应不及时等问题。

另一方面，由于在游戏运行时，更新较为频繁的是游戏页面，即需要频繁进行重新绘制的页面元素为用于绘制所述游戏页面的所述绘图元素，故而通过为所述绘图元素分配独立窗口，在进行渲染展示时，仅需要对绘图元素进行计算和绘制即可，使得计算量大大减少，降低了CPU(中央处理器)、GPU(图形处理器)等的占用率，也降低了耗电。

通过本实施例，在进行页面的渲染展示时，确定待展示页面是否请求使用游戏模式，若请求使用游戏模式，则将绘制后的绘图元素输出到为其分配的独立窗口，进行游戏页面的渲染展示，使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

实施例六

参照图6，示出了根据本发明实施例六的一种页面的渲染展示装置的结构框图。

本实施例的页面的渲染展示装置包括前述的确定模块502、绘制模块504和输出模块506。

可选地，所述确定模块502包括上下文获取模块5021和判定模块5022。

其中，上下文获取模块5021，用于根据所述待展示页面数据，确定所述待展示页面数据中的所述绘图元素及其对应的绘图上下文。

绘图上下文是通过对应的所述绘图元素创建的，用于指示在对应的所述绘图元素中的绘制内容。

针对不同的待展示页面数据，其中包含的绘图元素、对应的绘图上下文可以不同。例如，HTML5的待展示页面数据中的绘图元素为Canvas元素，对应的绘图上下文为CanvasRendering Context。

Canvas元素支持进行2D绘图和3D绘图，相应的，进行2D绘图时，使用2D绘图上下文(2D Canvas Rendering Context)，进行3D绘图时，使用3D绘图上下文(WebGL RenderingContext)。

针对不同的待展示页面数据，可以采用匹配的方式确定其中的绘图元素以及与之对应的绘图上下文。

以HTML5为例，通过对待展示页面数据进行解析，获取其中的Canvas元素，并根据待展示页面数据对Canvas元素对应的绘图上下文进行初始化，并根据初始化结果获取绘图元素对应的绘图上下文。

例如，通过对所述待展示页面数据进行解析，确定所述待展示页面数据中的Canvas元素，使用canvas.getContext()方法，根据待展示页面数据初始化所述绘图元素的3D绘图上下文。

如获取的绘图上下文：gl＝canvas.getContext("webgl",{alpha:false,antialias:false,gameMode:true})。

其中，gameMode属性为本实施例中额外增加的用于指示对应的绘图元素是否请求使用游戏模式的属性。

对绘图上下文初始完成后，就确定了与绘图元素对应的绘图上下文。

为了确定绘图上下文初始化是否正确，可以使用getContextAttributes()方法进行验证。

例如：var gameMode＝gl.getContextAttributes().gameMode？true:false。

所述判定模块5022，用于根据所述绘图上下文中的第一属性，确定所述待展示页面是否请求使用游戏模式，所述第一属性用于指示对应的绘图元素是否请求使用游戏模式。

第一属性用于指示对应的绘图元素是否请求使用所述游戏模式。不同的绘图元素中的第一属性不同，例如，在Canvas元素中，其第一属性为额外增加的gameMode属性。

在本申请一具体实现中，若第一属性(即gameMode)为true则指示其对应的所述绘图元素请求使用游戏模式，用于绘制所述游戏页面；反之，则指示其对应的所述绘图元素不请求使用游戏模式进行绘制。

通过在绘图上下文中增加第一属性，用于指示对应的绘图元素是否请求使用游戏模式。这样需要通过浏览器运行游戏时，待展示页面数据只需要将绘图元素对应的绘图上下文中的第一属性设置为匹配的值即可。浏览器通过解析待展示页面数据，获取绘图上下文就可以方便地根据其中的所述第一属性确定对应的所述绘图元素是否用于绘制游戏页面，进而确定待展示页面是否请求使用游戏模式，使得浏览器兼容性更好。

可选地，所述绘制模块504包括指令生成模块5041和指令执行模块5042。

其中，所述指令生成模块5041，用于在内核线程中，对所述待展示页面数据进行分析，根据分析结果，生成与所述游戏页面对应的绘制指令。

对所述待展示页面数据进行分析通常在内核线程中由中央处理器(CPU)执行，所述分析包括但不限于：对待展示页面数据进行解析、JavaScript计算等。

根据分析结果，确定需要绘制的游戏页面的某一待展示帧的内容，进而生成对应的绘制指令，以指示在对应的所述绘图元素中绘制所述待展示帧的内容。例如，针对Canvas元素，通过JavaScript计算完成后，调用WebGL API或者2D Canvas API生成绘制指令。

所述指令执行模块5042，用于在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制。

本领域技术人员可以根据需要采用合适的方式根据所述绘制指令对所述绘图元素进行绘制。例如，针对调用WebGL API或者2D Canvas API生成的绘制指令，使用对应的WebGL或者2D Canvas进行绘制，以将所述绘制指令指示绘制的内容转化为与屏幕上的像素对应的信息。

在本实施例中，使用内核线程执行绘制指令的过程，使用图形处理器线程(GPU线程)执行绘制的过程，实现了绘制过程中的硬件加速，提升了绘制效率，有助于保证页面渲染时的帧率。

此外，在一具体实现中，所述指令执行模块5042用于在图形处理器线程中，根据所述绘制指令，在离屏窗口中绘制用于绘制所述游戏页面的所述绘图元素。

其中，所述离屏窗口可以是为所述绘图元素面分配的缓存空间(buffer)，在根据所述绘制指令进行绘制时，先将待展示帧的内容绘制到所述离屏窗口内，在需要展示该帧内容时，再将离屏窗口内的该帧内容复制到显示窗口。

这样可以使用离屏窗口缓冲绘制内容，提升渲染效率，保证帧率，避免画面卡顿。

通过对所述待展示页面数据进行分析，可以快速获取绘制指令，从而提升绘制效率。此外，根据绘制指令进行绘制的过程可以由图形处理器线程执行，实现硬件加速，提升绘制效率。通过将待展示帧的内容绘制到离屏窗口中使得渲染效率更高。

可选地，所述输出模块506，用于将离屏窗口中绘制的所述绘图元素复制到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

所述独立窗口是为所述游戏页面对应的所述绘图元素分配的用于展示其的窗口。在本实施例中，所述独立窗口中的绘图元素为全屏不透明的绘图元素，即所述绘图元素铺满所述独立窗口。

由于为游戏页面创建了独立窗口，使用于绘制所述游戏页面的所述绘图元素可以独立于待展示页面中的其他页面元素进行展示，因此使游戏页面的展示不需依赖其他页面元素的绘制结果，在输出绘制结果时可以将绘制在离屏窗口中的所述绘图元素复制到所述独立窗口中，无需进行复杂的矩阵变换等操作，提升了游戏页面的渲染速度，降低了计算量和资源占用率。

需要说明的是，除了用于绘制所述游戏页面的绘图元素外，其他全屏不透明的绘图元素均可以采用本实施例中的装置进行绘制和展示，以提升绘图元素的渲染速度，使页面的渲染展示效果更好。

通过本实施例，在进行页面的渲染展示时，确定待展示页面是否请求使用游戏模式，若请求使用游戏模式，则将绘制在离屏窗口中的绘图元素复制输出到为其分配的独立窗口中，进行游戏页面的渲染展示。这样使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

实施例七

参照图7，示出了根据本发明实施例六的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图6所示，该电子设备可以包括：处理器(processor)702、通信接口(Communications Interface)704、存储器(memory)706、以及通信总线708。

其中：

处理器702、通信接口704、以及存储器706通过通信总线708完成相互间的通信。

通信接口704，用于与其它电子设备如终端设备或服务器进行通信。

处理器702，用于执行程序710，具体可以执行上述下载应用的方法实施例中的相关步骤。

具体地，程序710可以包括程序代码，该程序代码包括计算机操作指令。

处理器702可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。

存储器706，用于存放程序710。存储器706可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

程序710具体可以用于使得处理器702执行以下操作：根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；若请求使用游戏模式，则根据所述待展示页面数据，对用于绘制游戏页面的绘图元素进行绘制；将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

在一种可选的实施方式中，程序710还用于使得处理器702在根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式时，根据所述待展示页面数据，确定所述待展示页面数据中的所述绘图元素及其对应的绘图上下文；根据所述绘图上下文中的第一属性，确定所述待展示页面是否请求使用游戏模式，所述第一属性用于指示对应的绘图元素是否请求使用游戏模式。

在一种可选的实施方式中，程序710还用于使得处理器702在确定请求使用游戏模式，根据所述待展示页面数据，对用于绘制所述游戏页面的绘图元素进行绘制时，在内核线程中，对所述待展示页面数据进行分析，根据分析结果，生成与所述游戏页面对应的绘制指令；在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制。

在一种可选的实施方式中，程序710还用于使得处理器702在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制时，在图形处理器线程中，根据所述绘制指令，在离屏窗口中绘制用于绘制所述游戏页面的所述绘图元素。

在一种可选的实施方式中，程序710还用于使得处理器702将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口，以进行所述游戏页面的渲染展示时，将离屏窗口中绘制的所述绘图元素复制到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

在一种可选的实施方式中，所述绘图元素为全屏不透明的绘图元素。

程序710中各步骤的具体实现可以参见上述页面的渲染展示方法实施例中的相应步骤和单元中对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备和模块的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。

通过本实施例的电子设备，在进行页面的渲染展示时，确定待展示页面是否包含游戏页面，若包含游戏页面，则将绘制后的绘图元素输出到为其分配的独立窗口，进行游戏页面的渲染展示，使得游戏页面的渲染过程更简化，渲染和展示的速度更快，计算量更小，可以有效降低资源占用和耗电，且可以避免丢帧、卡顿和响应不及时等问题。

需要指出，根据实施的需要，可将本发明实施例中描述的各个部件/步骤拆分为更多部件/步骤，也可将两个或多个部件/步骤或者部件/步骤的部分操作组合成新的部件/步骤，以实现本发明实施例的目的。

上述根据本发明实施例的方法可在硬件、固件中实现，或者被实现为可存储在记录介质(诸如CD ROM、RAM、软盘、硬盘或磁光盘)中的软件或计算机代码，或者被实现通过网络下载的原始存储在远程记录介质或非暂时机器可读介质中并将被存储在本地记录介质中的计算机代码，从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件(诸如ASIC或FPGA)的记录介质上的这样的软件处理。可以理解，计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件(例如，RAM、ROM、闪存等)，当所述软件或计算机代码被计算机、处理器或硬件访问且执行时，实现在此描述的页面的渲染展示方法。此外，当通用计算机访问用于实现在此示出的页面的渲染展示方法的代码时，代码的执行将通用计算机转换为用于执行在此示出的页面的渲染展示方法的专用计算机。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明实施例的范围。

以上实施方式仅用于说明本发明实施例，而并非对本发明实施例的限制，有关技术领域的普通技术人员，在不脱离本发明实施例的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明实施例的范畴，本发明实施例的专利保护范围应由权利要求限定。

使用场景：

本使用场景中，对浏览器的渲染过程进行详细说明。浏览器的渲染过程包括以下步骤：

步骤A：浏览器在获取待展示页面数据，对待展示页面数据进行解析，获取待展示页面数据中的页面元素。

步骤B：确定页面元素中是否包含绘图元素，若包含绘图元素，则根据绘图元素创建其对应的绘图上下文，并对其初始化。创建绘图上下文后，根据绘图上下文中的第一属性，确定绘图元素是否请求使用游戏模式。

步骤C：若不请求使用游戏模式，则执行步骤D；反之则执行步骤E。

步骤D：采用默认的渲染流水线(如图8所示)对页面元素进行渲染展示。

例如，使用内核线程中的JavaScript线程，根据待展示页面数据进行计算。根据计算结果，一方面针对Canvas元素，确定待展示帧的内容并生成对应的绘制指令(绘制3D图像，则调用WebGL API生成绘制指令)，并将绘制指令发送给图形处理器(GPU)线程；另一方面，将Canvas元素之外的页面元素进行重排版，并向合成器提交变更信息。

在图形处理器线程，其根据绘制指令进行绘制(调用GL API完成WebGL绘制)，并将绘制结果提交给UI(user interface)线程等待输出。

在合成器线程，其根据提交的变更信息，对变更信息指示的页面元素进行光栅化处理，并将存储有光栅化结果的缓冲区提交到UI线程。

步骤E：为请求使用游戏模式的绘图元素分配独立窗口，并为待展示页面数据中的其他页面元素分配附加窗口。

针对用于绘制游戏页面的绘图元素，执行步骤F采用简化的渲染流水线(如图9所示)。针对其他页面元素，若需要对这些元素进行渲染展示，则执行步骤G和H，采用默认渲染流水线对其进行渲染展示。

步骤F：即使用内核线程中的JavaScript线程，根据待展示页面数据进行计算，确定游戏页面中待展示帧的内容并生成对应的绘制指令(若采用Canvas元素绘制3D图像，则调用WebGL API生成绘制指令)，即JavaScript运算和调用WebGL API。当待展示帧对应的所有绘制指令生成完毕后，将绘制指令发送到图形处理器线程，由图形处理器线程根据绘制指令在离屏窗口中进行绘制，即调用GL API完成WebGL绘制。在需要展示该待展示帧时，将绘制结果从离屏窗口中复制到为其分配的独立窗口中。

步骤G：使用内核线程中的JavaScript线程，根据待展示页面数据进行计算。根据计算结果，一方面针对Canvas元素，确定待展示帧的内容并生成对应的绘制指令(绘制3D图像，则调用WebGL API生成绘制指令)，并将绘制指令发送给图形处理器(GPU)线程；另一方面，将Canvas元素之外的页面元素进行重排版，并向合成器提交变更信息。

在图形处理器线程，其根据绘制指令进行绘制(调用GL API完成WebGL绘制)，并将绘制结果提交给UI(user interface)线程等待输出。

在合成器线程，其根据提交的变更信息，对变更信息指示的页面元素进行光栅化处理，并将存储有光栅化结果的缓冲区提交到UI线程。

步骤H：UI线程在图形处理器线程绘制完成且合成器线程光栅化完成后，将两者的结果进行合并处理(如进行矩阵变换等)，并将合并处理结果输出到为其分配的附加窗口中。

在本使用场景中，在浏览器的渲染引擎中，将用于绘制游戏页面的Canvas元素和其他页面元素进行区分，为绘制游戏页面的Canvas元素的绘制和输出设计了简化的渲染流水线，对比浏览器中默认渲染流水线，其更简洁和高效，使得在浏览器(尤其是移动设备上的浏览器)中运行网页游戏时可以获得更好的性能，更低的CPU占用和耗电水平，更稳定的帧间距和更低的操作延迟。

由此解决了现有技术中浏览器中默认渲染流水线比较复杂和冗长，会对游戏的性能产生影响，使得性能下降(帧率降低)，CPU占用高，更耗电，帧间距不稳定，有时会感觉画面更新有些跳动，增加操作延迟等问题。

此外，该浏览器具有完整的网页运行环境，可以支持网页的其它标准和特性，比如DOM(文档对象模型，Document Object Model)，CSS(层叠样式表)，Service Worker，WebAssembly等，使得能够较好地兼容现有的网页游戏，只需少许修改即可获得高性能和低耗电的优化，且可以完整支持全部网页标准和特性。

综上所述，现有技术中的浏览器针对Canvas元素采用与其它页面元素一样的默认渲染流水线，需要通过合成器输出所有的可见页面元素到网页显示窗口上。这种方式中虽然使Canvas元素绘制的内容可以跟其它页面元素一样，支持半透明混合、复杂的矩阵变换等操作，但是网页游戏通常只是单纯地使用一个全屏不透明的Canvas元素绘制游戏的内容，默认渲染流水线渲染的Canvas元素支持的复杂操作在进行游戏页面展示时并无作用，反而会造成资源占用高等问题。

为了解决这一问题，本使用场景中的浏览器在渲染用于绘制游戏页面的Canvas元素时，采用简化的渲染流水线，将Canvas元素中绘制的内容输出到为其分配的一个独立窗口上，由于渲染流水线较为简洁，使用了更少的线程和处理步骤，从而提高了性能、降低了耗电。

Claims (12)

1.一种页面的渲染展示方法，其特征在于，包括：

根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；

在内核线程中，对所述待展示页面数据进行分析，根据分析结果，生成与游戏页面对应的绘制指令；

在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制；

将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

2.根据权利要求1所述的方法，其特征在于，所述根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式，包括：

根据所述待展示页面数据，确定所述待展示页面数据中的所述绘图元素及其对应的绘图上下文；

根据所述绘图上下文中的第一属性，确定所述待展示页面是否请求使用游戏模式，所述第一属性用于指示对应的绘图元素是否请求使用游戏模式。

3.根据权利要求1所述的方法，其特征在于，所述在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制具体为：

在图形处理器线程中，根据所述绘制指令，在离屏窗口中绘制用于绘制所述游戏页面的所述绘图元素。

4.根据权利要求3所述的方法，其特征在于，将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口，以进行所述游戏页面的渲染展示具体为：

将离屏窗口中绘制的所述绘图元素复制到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述绘图元素为全屏不透明的绘图元素。

6.一种页面的渲染展示装置，其特征在于，包括：

确定模块，用于根据获取的包含绘图元素的待展示页面数据，确定所述待展示页面是否请求使用游戏模式；

绘制模块，包括：

指令生成模块，用于在内核线程中，对所述待展示页面数据进行分析，根据分析结果，生成与游戏页面对应的绘制指令；

指令执行模块，用于在图形处理器线程中，根据所述绘制指令，对用于绘制所述游戏页面的绘图元素进行绘制；

输出模块，用于将所述绘图元素的绘制结果输出到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

7.根据权利要求6所述的装置，其特征在于，所述确定模块包括：

上下文获取模块，用于根据所述待展示页面数据，确定所述待展示页面数据中的所述绘图元素及其对应的绘图上下文；

判定模块，用于根据所述绘图上下文中的第一属性，确定所述待展示页面是否请求使用游戏模式，所述第一属性用于指示对应的绘图元素是否用于绘制游戏页面。

8.根据权利要求6所述的装置，其特征在于，所述指令执行模块用于：在图形处理器线程中，根据所述绘制指令，在离屏窗口中绘制用于绘制所述游戏页面的所述绘图元素。

9.根据权利要求8所述的装置，其特征在于，所述输出模块用于：将离屏窗口中绘制的所述绘图元素复制到为所述绘图元素分配的独立窗口中，以进行所述游戏页面的渲染展示。

10.根据权利要求6-9中任一项所述的装置，其特征在于，所述绘图元素为全屏不透明的绘图元素。

11.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-5中任一项所述的页面的渲染展示方法对应的操作。

12.一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如权利要求1-5中任一所述的页面的渲染展示方法。

Images