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

Abstract

本公开提供了一种页面渲染方法、装置、电子设备及存储介质，属于互联网技术领域。方法包括：通过万维网WEB层获取页面信息，将页面信息发送给系统原生的本地层；通过本地层接收页面信息，根据页面信息确定页面结构；通过本地层，根据页面结构确定至少一个节点的渲染信息，基于至少一个节点的渲染信息，对页面进行渲染。由于WEB层相对于本地层来说运算能力有限，使得通过WEB层将页面信息发送给本地层，由本地层基于该页面信息实现对页面的渲染，即可在较短的时间内完成页面的渲染，从而缩短页面渲染花费的时间。特别是在页面上包括较多的节点时，通过本地层进行页面渲染相对于WEB层能够显著节约时间。

Description

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

技术领域

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

背景技术

随着互联网技术的发展，各种各样的应用程序层出不穷，应用程序通常由一个一个的页面构成，用户可以通过浏览应用程序中的页面来获取需要的信息。应用程序中页面渲染地越快速，对用户的吸引力越强。因此，如何快速进行页面渲染是一个亟需解决的问题。

相关技术中，在进行页面渲染时，通过WEB(World Wide Web，万维网)层构建页面结构，页面结构包括至少一个节点，遍历页面结构中的每个节点，根据每个节点包含的内容和样式渲染该节点，从而完成页面的渲染。

在上述相关技术中，由于页面上包括大量的节点，在通过WEB层进行页面渲染时会花费较长的时间。

发明内容

本公开实施例提供了一种页面渲染方法、装置、电子设备及存储介质，能够解决相关技术中触控操作较为复杂的问题。所述技术方案如下：

根据本公开实施例的一方面，提供了一种页面渲染方法，所述方法包括：

通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

在一种可能的实现方式中，所述页面信息包括所述页面的布局信息和样式信息；所述根据所述页面信息确定页面结构，包括：

对所述布局信息进行解析，得到所述页面的布局结构；

对所述样式信息进行解析，得到所述页面的样式结构；

将所述布局结构和样式结构进行融合，得到所述页面的页面结构。

在另一种可能的实现方式中，所述根据所述页面结构确定所述至少一个节点的渲染信息，包括：

对于所述至少一个节点中的任一节点，获取所述节点包括的样式标识；

从用于存储样式的样式文件中，获取与所述样式标识对应的样式；

根据所述样式和所述页面结构，确定所述节点的渲染信息。

在另一种可能的实现方式中，所述获取所述节点包括的样式标识，包括：

对所述节点进行解析，得到所述节点包括的至少一个属性；

获取所述至少一个属性中样式标识属性的参数值，得到所述样式标识。

在另一种可能的实现方式中，所述根据所述样式和所述页面结构，确定所述节点的渲染信息，包括：

根据所述页面结构，获取与所述节点相关的至少一个其他节点；

根据所述至少一个其他节点的渲染信息和所述样式，确定所述节点的渲染信息。

在另一种可能的实现方式中，所述方法还包括：

通过所述本地层，将渲染得到的页面发送给所述WEB层；

通过所述WEB层，对所述页面进行显示。

根据本公开实施例的另一方面，提供了一种页面渲染装置，所述装置包括：

发送模块，被配置为通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

接收模块，被配置为通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

渲染模块，被配置为通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

在一种可能的实现方式中，所述页面信息包括所述页面的布局信息和样式信息；所述接收模块，还被配置为对所述布局信息进行解析，得到所述页面的布局结构；对所述样式信息进行解析，得到所述页面的样式结构；将所述布局结构和样式结构进行融合，得到所述页面的页面结构。

在另一种可能的实现方式中，所述渲染模块，还被配置为对于所述至少一个节点中的任一节点，获取所述节点包括的样式标识；从用于存储样式的样式文件中，获取与所述样式标识对应的样式；根据所述样式和所述页面结构，确定所述节点的渲染信息。

在另一种可能的实现方式中，所述渲染模块，还被配置为对所述节点进行解析，得到所述节点包括的至少一个属性；获取所述至少一个属性中样式标识属性的参数值，得到所述样式标识。

在另一种可能的实现方式中，所述渲染模块，还被配置为根据所述页面结构，获取与所述节点相关的至少一个其他节点；根据所述至少一个其他节点的渲染信息和所述样式，确定所述节点的渲染信息。

在另一种可能的实现方式中，所述装置还包括：

所述确定模块，还被配置为通过所述本地层，将渲染得到的页面发送给所述WEB层；

显示模块，被配置为通过所述WEB层，对所述页面进行显示。

根据本公开实施例的另一方面，提供了一种电子设备，所述电子设备包括一个或多个处理器；

用于存储所述一个或多个处理器可执行指令的易失性或非易失性存储器；

其中，所述一个或多个处理器被配置为：

通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

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

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

由于WEB层相对于本地层来说运算能力有限，且本地层的运算能力可以随着电子设备的提升而提升，使得通过WEB层将页面信息发送给本地层，由本地层基于该页面信息实现对页面的渲染，即可在较短的时间内完成页面的渲染，从而缩短页面渲染花费的时间。特别是在页面上包括较多的节点时，通过本地层进行页面渲染相对于WEB层能够显著节约时间。

并且，由于通过本地层分别对布局信息和样式信息进行解析，得到布局结构和样式结构，从而融合后得到页面结构，在本地层计算能力较高的前提下，解析和融合的速度也较快，从而缩短了页面渲染的整体耗时。

并且，由于通过本地层根据节点包括的样式标识，来从样式文件中获取样式，进而确定节点的渲染信息，使得样式可以存储在样式文件中，而不是页面信息中，从而一方面减少了开发人员的工作量，另一方面本地层根据样式标识检索较为快速，缩短了页面渲染的整体耗时。

附图说明

为了更清楚地说明本公开实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本公开实施例提供的一种实施环境的示意图；

图2是本公开实施例提供的一种页面渲染方法的流程图；

图3是本公开实施例提供的另一种页面渲染方法的流程图；

图4是本公开实施例提供的一种页面的示意图；

图5是本公开实施例提供的快应用框架的框图；

图6是本公开实施例提供的快应用的启动流程图；

图7是本公开实施例提供的一种页面渲染装置的框图；

图8是本公开实施例提供的一种电子设备的结构框图。

具体实施方式

为使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开实施方式作进一步地详细描述。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本公开的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

图1是本公开实施例提供的一种实施环境的示意图。参见图1，该实施环境中包括电子设备101、第一服务器102和第二服务器103。电子设备101上安装有第一应用程序，该第一应用程序中包括至少一个第二应用程序的启动接口，即该第一应用程序可以用于启动至少一个第二应用程序。服务器102可以为该第一应用程序提供后台服务。

电子设备101可以通过第一应用程序启动第二应用程序，第二应用程序可以为任一未下载，且可以通过第一应用程序进行使用的应用。例如，第二应用程序可以为购物应用或者打车应用等。第二服务器103可以为任一第二应用程序提供后台服务，也即第二服务器103为任一快应用对应的后台服务器。在本公开实施例中，该第二应用程序为快应用。

第一服务器102可以为第二应用程序提供页面信息，该页面信息用于确定页面的页面结构。当然第一服务器102还可以存储有页面信息中的静态数据，如表格、边框、颜色等，而第二服务器103存储有页面信息的动态数据，如表格内显示的数值等，从而由第一服务器102和第二服务器103共同为第二应用程序提供页面信息。电子设备101可以基于第二应用程序获取到的页面信息渲染得到第二应用程序的页面。其中，电子设备101可以为电视、电脑、手机、平板电脑或者其他电子设备。第一服务器102可以为一台服务器、若干台服务器构成的服务器集群或云计算中心。同样，第二服务器103也可以为一台服务器、若干台服务器构成的服务器集群或云计算中心。

在本公开实施例中，电子设备101在接收到用户启动第一应用程序的操作后，显示第一应用程序的程序页面，该程序页面包括多个第二应用程序的启动接口，当检测到任一第二应用程序的启动接口的触发操作时，启动该第二应用程序。通过WEB层从第一服务器102获取该第二应用程序对应的页面信息，并将该页面信息通过WEB层发送给电子设备101系统原生的本地层。通过本地层接收上述页面信息，根据该页面信息确定页面结构，然后通过本地层根据页面结构确定至少一个节点的渲染信息，基于该至少一个节点的渲染信息，对页面进行渲染。由于本地层的计算效率相较于WEB层高，且随着电子设备101性能的提高，本地层的计算效率还可以进一步的提升，从而有效的缩短页面渲染所用的时间。

图2是本公开实施例提供的一种页面渲染方法的流程图。参见图2，该页面渲染方法包括以下步骤：

在步骤201中，电子设备通过万维网WEB层获取页面信息，将页面信息发送给系统原生的本地层。

在步骤202中，电子设备通过本地层接收页面信息，根据页面信息确定页面结构，页面结构用于指示待渲染的页面中包括的至少一个节点。

在步骤203中，电子设备通过本地层，根据页面结构确定至少一个节点的渲染信息，基于至少一个节点的渲染信息，对页面进行渲染。

在本公开实施例中，由于WEB层相对于本地层来说运算能力有限，且本地层的运算能力可以随着电子设备的提升而提升，使得通过WEB层将页面信息发送给本地层，由本地层基于该页面信息实现对页面的渲染，即可在较短的时间内完成页面的渲染，从而缩短页面渲染花费的时间。特别是在页面上包括较多的节点时，通过本地层进行页面渲染相对于WEB层能够显著节约时间。

在一种可能的实现方式中，页面信息包括页面的布局信息和样式信息；根据页面信息确定页面结构，包括：

对布局信息进行解析，得到页面的布局结构；

对样式信息进行解析，得到页面的样式结构；

将布局结构和样式结构进行融合，得到页面的页面结构。

在一种可能的实现方式中，根据页面结构确定至少一个节点的渲染信息，包括：

对于至少一个节点中的任一节点，获取节点包括的样式标识；

从用于存储样式的样式文件中，获取与样式标识对应的样式；

根据样式和页面结构，确定节点的渲染信息。

在一种可能的实现方式中，获取节点包括的样式标识，包括：

对节点进行解析，得到节点包括的至少一个属性；

获取至少一个属性中样式标识属性的参数值，得到样式标识。

在一种可能的实现方式中，根据样式和页面结构，确定节点的渲染信息，包括：

根据页面结构，获取与节点相关的至少一个其他节点；

根据至少一个其他节点的渲染信息和样式，确定节点的渲染信息。

在一种可能的实现方式中，方法还包括：

通过本地层，将渲染得到的页面发送给WEB层；

通过WEB层，对页面进行显示。

图3是本公开实施例提供的另一种页面渲染方法的流程图。参见图3，该页面渲染方法包括以下步骤：

在步骤301中，电子设备通过万维网WEB层获取页面信息，将页面信息发送给系统原生的本地层。

在本公开实施例中，电子设备可以安装有第一应用程序，该第一应用程序可以用于启动第二应用程序，该第二应用程序为快应用。电子设备可以显示第一应用程序的程序页面，该程序页面中包括本地未安装的多个第二应用程序的启动接口，本公开实施例以任一第二应用程序为例进行说明。

当用户想要启动第二应用程序时，用户可以在第一应用程序的程序页面点击该第二应用程序的启动接口，当该第二应用程序的启动接口被触发时，电子设备需要显示该第二应用程序的主页面，此时电子设备可以加载WEB层，通过该WEB层向服务器发送页面信息获取请求，接收服务器返回的页面信息，该页面信息获取请求中可以携带有该主页面的页面标识。或者，当用户想要从第二应用程序当前显示的页面跳转到其他页面时，电子设备需要显示跳转到的目标页面，此时电子设备可以通过已加载的WEB层，向服务器发送页面信息获取请求，接收服务器返回的页面信息，该页面信息获取请求中可以携带有该目标页面的页面标识。电子设备可以通过WEB层将接收到的页面信息发送给系统原生的本地层，即电子设备的原生系统框架，也可以称为Native(本地)层。其中，WEB层通常用于解析HTML(HyperText Markup Language，超文本标记语言)文件或者JS(JavaScript，java脚本序言)文件来进行页面的渲染。

例如，以第二应用程序为购物类应用程序为例，当用户启动该购物类应用程序时，用户使用的电子设备通过WEB层向第二应用程序的后台服务器发送页面信息获取请求，该页面信息获取请求中携带有该购物类应用程序的主页面的页面标识。后台服务器接收到该页面信息获取请求后，对该页面信息获取请求进行解析，得到主页面的页面标识，根据该主页面的页面标识，获取对应的页面信息，向该电子设备返回携带有该页面信息的页面信息响应。电子设备通过WEB层接收该页面信息，然后将得到的页面信息发送给本地层。

在步骤302中，电子设备通过本地层接收页面信息，根据页面信息确定页面结构，页面结构用于指示待渲染的页面中包括的至少一个节点。

在本公开实施例中，电子设备可以通过本地层接收WEB层发送的页面信息，该页面信息包括页面的布局信息和样式信息。该布局信息可以为HTML文件中包括的组件信息和数据信息等，如div(DIVision，图层，一种HTML语言中的标签)、list(列表，一种HTML语言中的标签)等。该样式信息可以为CSS(Cascading Style Sheets，层叠样式表)文件中包括的组件样式等，如color(颜色)、width(宽)以及height(高)等。

在一种可能的实现方式中，电子设备根据页面的布局信息和样式信息确定页面结构的步骤可以为：电子设备可以通过本地层对布局信息进行解析，得到页面的布局结构。电子设备可以通过本地层对样式信息进行解析，得到页面的样式结构。电子设备得到布局结构和样式结构后，通过本地层对上述布局结构和样式结构进行融合，得到页面的页面结构。

例如，电子设备通过本地层对HTML文件进行解析，生成DOM(Document ObjectMode，文档对象模型)树，该DOM树上包括多个节点，每个节点对应一个对象，如文档对象、表格对象等，每个对象包括至少一个属性，如name(名称)等。电子设备通过本地层对CSS文件进行解析，生成CSS规则树，该CSS规则树上也包括多个节点，每个节点对应一个样式表对象，每个样式表对象都包含有至少一种CSS样式，如颜色、尺寸等。电子设备可以在得到DOM树和CSS规则树之后，遍历DOM树上每个可见节点，对于每个可见节点，从CSS规则树上找到与其对应的节点，将该节点在DOM树上的属性和在CSS规则树上的CSS样式进行关联，实现对DOM树和CSS规则树的融合，从而得到渲染树，该渲染树上包括至少一个节点，该至少一个节点在渲染树上的连接关系，构成页面的页面结构，换而言之，该页面结构可以指示待渲染的页面中包括的至少一个节点。

在步骤303中，电子设备通过本地层，根据页面结构确定至少一个节点的渲染信息，基于至少一个节点的渲染信息，对页面进行渲染。

在本公开实施例中，本步骤可以通过以下子步骤3031至子步骤3034来实现。

在子步骤3031中，由于页面结构中包括至少一个节点，对于其中的任一节点，电子设备可以通过本地层获取该节点包括的样式标识。

其中，节点的样式标识包括在该节点的属性中，电子设备可以通过本地层对节点进行解析，得到该节点包括的至少一个属性，获取该至少一个属性中样式标识属性的参数值，得到样式标识。

例如，开发人员在进行开发时，可以在节点的属性中添加样式标识属性，如<divclass＝"a",value＝"3",styleobjectID＝"1"></div>，则电子设备通过本地层对该节点进行解析后，确定该节点的属性中包括calss(类)、value(值)以及styleobjectID，其中styleobjectID即为样式标识属性，则该节点对应的样式标识为1。

在子步骤3032中，电子设备可以通过本地层从用于存储样式的样式文件中，获取与该样式标识对应的样式。

样式文件中可以包括多种开发人员定义的样式，该样式文件可以为JSON(JavaScript Object Notation,JavaScript对象简谱)格式的文件。该样式文件包括在上述页面信息中。

例如，该JSON文件中可以以list的形式存储多个样式，{list：[{styleobjectID:1,rules:{".a":{color:#ff0000},".b":{color:#ffff00}}},{styleobjectID:2,rules:{".c":{color:#f0f000},".d":{color:#ff00ff}}}]…}。电子设备通过本地层在该JSON文件中查找styleobjectID为1的样式。

在子步骤3033中，电子设备通过本地层，根据该样式和上述页面结构，确定该节点的渲染信息。

电子设备在获取到该节点的样式后，可以根据上述页面结构中各节点的关联关系，确定与该节点相关的节点，从而确定该节点的渲染信息。相应的，本步骤可以为，电子设备通过本地层，根据上述页面结构，获取与该节点相关的至少一个其他节点。然后，电子设备通过本地层，根据该至少一个其他节点的渲染信息和该节点的样式，确定该节点的渲染信息。该渲染信息由本地层根据至少一个其他节点的渲染信息和该节点的样式计算得到，包括该节点在页面中的位置、大小和颜色等。

例如，以该节点为文本框对象对应的节点为例，电子设备通过本地层获取到该节点对应的样式为{color:red,height:200px,width:1200px}，即该节点为高200像素，宽1200像素，颜色为红色的文本框。电子设备通过本地层根据与该节点相关的，即渲染顺序在该节点之前的至少一个节点的渲染信息，确定该文本框的在页面中的位置，包括该文本框的起始位置和结束位置、文本框的大小以及颜色。

在子步骤3034中，电子设备通过本地层，基于至少一个节点的渲染信息，对页面进行渲染。

电子设备在通过本地层确定每个节点的渲染信息后，可以根据各节点的渲染顺序，依次将各节点渲染在页面上，从而实现页面的渲染。

例如，参见图4所示，图4是本公开实施例提供的一种页面的示意图，在图4中待渲染的页面中包括一个文本框，一个账号输入框、一个密码输入框以及一个提交按钮，则该页面的页面结构包括4个节点，其中，节点1对应文本框，节点2对应账号输入框，节点3对应密码输入框，节点4对应提交按钮。上述4个节点的渲染顺序为节点1、节点2、节点3最后是节点4。电子设备通过本地层，基于上述4个节点的渲染信息，依次对这4个节点进行渲染，得到图4所示的页面。

在步骤304中，电子设备通过本地层，将渲染得到的页面发送给WEB层。

在本公开实施例中，电子设备在通过本地层渲染得到页面后，可以向WEB层发送显示请求，该显示请求中携带有该页面。电子设备可以执行步骤305.

在步骤305中，电子设备通过WEB层，对页面进行显示。

在本公开实施例中，电子设备可以通过WEB层，将本地层渲染得到的页面显示在电子设备的屏幕上。

需要说明的是，电子设备在通过WEB层在对页面进行显示后，还可以确定与该页面具有关联关系的至少一个相关页面，通过本地层提前渲染该至少一个相关页面，该至少一个相关页面为用户下一步可能访问的页面。

相应的，电子设备缓存至少一个相关页面的步骤可以为：电子设备可以通过WEB层将当前显示的页面的页面标识发送给服务器，接收服务器返回的至少一个相关页面的页面信息，电子设备通过WEB层将该至少一个相关页面的页面信息发送给本地层，通过本地层接收该至少一个页面信息，基于该至少一个页面信息渲染得到至少一个相关页面。渲染过程可以参见步骤302至步骤303，在此不再赘述。电子设备通过本地层，将至少一个相关页面发送给WEB层。电子设备通过WEB层接收该至少一个相关页面，缓存该至少一个相关页面。电子设备检测到用户的跳转操作时，确定该跳转操作对应的相关页面的页面标识，从上述至少一个相关页面中获取该页面标识对应的相关页面，对该相关页面进行显示。其中，上述至少一个相关页面可以由服务器基于对用户行为的大数据分析来确定。

例如，以第二应用程序为资讯类应用程序为例，当用户启动该资讯类应用程序时，电子设备通过本地层渲染该资讯类应用程序的主页面，通过WEB层对该主页面进行显示。然后，电子设备通过WEB层接收服务器基于大数据分析得到的至少一个页面的页面信息，该至少一个页面是用户可能访问的页面。电子设备通过WEB层和本地层提前加载该至少一个页面。

需要说明的是，上述步骤301至步骤305是以渲染快应用的程序页面为例进行描述的示例性实施例，本公开提供的页面渲染方法还可以用于其他应用程序的程序页面的渲染，本公开实施例对此不进行限制。

在本公开实施例中，由于WEB层相对于本地层来说运算能力有限，且本地层的运算能力可以随着电子设备的提升而提升，使得通过WEB层将页面信息发送给本地层，由本地层基于该页面信息实现对页面的渲染，即可在较短的时间内完成页面的渲染，从而缩短页面渲染花费的时间。特别是在页面上包括较多的节点时，通过本地层进行页面渲染相对于WEB层能够显著节约时间。

上述所有可能的技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

本公开实施例中涉及的快应用是一种基于电子设备的硬件平台的新型应用形态，能够基于操作系统提供的原生API(Application Programming Interface，应用程序编程接口)运行。

快应用采用统一的标准进行开发，原生渲染，无需安装，即点即用，又兼具原生应用体验(性能、系统整合、交互等)。快应用的框架可以深度集成于操作系统中，能够在操作系统层面进行操作，实现与其他应用服务之间的无缝衔接。开发者可以做到一次性开发即可在不同类型的电子设备上运行。快应用在诞生之初就在开发规范、能力接入、开发者服务等层面实现了电子设备厂商间的标准化统一，极大地降低开发者的适配成本。

与传统应用相比，快应用具备如下特点：

Instant(即时)：即点即用，用户无需等待；

Everywhere(随处可见)：与电子设备的使用场景深度整合，入口无处不在，如搜索引擎、智能助手、智能推荐、应用市场、浏览器等；

Efficient(高效)：准前端的开发方式，效率高。

图5是本公开实施例提供的快应用框架500的框图，该快应用框架包括：场景入口520、快应用引擎540和操作系统(Operating System，OS)基础设施及硬件560。

场景入口520包括负一屏、全局搜索、锁屏、桌面、应用市场、浏览器和二维码中的至少一种。场景入口520的外在展现形式可以为页面形式和卡片形式。

快应用引擎540包括前端框架541、通用场景542、轻量化场景543、嵌入式SDK(Software Development Kit，软件开发工具包)544和业务接入545。

其中，前端框架541包括MVVM(Model-View-View-Model，模型-视图-视图-模型)、V-DOM(Virtual-Document Object Model，虚拟文档对象模型)、路由、基础API(Application Programming Interface，应用程序编程接口)、业务API、UI(UserInterface，用户界面)组件、路由等；

通用场景542和轻量化场景543包括JavaScript(一种编程语言)引擎、标准渲染引擎、极速渲染引擎、端-云-芯加速、安全机制、新兴场景如AI(Artificial Intelligence，人工智能)、AR(Augmented Reality，增强现实)等、系统整合(应用管理、权限管理等)；

业务接入545包括推送、账号/支付等。

OS基础设施及硬件560包括：图形库、原生控件、系统服务和GPU(GraphicsProcessing Unit，图形处理器)/NPU(Neural-network Processing Unit，嵌入式神经网络处理器)等。

从执行路径层面，有标准的HTML(Hyper Text Markup Language，超文本标记语言)5方式支撑通用的Web(World Wide Web，万维网)场景，以及JS(JavaScript，一种编程语言)与Native(原生)相结合的方式，支撑更轻量、更快速的体验。

下面将按3个方面简要介绍快应用引擎的架构。

1)应用开发：

快应用的前端设计借鉴并整合了主流前端框架的设计思路：以组件化的方式构建应用，以数据绑定为核心的MVVM设计模式，以V-DOM的方式提升性能，同时选择了简洁清晰的类Vue(虚拟机脱壳引擎)的模板。同时对布局方面做了相应精简。从新的应用形态、映射原生UI、能力开放的角度，需要定义一套组件与API规范，方便开发这种快速开发应用。

2)系统整合：

快应用作为完整的应用形态，可以与系统深入整合，如同原生应用一样运行，以及与系统交互。快应用目前有两种形态：全屏方式的独立应用形态与嵌入方式的卡片形态。在独立应用形态下，给用户的体验就像原生的应用程序，有完整的生命周期管理，页面管理，路由等。快应用可以寄生于安卓的Activity(行为)，页面寄生于Fragment(碎片)，并通过独立的后台Service(服务)进行实例的管控。卡片形态则是另外一种形态，通过嵌入式SDK(Software Development Kit，软件开发工具包)作为一个独立的局部控件嵌入到系统的各个角落，轻量化的展现动态内容。在安全隔离方面，可通过沙盒机制，进程隔离，权限控制，并结合操作系统层的支持做到较好的安全保障。

3)性能体验及新兴场景，如JavaScript引擎、渲染引擎、端-云-芯加速、新兴场景等：

在交互体验、资源开销和稳定性等方面，快应用通过引入原生渲染路径，进而实现前端开发方式与原生渲染及平台能力的有效组合。

不同于其它的应用层的跨平台框架，快应用植根于电子设备的操作系统，可实现从芯片、操作系统与云的深度整合。利用端和云的结合以启动性能加速为例，通过云和端的协同渲染，网络链路层的优化可以大大加速快应用启动速度。同时可以整合硬件平台的特有能力，进一步提升体验。例如可以结合电子设备AI芯片，将NPU(Neural-networkProcessing Unit，网络处理器)的算力整合到快应用引擎中来，使得AI场景(人脸识别、图像超分等)在端侧可以低延时、高性能的执行，同时又有效保护了用户的隐私，并节省带宽。

图6是本公开实施例提供的快应用的启动流程图，包括：

1)首次启动时，用户点击触发下载快应用的程序包，同时进行快应用引擎的初始化相关工作。当整个快应用的程序包下载与校验完成后，需要展示的第一个页面的JavaScript文件才会被加载并开始渲染。

2)页面渲染包括JavaScript加载、页面与JavaScript框架逻辑的执行、布局的运算，最终到原生UI控件的绘制。其中，页面内逻辑执行时会有一次或多次的网络请求，网络请求返还的数据驱动页面的再次渲染，直至首屏页面的内容完全展示。

这里的网络请求、JavaScript执行、排版与绘制并非简单的串行关系，而是并行化地交织在一起，影响着整个页面的渲染性能，并与页面设计的逻辑、网络状况与设备运行的状态强相关。

由于快应用的特殊性，快应用被期待完成更多的任务，实现更多的功能。目前，快应用的功能正在逐步完善中，本公开实施例就是提供了一种快应用的新功能，利用该新功能实现页面渲染，扩展了快应用的功能，提高了快应用渲染页面的速度。

图7是本公开实施例提供的一种页面渲染装置的框图。参见图7，该装置包括：发送模块701、接收模块702和渲染模块703。

发送模块701，被配置为通过万维网WEB层获取页面信息，将页面信息发送给系统原生的本地层；

接收模块702，被配置为通过本地层接收页面信息，根据页面信息确定页面结构，页面结构用于指示待渲染的页面中包括的至少一个节点；

渲染模块703，被配置为通过本地层，根据页面结构确定至少一个节点的渲染信息，基于至少一个节点的渲染信息，对页面进行渲染。

在一种可能的实现方式中，页面信息包括页面的布局信息和样式信息；接收模块702，还被配置为对布局信息进行解析，得到页面的布局结构；对样式信息进行解析，得到页面的样式结构；将布局结构和样式结构进行融合，得到页面的页面结构。

在另一种可能的实现方式中，渲染模块703，还被配置为对于至少一个节点中的任一节点，获取节点包括的样式标识；从用于存储样式的样式文件中，获取与样式标识对应的样式；根据样式和页面结构，确定节点的渲染信息。

在另一种可能的实现方式中，渲染模块703，还被配置为对节点进行解析，得到节点包括的至少一个属性；获取至少一个属性中样式标识属性的参数值，得到样式标识。

在另一种可能的实现方式中，渲染模块703，还被配置为根据页面结构，获取与节点相关的至少一个其他节点；根据至少一个其他节点的渲染信息和样式，确定节点的渲染信息。

在另一种可能的实现方式中，装置还包括：

确定模块，还被配置为通过本地层，将渲染得到的页面发送给WEB层；

显示模块，被配置为通过WEB层，对页面进行显示。

在本公开实施例中，由于WEB层相对于本地层来说运算能力有限，且本地层的运算能力可以随着电子设备的提升而提升，使得通过WEB层将页面信息发送给本地层，由本地层基于该页面信息实现对页面的渲染，即可在较短的时间内完成页面的渲染，从而缩短页面渲染花费的时间。特别是在页面上包括较多的节点时，通过本地层进行页面渲染相对于WEB层能够显著节约时间。

图8是是本公开实施例提供的一种电子设备800的结构框图。例如，电子设备800可以是移动电话，计算机，数字广播电子设备，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图8，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述页面渲染方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在电子设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当电子设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到电子设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。

在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述页面渲染方法。

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

本公开还提供了一种计算机程序产品，所述计算机程序产品包括一个或多个计算机程序，所述计算机程序被处理器执行时，用于实现上述各个方法实施例提供的页面渲染方法。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本公开的可选实施例，并不用以限制本公开，凡在本公开的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。

Claims (14)

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

通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述页面信息包括所述页面的布局信息和样式信息；所述根据所述页面信息确定页面结构，包括：

对所述布局信息进行解析，得到所述页面的布局结构；

对所述样式信息进行解析，得到所述页面的样式结构；

将所述布局结构和样式结构进行融合，得到所述页面的页面结构。

3.根据权利要求1所述的方法，其特征在于，所述根据所述页面结构确定所述至少一个节点的渲染信息，包括：

对于所述至少一个节点中的任一节点，获取所述节点包括的样式标识；

从用于存储样式的样式文件中，获取与所述样式标识对应的样式；

根据所述样式和所述页面结构，确定所述节点的渲染信息。

4.根据权利要求3所述的方法，其特征在于，所述获取所述节点包括的样式标识，包括：

对所述节点进行解析，得到所述节点包括的至少一个属性；

获取所述至少一个属性中样式标识属性的参数值，得到所述样式标识。

5.根据所述权利要求3所述的方法，其特征在于，所述根据所述样式和所述页面结构，确定所述节点的渲染信息，包括：

根据所述页面结构，获取与所述节点相关的至少一个其他节点；

根据所述至少一个其他节点的渲染信息和所述样式，确定所述节点的渲染信息。

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

通过所述本地层，将渲染得到的页面发送给所述WEB层；

通过所述WEB层，对所述页面进行显示。

7.一种页面渲染装置，其特征在于，所述装置包括：

发送模块，被配置为通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

接收模块，被配置为通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

渲染模块，被配置为通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

8.根据权利要求7所述的装置，其特征在于，所述页面信息包括所述页面的布局信息和样式信息；所述接收模块，还被配置为对所述布局信息进行解析，得到所述页面的布局结构；对所述样式信息进行解析，得到所述页面的样式结构；将所述布局结构和样式结构进行融合，得到所述页面的页面结构。

9.根据权利要求7所述的装置，其特征在于，所述渲染模块，还被配置为对于所述至少一个节点中的任一节点，获取所述节点包括的样式标识；从用于存储样式的样式文件中，获取与所述样式标识对应的样式；根据所述样式和所述页面结构，确定所述节点的渲染信息。

10.根据权利要求9所述的装置，其特征在于，所述渲染模块，还被配置为对所述节点进行解析，得到所述节点包括的至少一个属性；获取所述至少一个属性中样式标识属性的参数值，得到所述样式标识。

11.根据所述权利要求9所述的装置，其特征在于，所述渲染模块，还被配置为根据所述页面结构，获取与所述节点相关的至少一个其他节点；根据所述至少一个其他节点的渲染信息和所述样式，确定所述节点的渲染信息。

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

确定模块，还被配置为通过所述本地层，将渲染得到的页面发送给所述WEB层；

显示模块，被配置为通过所述WEB层，对所述页面进行显示。

13.一种电子设备，其特征在于，所述电子设备包括一个或多个处理器；

用于存储所述一个或多个处理器可执行指令的易失性或非易失性存储器；

其中，所述一个或多个处理器被配置为：

通过万维网WEB层获取页面信息，将所述页面信息发送给系统原生的本地层；

通过所述本地层接收所述页面信息，根据所述页面信息确定页面结构，所述页面结构用于指示待渲染的页面中包括的至少一个节点；

通过所述本地层，根据所述页面结构确定所述至少一个节点的渲染信息，基于所述至少一个节点的渲染信息，对所述页面进行渲染。

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

Images