CN113297522A - 一种页面渲染方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

本申请公开了一种页面渲染方法、装置、电子设备及存储介质，本申请提供的页面渲染方法，通过客户端加载页面数据，页面数据包括网页原生组件数据以及混合组件协议，网页原生组件数据包括原生网页标签，混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置；对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置，两次渲染得到显示页面。本申请的页面渲染方法生成的页面中既包括原有网页页面的组件，也包括客户端原生组件，既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。

Description

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

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面渲染方法、装置、电子设备及可读存储介质。

背景技术

随着手机、电脑、平板电脑和智能手表等终端越来越深入人们的生活，用户需要通过终端上的显示页面进行查看和操作，如何更好的进行页面渲染也就变得尤为重要。

目前客户端渲染页面技术有客户端Native技术、WEB技术与JS Bridge以及ReactNative/Weex混合技术。但上述技术要么无法给用户提供类似Native的用户体验，要么每次对APP进行更新都需要发版，不够灵活，加大了开发者对应用程序的开发难度，也大大限制了开发者的开发效率。

因此，如何保证类似Native的用户体验的同时，提高开发效率非常关键。

发明内容

本申请主要解决的技术问题是提供一种页面渲染方法、装置、电子设备及可读存储介质，以保证类似Native的用户体验的同时，提高开发者的开发效率。

为了解决上述问题，本申请第一方面提供了一种页面渲染方法，所述方法包括：客户端加载页面数据，其中，所述页面数据包括网页原生组件数据以及混合组件协议；其中，所述网页原生组件数据包括原生网页标签；所述混合组件协议包括需要通过客户端渲染的特征网页标签以及所述特征网页标签的位置；对所述原生网页标签进行渲染，得到原生网页界面；以及基于所述混合组件协议，获取到所述特征网页标签，并通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的位置。。

为了解决上述问题，本申请第二方面提供了一种页面渲染的装置，包括：加载模块，用于客户端加载页面数据，其中，所述页面数据包括网页原生组件数据以及混合组件协议；其中，所述网页原生组件数据包括原生网页标签；所述混合组件协议包括需要通过客户端渲染的特征网页标签以及所述特征网页标签的位置；渲染模块，对所述原生网页标签进行渲染，得到原生网页界面；以及基于所述混合组件协议，获取到所述特征网页标签，并通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的位置。

为了解决上述问题，本申请第三方面提供了一种电子设备，包括相互耦接的存储器和处理器，所述处理器用于执行所述存储器中存储的程序指令，以实现上述第一方面的页面渲染方法。

为了解决上述问题，本申请第四方面提供了一种计算机可读存储介质，其上存储有程序指令，所述程序指令被处理器执行时实现上述第一方面的页面渲染方法。

本申请的有益效果是：区别于现有技术的情况，本申请提供的页面渲染方法，通过客户端加载页面数据，页面数据包括网页原生组件数据以及混合组件协议，而其中的网页原生组件数据包括原生网页标签，混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置；对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置，从而实现通过原生网页渲染和客户端原生渲染页面渲染两次渲染得到显示页面。本申请的页面渲染方法生成的页面中既包括原有网页页面的组件，也包括客户端原生组件，既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。

附图说明

图1是本申请提供的页面渲染一实施例的流程示意图；

图2是本申请提供的页面渲染另一实施例的流程示意图；

图3是本申请提供的页面渲染一具体实施例的流程示意图；

图4是本申请提供的页面渲染的装置一实施例的框架示意图；

图5是本申请电子设备一实施例的框架示意图；

图6是本申请计算机可读存储介质一实施例的框架示意图。

具体实施方式

下面结合说明书附图，对本申请实施例的方案进行详细说明。

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、接口、技术之类的具体细节，以便透彻理解本申请。

本文中术语“系统”和“网络”在本文中常被可互换使用。本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。此外，本文中的“多”表示两个或者多于两个。

本申请中，终端(Terminal)是指那些与集中式主机系统相连的“哑”用户设备。终端从用户接收键盘输入，并且将这些输入发送给主机系统。主机系统处理这个用户的键盘输入和命令，然后输出返回并显示在这个终端的屏幕上。个人计算机可以运行称为终端仿真器的一些程序来模仿一个哑终端的工作。

客户端(Client)也称为用户端，与服务器相对应，为客户提供本地服务的程序。除了一些只在本地运行的应用程序之外，一般安装在普通的客户机上，需要与服务端互相配合运行。因特网发展以后，较常用的用户端包括了如万维网使用的网页浏览器，收寄电子邮件时的电子邮件客户端，以及即时通讯的客户端软件等。对于这一类应用程序，需要网络中有相应的服务器和服务程序来提供相应的服务，如数据库服务，电子邮件服务等等，这样在客户机和服务器端，需要建立特定的通信连接，来保证应用程序的正常运行。

请参阅图1，图1是本申请提供的页面渲染一实施例的流程示意图。具体而言，可以包括如下步骤：

步骤S11：客户端加载页面数据，其中，页面数据包括网页原生组件数据以及混合组件协议；其中，网页原生组件数据包括原生网页标签；混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置。

其中，混合组件协议是网页开发者与客户端开发者预先共同制定的，浏览器内核和客户端均会遵守此混合组件协议。具体的，混合组件协议可以嵌入在网页原生组件数据中。而需要通过客户端渲染的特征网页标签则为需要利用客户端渲染的组件对应的网页标签。其中，需要利用客户端渲染的组件则可以根据实际开发需求或者页面显示需求，比如消耗性能比较大的组件可以作为需要利用客户端渲染的组件。

客户端加载包括页原生组件数据以及混合组件协议的页面数据后，进行步骤S12。

步骤S12：对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置。

上一步骤中，客户端基于已加载的包括原生网页标签的网页原生组件数据，以及包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置的混合组件协议，进行两次渲染，分别为对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议通过客户端对特征网页标签进行渲染，从而得到完整的网页页面。

在一个具体实施例中，对原生网页标签进行渲染和基于混合组件协议通过客户端对特征网页标签进行渲染这两次渲染可以同时进行，按照标签对应的位置进行渲染和显示。

在另一具体实施例中，对原生网页标签进行渲染和基于混合组件协议通过客户端对特征网页标签进行渲染这两次渲染可以按照先后次序进行。比如首先进行原生网页标签渲染，在对应位置生成原生网页界面以及原有的网页页面组件。然后基于混合组件协议通过客户端对特征网页标签进行渲染，并渲染显示到原生网页界面中特征网页标签对应的位置。

在本步骤中，对原生网页标签进行渲染，得到原生网页界面的步骤，具体可以包括浏览器内核解析原生网页标签，并对原生网页标签进行渲染。比如浏览器内核处理原生网页标签得到文档对象化模型树(DOM树)，然后基于DOM树，得到原生网页界面。

本实施提供的页面渲染方法，通过客户端加载页面数据，页面数据包括网页原生组件数据以及混合组件协议，而其中的网页原生组件数据包括原生网页标签，混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置；对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置，从而实现通过原生网页渲染和客户端原生渲染页面渲染两次渲染得到显示页面。本申请的页面渲染方法生成的页面中既包括原有网页页面的组件，也包括客户端原生组件，既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。

请参阅图2，图2是本申请提供的页面渲染另一实施例的流程示意图。具体而言，可以包括如下步骤：

步骤S21：客户端加载页面数据，其中，页面数据包括网页原生组件数据以及混合组件协议；其中，网页原生组件数据包括原生网页标签；混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置。

此步骤与步骤S11步骤相同，具体请参阅步骤S11的相关文字描述，在此不再赘述。

步骤S22：对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的预设层的对应位置。

本步骤中，原生网页标签渲染得到的原生网页界面和相应的组件具有一定的层级，特征网页标签对应的组件也具有对应的层级，即预设层，层级设置可以提高两次渲染后页面的显示效果，避免组件之间相互覆盖遮挡。可以理解的是，网页标签对应的预设层可以与原生网页标签对应的层级相同，也可以不同，具体可以根据需要显示的效果进行相应的设置。

具体地，通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的预设层的对应位置的步骤包括：利用客户端的浏览器内核解析出特征网页标签与原生网页标签的层级关系，也即特征网页标签对应的组件与原生网页标签对应组件的层级关系。层级关系可以为同层级，也可以不同层级。然后基于层级关系将特征网页标签渲染到原生网页界面中特征网页标签对应的预设层的对应位置，从而避免两次渲染的显示区域和组件互相遮挡覆盖。

本实施提供的页面渲染方法，分别进行原生网页标签渲染以及基于混合组件协议通过客户端对特征网页标签进行渲染，从而生成原生网页界面和原有网页页面的组件以及客户端原生组件，并通过层级关系的设置，避免了网页界面中各组件之间相互覆盖的问题，实现更好的页面显示效果。且既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。应用程序APP中在需要对原生网页对应的组件进行修改和更新时，可以不需要进行应用程序APP发版，大大减小了开发难度和缩短开发应用程序APP以及跟新的周期，提高开发效率。

进一步地，原生网页标签可以为HTML标签。参阅图3，图3是本申请提供的页面渲染一具体实施例的流程示意图。

步骤S31：客户端加载页面数据，其中，页面数据包括网页原生组件数据以及混合组件协议；其中，网页原生组件数据包括HTML标签；混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置。

此步骤中，网页原生组件数据包括HTML标签，HTML标签为超文本标记语言标记标签，HTML标签是HTML语言中最基本的单位。混合组件协议为网页开发者与客户端开发者共同制定，浏览器内核和客户端均会遵守此混合组件协议。

步骤S32：对HTML标签进行渲染，并执行网页原生组件数据中的CSS样式文件和JS脚本文件，生成原生网页界面；其中，原生网页界面中特征网页标签对应的位置为空白。

在页面开发时，使用的是网络web技术，即HTML+JS+CSS，其中HTML定义了网页内容的含义和结构；JS定义了网页的表现与展示效果；CSS定义了网页的功能与行为。

在此步骤中，对HTML标签进行渲染，同时结合CSS样式文件和JS脚本文件，生成了原生网页界面。而对于特征网页标签对应的位置，由于特征网页标签浏览器无法解析其内容，则无法进行渲染，因此其对应位置为空白。

步骤S33：通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的空白位置。

通过客户端将特征网页标签解析并渲染到网页界面中对应的空白位置，实现了网页界面的完整显示。

在一个具体实施例中，加载的页面数据中包括如下代码：

<html>

<video></video>

<abcd></abcd>

</html>

其中的“video”标签能够被浏览器解析，并进行渲染，在页面上显示一个视频的组件。而其中的“abcd”标签为自定义的、非标准的标签，浏览器无法识别和解析此自定义标签的内容，因此在页面中的对应位置处则为空白。然后，客户端根据混合组件协议将“abcd”标签进行解析并渲染到页面中“abcd”标签对应位置的空白处，从而实现整个页面的显示。

本实施提供的页面渲染方法，分别进行原生网页HTML标签渲染以及基于混合组件协议通过客户端对特征网页标签进行渲染，从而生成原生网页界面和原有网页页面的组件以及客户端原生组件，实现更好的页面显示效果。且既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。应用程序APP中在需要对原生网页对应的组件进行修改和更新时，可以不需要进行应用程序APP发版，大大减小了开发难度和缩短开发应用程序APP以及跟新的周期，提高开发效率。

请参阅图4，图4是本申请提供的页面渲染的装置一实施例的框架示意图。页面渲染的装置40包括：加载模块41，用于客户端加载页面数据，其中，页面数据包括网页原生组件数据以及混合组件协议；其中，网页原生组件数据包括原生网页标签；混合组件协议包括需要通过客户端渲染的特征网页标签以及特征网页标签的位置；渲染模块42，用于对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置。

上述方案，加载模块41加载页面数据后，渲染模块42对原生网页标签进行渲染，得到原生网页界面；以及基于混合组件协议，获取到特征网页标签，并通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的位置，从而实现分别进行原生网页HTML标签渲染以及基于混合组件协议通过客户端对特征网页标签进行渲染，生成原生网页界面和原有网页页面的组件以及客户端原生组件，实现更好的页面显示效果。且既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。应用程序APP中在需要对原生网页对应的组件进行修改和更新时，可以不需要进行应用程序APP发版，大大减小了开发难度和缩短开发应用程序APP以及跟新的周期，提高开发效率。

在其他实施例中，渲染模块42还可以用于通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的预设层的对应位置。进一步地，渲染模块42用于利用客户端的浏览器内核解析出特征网页标签与原生网页标签的层级关系；基于层级关系将特征网页标签渲染到原生网页界面中特征网页标签对应的预设层的对应位置。

进一步的，渲染模块42还可以用于解析原生网页标签，并对原生网页标签进行渲染。具体的，渲染模块42用于处理原生网页标签得到文档对象化模型树，并基于文档对象化模型树，得到原生网页界面。

在原生网页标签为HTML标签时，渲染模块42还可以用于对HTML标签进行渲染，并执行网页原生组件数据中的CSS样式文件和JS脚本文件，生成原生网页界面；其中，原生网页界面中特征网页标签对应的位置为空白；以及通过客户端将特征网页标签渲染到原生网页界面中特征网页标签对应的空白位置。

请参阅图5，图5是本申请电子设备一实施例的框架示意图。电子设备50包括相互耦接的存储器51和处理器52，处理器52用于执行存储器51中存储的程序指令，以实现上述任一页面渲染方法实施例的步骤。在一个具体的实施场景中，电子设备50可以包括但不限于：微型计算机、服务器。

具体而言，处理器52用于控制其自身以及存储器51以实现上述任一图数据划分方法实施例的步骤。处理器52还可以称为CPU(Central Processing Unit，中央处理单元)。处理器52可能是一种集成电路芯片，具有信号的处理能力。处理器52还可以是通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application SpecificIntegrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。另外，处理器52可以由集成电路芯片共同实现。

上述方案，处理器52加载页面数据后进行原生网页标签渲染以及基于混合组件协议通过客户端对特征网页标签进行渲染，从而生成原生网页界面和原有网页页面的组件以及客户端原生组件，并通过层级关系的设置，避免了网页界面中各组件之间相互覆盖的问题，实现更好的页面显示效果。且既能保证开发的高效性，又能保证页面能够提供类似Native的用户体验。应用程序APP中在需要对原生网页对应的组件进行修改和更新时，可以不需要进行应用程序APP发版，大大减小了开发难度和缩短开发应用程序APP以及跟新的周期，提高开发效率。

请参阅图6，图6是本申请计算机可读存储介质一实施例的框架示意图。计算机可读存储介质60存储有能够被处理器运行的程序指令600，程序指令600用于实现上述任一页面渲染方法实施例的步骤。

在本申请所提供的几个实施例中，应该理解到，所揭露的方法、装置，可以通过其它的方式实现。例如，以上所描述的装置实施方式仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性、机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施方式方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

Claims (10)

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

客户端加载页面数据，其中，所述页面数据包括网页原生组件数据以及混合组件协议；其中，所述网页原生组件数据包括原生网页标签；所述混合组件协议包括需要通过客户端渲染的特征网页标签以及所述特征网页标签的位置；

对所述原生网页标签进行渲染，得到原生网页界面；以及

基于所述混合组件协议，获取到所述特征网页标签，并通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的位置。

2.根据权利要求1所述的页面渲染方法，其特征在于，所述通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的位置的步骤，包括：

通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的预设层的对应位置。

3.根据权利要求2所述的页面渲染方法，其特征在于，所述通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的预设层的对应位置的步骤，包括：

利用所述客户端的浏览器内核解析出所述特征网页标签与所述原生网页标签的层级关系；

基于所述层级关系将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的预设层的对应位置。

4.根据权利要求1所述的页面渲染方法，其特征在于，所述原生网页标签为HTML标签；

所述对所述原生网页标签进行渲染，得到原生网页界面的步骤，包括：

对所述HTML标签进行渲染，并执行所述网页原生组件数据中的CSS样式文件和JS脚本文件，生成所述原生网页界面；其中，所述原生网页界面中所述特征网页标签对应的位置为空白；

所述通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的预设层的对应位置的步骤，包括：

通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的空白位置。

5.根据权利要求1所述的页面渲染方法，其特征在于，所述对所述原生网页标签进行渲染，得到原生网页界面的步骤，包括：

所述浏览器内核解析所述原生网页标签，并对所述原生网页标签进行渲染。

6.根据权利要求5所述的页面渲染方法，其特征在于，所述所述浏览器内核解析所述原生网页标签，并对所述原生网页标签进行渲染的步骤包括：

所述浏览器内核处理所述原生网页标签得到文档对象化模型树；

基于所述文档对象化模型树，得到所述原生网页界面。

7.根据权利要求1所述的页面渲染方法，其特征在于，所述混合组件协议嵌入在所述网页原生组件数据中。

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

加载模块，用于客户端加载页面数据，其中，所述页面数据包括网页原生组件数据以及混合组件协议；其中，所述网页原生组件数据包括原生网页标签；所述混合组件协议包括需要通过客户端渲染的特征网页标签以及所述特征网页标签的位置；

渲染模块，用于对所述原生网页标签进行渲染，得到原生网页界面；以及

基于所述混合组件协议，获取到所述特征网页标签，并通过所述客户端将所述特征网页标签渲染到所述原生网页界面中所述特征网页标签对应的位置。

9.一种电子设备，其特征在于，包括相互耦接的存储器和处理器，所述处理器用于执行所述存储器中存储的程序指令，以实现权利要求1至7任一项所述的页面渲染方法。

10.一种计算机可读存储介质，其上存储有程序指令，其特征在于，所述程序指令被处理器执行时实现权利要求1至7任一项所述的页面渲染方法。

Images