一种页面渲染方法、装置、设备和存储介质与流程

本发明实施例涉及网页页面渲染技术，尤其涉及一种页面渲染方法、装置、设备和存储介质。

背景技术：

常规技术方案中，渲染一个网页时一般采用浏览器提供的文档对象模型(dom)技术，而在一些网页游戏中则会大量地使用画布(canvas)渲染。其中，dom是html和xml文档的编程接口，将web页面与脚本或程序语言连接起来；画布(canvas)元素是html5的一部分，允许脚本语言动态渲染位图像。

发明人在实现本发明的过程中，发现现有技术具有以下技术缺陷：dom的使用过程中，虽然渲染速度快，但易占用大量内存，且渲染不灵活，而且会因为不同浏览器实现的差异，难以保证一致性；canvas虽然对内存的占用少，但实现复杂，且当页面渲染区域过大时容易造渲染耗时的问题。

技术实现要素：

本发明实施例提供一种页面渲染方法、装置、设备和存储介质，以实现兼顾内存占用与渲染速度的平衡点，优化渲染效果和加载速度。

第一方面，本发明实施例提供了一种页面渲染方法，该方法包括：

获取页面的显示帧率；

根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；

根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素；

根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

进一步的，根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值包括：

如果所述显示帧率小于预设帧率值，则根据预设帧率元素映射模型调整待渲染页面中每个渲染层中的所述元素数量约束值。

进一步的，还包括：

根据设备参数初始化所述元素数量约束值。

进一步的，所述设备参数包括下述至少一种：浏览器类型、设备类型和设备分辨率。

进一步的，所述根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，包括：

根据待渲染页面的元素总数量和所述元素数量约束值，确定待渲染页面包括的渲染层的层数，并按照所述层数，将各所述元素分配至各渲染层；或

将所述待渲染页面的各所述元素，按照设定规则陆续分配至渲染层，如果任一渲染层所分配的元素数量超出所述元素数量约束值，则新增渲染层。

进一步的，所述根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，包括：

获取所述待渲染页面包括的各元素对应的元素属性数据；

根据所述元素属性数据，确定各所述元素对应的渲染层类型，其中，所述渲染层类型包括dom和canvas；

根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层，其中，所述待渲染页面中的每个渲染层类型对应设置有至少一个渲染层。

进一步的，根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层，包括：

确定各所述元素对应的渲染频率；

根据所述渲染频率对所述元素进行排序；

根据各所述元素的排序结果，将各所述元素顺序分配至所述渲染层类型对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

进一步的，根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层，包括：

确定各所述元素对应的渲染频率；

将各元素的所述渲染频率与至少两个预设渲染频段进行匹配；

根据匹配关系，将各所述元素分配至所述渲染层类型中预设渲染频段对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

进一步的，还包括：

获取在所显示页面上输入的用户交互操作的交互坐标；

根据所述交互坐标和所显示页面上各元素对应的控制区域，确定待调整元素；

根据所述待调整元素和所述用户交互操作，确定所述待渲染元素的属性变化数据；

根据所述属性变化数据更新待渲染页面的元素属性数据。

进一步的，所显示页面的至少部分元素的控制区域使用可缩放矢量图形进行描述。

进一步的，根据所述待调整元素和所述用户交互操作，确定所述待渲染元素的属性变化数据包括：

调用所述待调整元素的回调函数；

执行所述回调函数，根据所述用户交互操作产生待渲染元素的元素属性数据，作为属性变化数据，其中，所述待渲染元素与所述待调整元素相同或不相同。

进一步的，在根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示之前，还包括：

通过操控层获取用户交互操作，并根据所述用户交互操作确定待调整元素的属性变化数据；

通过数据层根据所述属性变化数据更新待渲染页面的元素属性数据。

进一步的，根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示，包括：

确定所述待渲染页面中的待渲染元素；

根据所述层级分配策略确定所述待渲染元素所在渲染层；

对所述待渲染元素所在渲染层进行渲染，并显示。

进一步的，在执行根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略之时，还包括：

若检测到预设情形时，则禁止层级分配策略的调整操作，并将历史层级分配策略作为当前的层级分配策略。

进一步的，所述预设情况包括：处理器高频占用、用户交互操作过程和动画播放过程中的至少一种。

第二方面，本发明实施例还提供了一种页面渲染装置，该装置包括：

帧率获取模块，用于获取页面的显示帧率；

约束值获取模块，用于根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；

策略确定模块，用于根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素；

渲染显示模块，用于根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

第三方面，本发明实施例还提供了一种页面渲染设备，该设备包括：存储器、具有触摸功能的显示屏以及一个或多个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现第一方面中任一所述的页面渲染方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求第一方面中任一所述的页面渲染方法。

本发明通过获取页面的显示帧率；根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素；根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示，解决了dom和canvas由于各自缺陷带来的一致性差和实现复杂的问题，以实现兼顾内存占用与渲染速度的平衡点，优化渲染效果和加载速度。

附图说明

图1a为本发明实施例一提供的一种页面渲染方法的流程图；

图1b为本发明实施例一提供的待渲染页面的示意图；

图1c为图1b滚动后的待渲染页面的示意图；

图1d为本发明实施例一提供的一种分层渲染的示意图；

图1e为本发明实施例一提供的一种显示帧率与每层元素数量的关系示意图；

图2a为本发明实施例二提供的一种页面渲染方法的流程图；

图2b为本发明实施例二提供的一种操控层确定待渲染元素的属性变化数据的方法的流程图；

图2c为本发明实施例二提供的一种确定待渲染元素的属性变化数据的方法的流程图；

图3a为本发明实施例三提供的一种页面渲染方法的流程图；

图3b为本发明实施例三提供的一种根据元素数量约束值将元素分配至渲染层的方法的流程图；

图3c为本发明实施例三提供的一种元素分配至渲染层的方法的流程图；

图3d为本发明实施例三提供的另一种元素分配至渲染层的方法的流程图；

图4为本发明实施例四提供的一种页面渲染装置的结构示意图；

图5为本发明实施例五提供的一种页面渲染设备的结构示意图。

具体实施方式

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

实施例一

图1a为本发明实施例一提供的一种页面渲染方法的流程图，本实施例可适用于浏览器渲染网页的技术领域，该方法可以由包含浏览器内核的设备来执行。具体的，浏览器最重要或者说核心的部分是渲染引擎，一般称之为“浏览器内核”。浏览器内核负责对网页语法的解释(如标准通用标记语言下的一个应用html、javascript)并渲染(显示)网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。需要注意的是，不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。进一步的，本实施例对包含浏览器的设备不作限定，可以是平板电脑、个人电脑、移动终端设备、工作站或服务器等。本实施例对浏览器内核的存在方式不作限定，可以是集成在浏览器中，也可以是集成在其他应用程序中(如web应用程序)。

参照图1a，该方法具体包括如下步骤：

s110、获取页面的显示帧率。

本实施例中，页面为网页经过浏览器解释后呈现的画面。

具体的，文字与图片是构成一个网页的两个最基本的元素。除此之外，网页的元素还包括动画、音乐、程序等等。网页实际上只是一个纯文本文件，通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小)，而浏览器则对这些标记进行解释并渲染生成页面(页面相当于屏幕上的像素)，于是就得到用户所看到的画面。

本实施例中，显示帧率是用于测量显示帧数的量度，其测量单位为每秒显示帧数(framespersecond，fps)或“赫兹”(hz)，本实施例以fps为例进行说明。进一步的，本实施例中的显示帧率用于表示页面的刷新频率。对于一个页面来说，并不是通过一次渲染就可以，而必须反复进行。一旦页面发生变化(如元素发生切换，又如动画变化，又如页面滚动)，页面即需要被刷新。

本实施例对页面的显示帧率的获取方式不作限定。

在一实施例中，通过浏览器的开发者工具获取页面的显示帧率。示例性的，通过chrome浏览器提供开发者工具可以开启页面显示帧率实时观测和页面图形处理器(graphicsprocessingunit，gpu)使用率观测。

在一实施例中，通过预设的网页性能测试应用接口获取页面的显示帧率。示例性的，通过frametimingapi获取页面的显示帧率，frametimingapi是webperformancetimingapi标准中的其中一位成员。webperformancetimingapi是w3c推出的一套性能api标准，用于帮助开发者对网站各方面的性能进行精确的分析与控制，提升web网站性能。

s120、根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值。

本实施例中，图1b为本发明实施例一提供的待渲染页面的示意图。图1c为图1b滚动后的待渲染页面的示意图。参照图1b和图1c，待渲染页面为网页中未被显示的部分或者持续更新的部分。其中，网页中未被显示的部分，可以是由于页面超过显示区域(可以是设备屏幕的大小或者浏览器的显示界面大小)，需要通过移动得以显示的部分页面。持续更新的部分可以是动画，如游戏界面。

本实施例中，渲染层相当于图层，用于绘制元素。渲染层主要用于将元素转换为屏幕上的像素。本实施例对渲染层的类型不作限定，可以是dom类型或者是canvas类型。

本实施例采用分层渲染的技术对待显示页面进行渲染。图1d为本发明实施例一提供的一种分层渲染的示意图。参考图1d，待显示页面被分成三层渲染层进行分别渲染。通过调整三层渲染层的相对层级关系，可以使得待显示页面具有不同的显示效果。进一步的，由于页面元素只要发生变化就需要被重新渲染，通过分层渲染将变化频率相近的元素放在同一渲染层进行渲染，可以减少渲染次数，从而提高页面的渲染和显示性能。

本实施例中，元素数量约束值可选为预设的每层渲染层中元素数量的最大值，或者也可以是最小值，或者数量范围值等形式表示。图1e为本发明实施例一提供的一种显示帧率与每层元素数量的关系示意图。参考图1e，实验数据表明，每个渲染层的元素越多，页面的显示帧率会越低(即页面越卡顿)，所以每一层渲染层容纳的元素数量不能太多。而在元素总量不变的情况下，假设每层容纳元素数量一样，渲染层的层数越多，页面流畅度也越低。所以在元素总量不变的情况下，层数和每层元素数量需要保持平衡。

本实施例对根据显示帧率确定元素数量约束值的具体方式不作限定。

在一实施例中，通过根据显示帧率与每层元素数量的关系，确定元素数量约束值，从而根据元素数量约束值对每层元素数量进行约束，进一步控制层数和每层元素数量的平衡，保证页面的渲染和显示性能的提高。

s130、根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素。

本实施例中，在对待渲染页面进行渲染时，需要将待渲染页面包括的元素分配至对应的渲染层渲染。在进行元素分配的过程中，需要根据元素数量约束值对每层元素数量进行约束。进而在待渲染页面中元素总量已知的情况之下，可以确定待渲染页面中渲染层的层数和各个渲染层包括的元素，即得到层级分配策略。

本实施例对元素分配是否是均匀分配不作限定，只要满足每层元素数量与元素数量约束值匹配即可。

s140、根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

本实施例中，元素属性数据用于定义元素。例如，元素为按钮，对应的元素属性数据可以是按钮显示文字(文字的大小、字体和颜色)、按钮位置(可以是相对位置或绝对位置)和按钮颜色等。

在一实施例中，根据层级分配策略确定待渲染页面中的渲染层的层数，以及每层渲染层对应的元素。每层渲染层对其分配到的元素，根据元素属性数据近行渲染，转换成屏幕上的像素。对所有渲染层的渲染结果叠加后生成最终的显示页面进行显示。

本实施例的技术方案，通过根据获取页面的显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；并根据所述元素数量约束值确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素，之后根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示，解决了dom和canvas由于各自缺陷带来的一致性差和实现复杂的问题，以实现根据显示帧率调整元素数量约束值，从而兼顾内存占用与渲染速度的平衡点，优化渲染效果和加载速度。

实施例二

图2a为本发明实施例二提供的一种页面渲染方法的流程图，本实施例在上述实施例的基础上进一步细化，采用单向数据流的设计对页面渲染进行优化。其中，单向数据流设计即操控层到渲染层之间的数据流动是单向的，数据层变化也不会影响操控层。任何渲染层的变化根据数据层的变化而发生改变。

参考图2a，该页面渲染方法具体包括如下步骤：

s210、通过操控层获取用户交互操作，并根据所述用户交互操作确定待调整元素的属性变化数据。

本实施例中，操控层是响应用户交互操作的功能模块。用户交互操作至少包括：点击和拖拽等。

本实施例对用户交互操作的具体响应不作限定，可以通过自定义事件系统进行功能限定。

在一实施例中，操作层响应用户交互操作可以是激活被选中的元素。

在一实施例中，操作层响应用户交互操作可以是修改元素属性数据。

在一实施例中，图2b为本发明实施例二提供的一种操控层确定待渲染元素的属性变化数据的方法的流程图，参考图2b，将s210进一步细化为s211-s214。

s211、获取在所显示页面上输入的用户交互操作的交互坐标。

本实施例中，交互坐标为用户交互操作作用于显示页面的位置。本实施例对交互坐标不作限定，该交互坐标可以是相对坐标、绝对坐标或者是相对极坐标。其中，绝对坐标是以点o为原点，作为参考点，来定位平面内某一点的具体位置，表示方法为：a(x，y)；相对坐标是以该点的上一点为参考点，来定位平面内某一点的具体位置，其表示方法为：a(@△x，△y)；相对极坐标是指出平面内某一点相对于上一点的位移距离、方向及角度，具体表示方法为：a(@d<α)。

本实施例对交互坐标的获取方式不作限定，可以是通过触摸屏幕获取，也可以通过输入设备(如鼠标、键盘和触摸板等)获取。

在一实施例中，所显示页面的至少部分元素的控制区域使用可缩放矢量图形进行描述。

本实施例中，可缩放矢量图形(scalablevectorgraphics，svg)是一种基于可扩展标记语言(xml)，用于描述二维矢量图形的图形格式。示例性的，圆形可以用圆心和半径表示，矩形可以用长和宽表示。通过使用可缩放矢量图形描述控制区域可以使得控制区域不局限于矩形区域，进而使得控制区域精准对应元素的显示形状。

s212根据所述交互坐标和所显示页面上各元素对应的控制区域，确定待调整元素。

本实施例中，待调整元素为用户交互操作作用的元素。可通过交互坐标落入元素对应的控制区域，进而确定该元素为待调整元素。

s213、根据所述待调整元素和所述用户交互操作，确定所述待渲染元素的属性变化数据。

本实施例中，待渲染元素为元素属性数据发生变化导致显示效果需要发生变化的元素。

在一实施例中，图2c为本发明实施例二提供的一种确定待渲染元素的属性变化数据的方法的流程图，参考图2c，s213细化为s2131-s2132。

s2131、调用所述待调整元素的回调函数。

本实施例中，回调函数是对应于待调整元素被用户交互操作作用后需要执行的函数。在回调函数中定义用户交互操作的具体响应。

s2132、执行所述回调函数，根据所述用户交互操作产生待渲染元素的元素属性数据，作为属性变化数据，其中，所述待渲染元素与所述待调整元素相同或不相同。

本实施例中，在回调函数中定义用户交互操作的具体响应可以是修改元素属性数据，根据被修改元素属性数据可以确定待渲染元素。

需要说明的是，所述待渲染元素与所述待调整元素相同或不相同。示例性的，用户点击按钮后，按钮被设置为被点击状态(按钮的元素属性数据之一)。进一步的，执行按钮的被点击对应的回调函数。示例性的，该回调函数未涉及到更改按钮本身的显示效果，并用于更改动画布(另一元素)的显示内容，则画布的元素属性数据被修改，且该修改内容涉及到更改画布的显示效果，则画布为待渲染元素，按钮不是待渲染元素。当然，若按钮的回调函数涉及到更改按钮本身的显示效果，如更改按钮颜色，则按钮也是待渲染元素。

s214、根据所述属性变化数据更新待渲染页面的元素属性数据。

本实施例中，待渲染元素是待渲染页面上的元素，需要根据待渲染元素的属性变化数据更新待渲染页面的元素属性数据。

s220、通过数据层根据所述属性变化数据更新待渲染页面的元素属性数据。

本实施例中，步骤s214可由s220中的数据层执行。

s230、根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

本实施例的技术方案，通过操控层获取用户交互操作，并根据所述用户交互操作确定待调整元素的属性变化数据，并通过数据层根据所述属性变化数据更新待渲染页面的元素属性数据，之后根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示，通过操控层、数据层和渲染层的分离，以实现单向数据流设计，减少渲染的消耗，保证页面流畅性。

实施例三

图3a为本发明实施例三提供的一种页面渲染方法的流程图，本实施例在上述实施例的基础上进一步细化，参考图3a，该页面渲染方法具体包括如下步骤：

s310、获取页面的显示帧率。

s320、如果所述显示帧率小于预设帧率值，则根据预设帧率元素映射模型调整待渲染页面中每个渲染层中的所述元素数量约束值。

本实施例中，预设帧率值为设置的最小的帧率值，当显示帧率小于预设帧率值，则说明页面渲染性能不佳。本实施例对预设帧率值的具体值不作限定，根据网页的内容不同而采取不同的取值，如要使滚动、动画等操作看起来流畅，必须以60帧每秒以上的帧率进行渲染；又如游戏领域，需要显示帧率达到40帧每秒以上就可以称之为流畅。

本实施例对预设帧率元素映射模型的具体实现方式不作限定。

在一实施例中，可以根据实验获取的显示帧率与每层元素数量的关系数据回归分析得到。

需要说明的是，在一实施例中，根据设备参数初始化所述元素数量约束值。示例性的，所述设备参数包括下述至少一种：浏览器类型、设备类型和设备分辨率。

本实施中，浏览器类型也可以是浏览器内核类型。不同浏览器内核对网页的渲染有些许不同。设备类型为根据硬件配置(如图像处理器和中央处理器)的不同，其渲染的性能也不同。设备分辨率涉及到每次渲染所需要处理的像素点数，其渲染的性能也不同。

在一实施例中，根据设备参数与元素数量约束值的历史数据，确定设备参数对应的元素数量约束值。

s330、根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略。

本实施例对层数和对应元素的分配次序不作限定。

在一实施例中，根据待渲染页面的元素总数量和所述元素数量约束值，确定待渲染页面包括的渲染层的层数，并按照所述层数，将各所述元素分配至各渲染层。

在一实施例中，将所述待渲染页面的各所述元素，按照设定规则陆续分配至渲染层，如果任一渲染层所分配的元素数量超出所述元素数量约束值，则新增渲染层。

在一实施例中，图3b为本发明实施例三提供的一种根据元素数量约束值将元素分配至渲染层的方法的流程图，参考图3b，s330可以进一步细化为：s331-s333：

s331、获取所述待渲染页面包括的各元素对应的元素属性数据。

本实施例中，根据数据层中的元素属性数据的变化是否影响元素的显示效果，确定出待渲染页面包括的各元素(即待渲染元素)，并从数据层中获取各待渲染元素的元素属性数据。

s332、根据所述元素属性数据，确定各所述元素对应的渲染层类型，其中，所述渲染层类型包括dom和canvas。

本实施例中，dom是html和xml文档的编程接口，将web页面与脚本或程序语言连接起来；画布(canvas)元素是html5的一部分，允许脚本语言动态渲染位图像。dom渲染层使用简单，且浏览器自动重渲染，而无需手动触发渲染，亦可以使用浏览器内置的组件帮助实现功能。但是dom渲染层渲染不灵活，且会占用大量内存，另外，不同浏览器实现有差异，难以保持一致性。canvas性能优越，占用内存少，能尽可能减少重复的渲染，有较强的灵活性，所有渲染都可以自行控制，可适用于处理大量元素的页面。但是canvas实现比较复杂，且当页面渲染区域极大时可能会很慢。

根据dom和canvas的不同特性，在元素属性数据中，可以标记各元素对应的渲染层类型，已达到元素特性与渲染层类型匹配，从而实现较佳的渲染效果。

s333、根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层，其中，所述待渲染页面中的每个渲染层类型对应设置有至少一个渲染层。

同样的，本实施例对层数和对应元素的分配次序不作限定。

在一实施例中，每个渲染层类型对应的渲染层的层数，可以由每个渲染层类型对应的元素的总数与元素数量约束值的比值确定。如canvas类型的元素总数为40，元素数量约束值为8，则canvas渲染层的层数为5。

在一实施例中，图3c为本发明实施例三提供的一种元素分配至渲染层的方法的流程图，参考图3c，s333可以进一步细化为s3331-s3333：

s3331、确定各所述元素对应的渲染频率。

本实施例中，渲染频率是指元素需要被刷新的概率值，可以由历史数据得到。通过确定各元素对应的渲染频率(如渲染频率低为背景，高为前景，又如，渲染频率低为文字，高为动画)，以节省渲染时耗费的资源。

s3332、根据所述渲染频率对所述元素进行排序。

本实施例对排序的具体实现方式不作限定，可以采用快速排序和桶排序等常用排序算法。

s3333、根据各所述元素的排序结果，将各所述元素顺序分配至所述渲染层类型对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

本实施例以元素数量是47，其中dom渲染类型的元素有24个，canvas渲染类型的元素有23个为例进行说明，元素数量约束值为8(每层元素数量的最大值)，dom渲染类型对应的元素进行渲染频率排序后分配至dom渲染层，得到分配后的dom渲染层有3层，每层元素数量为[888]；canvas渲染类型对应的元素进行进行渲染频率排序后分配至canvas渲染层，得到分配后的canvas渲染层有3层，每层元素数量为[887]。

本实施例中，将元素根据渲染频率排序后，可以进一步确定元素的分配次序，从而使得渲染频率接近的元素放在同一渲染层的概率增大，进而防止渲染频率小的元素由于与渲染频率大的元素放置于同一层，而被频繁渲染，造成渲染时的资源浪费。

在一实施例中，图3d为本发明实施例三提供的另一种元素分配至渲染层的方法的流程图，参考图3d，s333可以进一步细化为s3334-s3336：

s3334、确定各所述元素对应的渲染频率。

s3335、将各元素的所述渲染频率与至少两个预设渲染频段进行匹配。

本实施例中，将各元素的渲染频率与至少两个预设渲染频段进行匹配，确定各元素对应的预设渲染频段，保证处于相同预设渲染频段的元素被分配到同一渲染层。此处的预设渲染频段不对各元素的渲染类型进行区分。需要说明的是，本实施例中对预设渲染频段的设置方式不作限定。在一实施例中，每个渲染层类型设置至少两个预设渲染频段，将各渲染类型对应的元素的所述渲染频率与至少两个预设渲染频段进行匹配。

s3336、根据匹配关系，将各所述元素分配至所述渲染层类型中预设渲染频段对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

本实施例以元素数量是47，其中dom渲染类型的元素有24个，canvas渲染类型的元素有23个为例进行说明，元素数量约束值为8每层元素数量的最大值)，dom渲染类型对应的元素根据预设渲染频段划分为[879]，其中9超过元素数量约束值，发生溢出，则新建dom渲染层，则分配后的dom渲染层有4层，每层元素数量为[8781]；canvas渲染类型对应的元素根据预设渲染频段划分为[167]，其中，16超过元素数量约束值，发生溢出，新建canvas渲染层，则canvas渲染层有3层，每层元素数量为[887]。

本实施例中，将元素根据渲染频率排序后，可以进一步确定元素的所处的预设渲染频段，从而使得渲染频率在同一预设渲染频段的元素放在同一渲染层的概率增大，进而防止渲染频率小的元素由于与渲染频率大的元素放置于同一层，而被频繁渲染，造成渲染时的资源浪费。

需要说明的是，在执行s330之时，还包括：若检测到预设情形时，则禁止层级分配策略的调整操作，并将历史层级分配策略作为当前的层级分配策略。

本实施例中，本实施例对禁止层级分配策略的调整操作的具体时机不作限定，可以是仍然执行确定层级分配策略的操作，但在实际渲染过程中不进行层级分配策略的调整，按照历史层级分配策略进行渲染；也可以是不进行确定层级分配策略的操作，直接使用历史层级分配策略进行渲染。

在一实施例中，所述预设情况包括：处理器高频占用、用户交互操作过程和动画播放过程中的至少一种。

本实施例中，由于进行层级分配是十分耗费资源的操作，若在预设情况下进行层级分配时，容易造成页面的卡顿，使得浏览不够顺畅。本实施例通过检测到预设情形，则禁止层级分配策略的调整操作，可以禁止产生该不利后果。

s340、确定所述待渲染页面中的待渲染元素。

本实施例中，根据数据层中的元素属性数据的变化是否影响元素的显示效果，确定出待渲染页面包括的各元素(即待渲染元素)。

s350、根据所述层级分配策略确定所述待渲染元素所在渲染层。

本实施例中，层级分配策略包括层数以及每层所包括的元素，根据层级分配策略即可确定待渲染元素对应的渲染层。

s370、对所述待渲染元素所在渲染层进行渲染，并显示。

本实施例中，若渲染层中部分或全部元素为待渲染元素，则该渲染层需要被重新渲染。

本实施例的技术方案，通过判断如果获取的页面的显示帧率小于预设帧率值，则根据预设帧率元素映射模型调整待渲染页面中每个渲染层中的所述元素数量约束值，进而，根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，之后，获取所述待渲染页面包括的各元素对应的元素属性数据，并根据所述元素属性数据，确定各所述元素对应的渲染层类型(其中，所述渲染层类型包括dom和canvas)，之后，根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层(其中，所述待渲染页面中的每个渲染层类型对应设置有至少一个渲染层)，进而，确定所述待渲染页面中的待渲染元素，并根据所述层级分配策略确定所述待渲染元素所在渲染层，之后对所述待渲染元素所在渲染层进行渲染，并显示，解决了dom和canvas由于各自缺陷带来的一致性差和实现复杂的问题，以实现根据显示帧率调整元素数量约束值，从而兼顾内存占用与渲染速度的平衡点，优化渲染效果和加载速度。进一步的，确定元素的分配次序，从而使得渲染频率接近的元素放在同一渲染层的概率增大，或者，确定元素的所处的预设渲染频段，从而使得渲染频率在同一预设渲染频段的元素放在同一渲染层的概率增大，进而防止渲染频率小的元素由于与渲染频率大的元素放置于同一层，而被频繁渲染，造成渲染时的资源浪费。

实施例四

图4为本发明实施例四提供的一种页面渲染装置的结构示意图，本实施例可适用于浏览器渲染网页的技术领域，该装置可以用于包含浏览器内核的设备。具体的，浏览器最重要或者说核心的部分是渲染引擎，一般称之为“浏览器内核”。浏览器内核负责对网页语法的解释(如标准通用标记语言下的一个应用html、javascript)并渲染(显示)网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。需要注意的是，不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。进一步的，本实施例对包含浏览器的设备不作限定，可以是平板电脑、个人电脑、移动终端设备、工作站或服务器等。本实施例对浏览器内核的存在方式不作限定，可以是集成在浏览器中，也可以是集成在其他应用程序中(如web应用程序)。

参照图4，该装置具体包括如下结构：帧率获取模块410、约束值获取模块420、策略确定模块430和渲染显示模块440。

帧率获取模块410，用于获取页面的显示帧率。

约束值获取模块420，用于根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值。

策略确定模块430，用于根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素。

渲染显示模块440，用于根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

本实施例的技术方案，通过根据获取页面的显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；并根据所述元素数量约束值确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素，之后根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示，解决了dom和canvas由于各自缺陷带来的一致性差和实现复杂的问题，以实现根据显示帧率调整元素数量约束值，从而兼顾内存占用与渲染速度的平衡点，优化渲染效果和加载速度。

在上述技术方案的基础上，约束值获取模块420包括：

元素数量约束值单元，用于如果所述显示帧率小于预设帧率值，则根据预设帧率元素映射模型调整待渲染页面中每个渲染层中的所述元素数量约束值。

在上述技术方案的基础上，约束值获取模块420包括：

元素数量约束值初始化单元，根据设备参数初始化所述元素数量约束值。

在上述技术方案的基础上，所述设备参数包括下述至少一种：浏览器类型、设备类型和设备分辨率。

在上述技术方案的基础上，策略确定模块430包括：

第一策略确定单元，用于根据待渲染页面的元素总数量和所述元素数量约束值，确定待渲染页面包括的渲染层的层数，并按照所述层数，将各所述元素分配至各渲染层；用于将所述待渲染页面的各所述元素，按照设定规则陆续分配至渲染层，如果任一渲染层所分配的元素数量超出所述元素数量约束值，则新增渲染层。

在上述技术方案的基础上，策略确定模块430包括：

元素属性数据获取单元，用于获取所述待渲染页面包括的各元素对应的元素属性数据。

渲染层类型确定单元，用于根据所述元素属性数据，确定各所述元素对应的渲染层类型，其中，所述渲染层类型包括dom和canvas。

元素分配单元，用于根据所述元素数量约束值，将各所述元素分配至对应所述渲染层类型的渲染层，其中，所述待渲染页面中的每个渲染层类型对应设置有至少一个渲染层。

在上述技术方案的基础上，元素分配单元包括：

第一渲染频率确定子单元，用于确定各所述元素对应的渲染频率。

渲染频率排序子单元，用于根据所述渲染频率对所述元素进行排序。

第一元素分配子单元，用于根据各所述元素的排序结果，将各所述元素顺序分配至所述渲染层类型对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

在上述技术方案的基础上，元素分配单元包括：

第二渲染频率确定子单元，用于确定各所述元素对应的渲染频率。

渲染频段匹配子单元，用于将各元素的所述渲染频率与至少两个预设渲染频段进行匹配。

第二元素分配子单元，用于根据匹配关系，将各所述元素分配至所述渲染层类型中预设渲染频段对应的至少一个所述渲染层，其中，每个所述渲染层中的元素数量与所述元素数量约束值匹配。

在上述技术方案的基础上，该页面渲染装置还包括：

交互坐标获取模块，用于获取在所显示页面上输入的用户交互操作的交互坐标。

待调整元素确定模块，用于根据所述交互坐标和所显示页面上各元素对应的控制区域，确定待调整元素。

属性变化数据确定模块，用于根据所述待调整元素和所述用户交互操作，确定所述待渲染元素的属性变化数据。

元素属性数据更新模块，用于根据所述属性变化数据更新待渲染页面的元素属性数据。

在上述技术方案的基础上，所显示页面的至少部分元素的控制区域使用可缩放矢量图形进行描述。

在上述技术方案的基础上，属性变化数据确定模块包括：

回调函数调用单元，用于调用所述待调整元素的回调函数。

回调函数执行单元，用于执行所述回调函数，根据所述用户交互操作产生待渲染元素的元素属性数据，作为属性变化数据，其中，所述待渲染元素与所述待调整元素相同或不相同。

在上述技术方案的基础上，页面渲染装置还包括：

操控层模块，用于在根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示之前，通过操控层获取用户交互操作，并根据所述用户交互操作确定待调整元素的属性变化数据。

数据层模块，用于在根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示之前，通过数据层根据所述属性变化数据更新待渲染页面的元素属性数据。

在上述技术方案的基础上，渲染显示模块440包括：

待渲染元素确定单元，用于确定所述待渲染页面中的待渲染元素。

渲染层确定单元，用于根据所述层级分配策略确定所述待渲染元素所在渲染层。

渲染显示单元，用于对所述待渲染元素所在渲染层进行渲染，并显示。

在上述技术方案的基础上，策略确定模块430还包括：

禁止调整操作单元，用于若检测到预设情形时，则禁止层级分配策略的调整操作，并将历史层级分配策略作为当前的层级分配策略。

在上述技术方案的基础上，所述预设情况包括：处理器高频占用、用户交互操作过程和动画播放过程中的至少一种。

上述产品可执行本发明任意实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例五

图5为本发明实施例五提供的一种页面渲染设备的结构示意图。如图5所示，该页面渲染设备包括：处理器50、存储器51、具有触摸功能的显示屏52、输入装置53、输出装置54以及通信装置55。该页面渲染设备中处理器50的数量可以是一个或者多个，图5中以一个处理器50为例。该页面渲染设备中存储器51的数量可以是一个或者多个，图5中以一个存储器51为例。该页面渲染设备的处理器50、存储器51、显示屏52、输入装置53、输出装置54以及通信装置55可以通过总线或者其他方式连接，图5中以通过总线连接为例。实施例中，页面渲染设备可以是包含浏览器内核的电脑，手机，平板或交互智能平板等。实施例中，以页面渲染设备为交互智能平板为例，进行描述。

存储器51作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明任意实施例所述的页面渲染方法对应的程序指令/模块(例如，页面渲染装置中的帧率获取模块410、约束值获取模块420、策略确定模块430和渲染显示模块440)。存储器51可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器51可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器51可进一步包括相对于处理器50远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

显示屏52为具有触摸功能的显示屏52，其可以是电容触摸屏、电磁触摸屏或者红外触摸屏。一般而言，显示屏52用于根据处理器50的指示显示数据，还用于接收作用于显示屏52的触摸操作，并将相应的信号发送至处理器50或其他装置。可选的，当显示屏52为红外触摸屏时，其还包括红外触摸框，该红外触摸框设置在显示屏52的四周，其还可以用于接收红外信号，并将该红外信号发送至处理器50或者其他设备。

通信装置55，用于与其他设备建立通信连接，其可以是有线通信装置和/或无线通信装置。

输入装置53可用于接收输入的数字或者字符信息，以及产生与页面渲染设备的用户设置以及功能控制有关的键信号输入，还可以是用于获取图像的摄像头以及获取音频数据的拾音设备。输出装置54可以包括扬声器等音频设备。需要说明的是，输入装置53和输出装置54的具体组成可以根据实际情况设定。处理器50通过运行存储在存储器51中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的页面渲染方法。

上述产品可执行本发明任意实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例六

本发明实施例六还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种页面渲染方法，包括：

获取页面的显示帧率；

根据所述显示帧率确定待渲染页面中每个渲染层中的元素数量约束值；

根据确定的所述元素数量约束值，确定待渲染页面所包括的元素的层级分配策略，其中，所述层级分配策略包括层数以及每层所包括的元素；

根据所述层级分配策略和元素属性数据，对所述待渲染页面的渲染层进行渲染并显示。

当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的页面渲染方法操作，还可以执行本发明任意实施例所提供的页面渲染方法中的相关操作，且具备相应的功能和有益效果。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(read-onlymemory,rom)、随机存取存储器(randomaccessmemory,ram)、闪存(flash)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是机器人，个人计算机，服务器，或者网络设备等)执行本发明任意实施例所述的页面渲染方法。

值得注意的是，上述页面渲染装置中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(pga)，现场可编程门阵列(fpga)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。