CN109101300B - 一种页面渲染方法、装置及终端 - Google Patents

Abstract

本发明提供了一种页面渲染方法、装置及终端，所述方法包括获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；根据所述模板文件和目标数据填充文件生成页面描述文件；基于所述页面描述文件渲染页面。本发明通过使用模板文件和目标数据填充文件描述页面元素，从而完成产品页面的在线热更新，满足了动态性的要求。通过自定义页面布局，再使用多进程渲染页面元素，脱离了现有技术中渲染只能够均集中在主线程的限制，提升了渲染效率。通过建立复用池，实现界面元素的回收和复用，从而进一步提升渲染速度。

Description

一种页面渲染方法、装置及终端

技术领域

本发明涉及计算机领域，尤其涉及一种页面渲染方法、装置及终端。

背景技术

现有技术中通常使用Storyboard、ReactNative和ComponentKit等工具进行页面渲染，下面分别进行介绍：

Storyboard是苹果公司研发的IDE工具Xcode中集成的功能，是可视化的界面编辑工具，同时底层使用XML描述。具有所见即所得的优点，缺点是动态性和渲染性能比较差。

ReactNative是Facebook主导的开源组件，优点是跨平台、动态性比较强、界面的表达能力也比较强，缺点是渲染性能比较差。

ComponentKit也是Facebook主导的开源组件，是一个基于描述的界面排版渲染组件，渲染性能较好，缺点则是动态性比较差，开发效率也比较低。

可见，现有技术中缺乏能够同时满足动态性、渲染性能和开发效率三方面要求的用于进行页面渲染的技术方案。

发明内容

为了解决上述技术问题，本发明提出了一种页面渲染方法、装置及终端。本发明具体是以如下技术方案实现的：

第一方面，一种页面渲染方法，包括：

获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

根据所述模板文件和目标数据填充文件生成页面描述文件；

基于所述页面描述文件渲染页面。

第二方面，一种页面渲染装置，包括：

文件获取模块，用于获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

页面描述文件生成模块，用于根据所述模板文件和目标数据填充文件生成页面描述文件；

渲染模块，用于基于所述页面描述文件渲染页面。

第三方面，一种计算机可读存储介质，用于存储程序，所述程序用于实现所述页面渲染方法。

第四方面，一种终端，所述终端用于运行所述页面渲染装置。

本发明提供了一种页面渲染方法、装置及终端，具备下述有益效果：

本发明通过使用模板文件和目标数据填充文件描述页面元素，从而完成产品页面的在线热更新，满足了动态性的要求。通过自定义页面布局，再使用多进程渲染页面元素，脱离了现有技术中渲染只能够均集中在主线程的限制，提升了渲染效率。通过建立复用池，实现界面元素的回收和复用，从而进一步提升渲染速度。本发明只通过修改模板文件和目标数据填充文件即可实现新的页面的研发，显然具备较好的开发效率。

附图说明

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

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

图2是本发明实施例提供的JSON模板文件示意图；

图3是本发明实施例提供的目标数据填充文件示意图；

图4是本发明实施例提供的页面描述文件示意图；

图5是本发明实施例提供的一种基于多线程的页面渲染方法流程图；

图6是本发明实施例提供的虚拟界面示意图；

图7是本发明实施例提供的真实界面示意图；

图8是本发明实施例提供的页面渲染逻辑示意图；

图9是本发明实施例提供的视图树示意图；

图10是本发明实施例提供的第一幅渲染页面示意图；

图11是本发明实施例提供的第二幅渲染页面示意图；

图12是本发明实施例提供的第三幅渲染页面示意图；

图13是本发明实施例提供的一种页面渲染装置框图；

图14是本发明实施例提供的渲染模块框图；

图15是本发明实施例提供的终端示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在进行页面渲染时，可以从动态性、渲染性能和开发效率三方面对现有技术中的页面渲染方案进行评价。其中，动态性是指能够通过后台下发，动态执行的特性，这种特性能够降低终端发布版本的人力成本和时间成本，用户也可以很快获取到最新的版本的服务，是移动互联网时代比较重要的特性；渲染性能是指在界面的渲染流程中，能够实现界面快速渲染，提升界面流畅度从而提升用户体验的能力；开发效率是指开发速度，只有开发效率高才能应对日新月异的需求。

为了能够同时满足动态性、渲染性能和开发效率三方面的要求，本发明实施例提供一种页面渲染方法，如图1所示，包括：

S101.获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容。

具体地，模板文件和数据填充文件均可以有一个或多个。一个模板文件可以对应一个或多个数据填充文件。与模板文件对应的数据填充文件也可以被称为目标数据填充文件。

具体地，所述网页布局包括网页控件的排列方式、类型、形状和位置信息；所述目标数据填充文件被用于向网页布局中填入具体内容；在模板文件相同的场景下，通过变换不同的目标数据填充文件能够得到不同的网页内容。

在本发明实施例中模板文件通过JSON文件描述，数据填充文件通过 JavaScript文件描述。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，JavaScript文件可以被浏览器引擎解释执行。

在JavaScrip语言中，一切都是对象，任何支持的类型都可以通过JSON 来表示，例如字符串、数字、对象、数组等。JSON是JavaScrip对象的字符串表示法，它使用文本表示一个JavaScrip对象的信息。JSON可以将 JavaScript对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式。

在本发明一种可行的实施方式中，在JSON模板文件中通过对象来描述网页布局。具体地，如图2所示，对象表示为键值对，对象中的数据由逗号分隔，使用花括号保存对象。在JSON模板文件中键描述网页布局类型，值描述网页布局类型对应的取值。所述网页布局类型包括但不限于大小、颜色、字体、字号、标题和待匹配项。在JavaScript数据填充文件中通过对象来描述网页内容。如图3所示，其示出了图2中模板文件对应的目标数据填充文件，对象表示为键值对，键描述待匹配项，值描述待匹配项的值。

S103.根据所述模板文件和目标数据填充文件生成页面描述文件。

根据图2-3所示可知，模板文件和目标数据填充文件以待匹配项作为桥梁，通过用目标数据填充文件中待匹配项的值替换模板文件中的待匹配项的值即可得到页面描述文件，生成的页面描述文件如图4所示，所述页面描述文件以JavaScript文件描述。

S105.基于所述页面描述文件渲染页面。

具体地，为了实现网页的在线热更新，本发明实施例中模板文件和目标数据填充文件都可以通过后台服务器直接下发，并且在浏览器本地直接生成页面描述文件，所述页面描述文件具体为JavaScript文件，从而能够被浏览器直接解释执行。

进一步地，为了提升浏览器对于页面描述文件的渲染速度，本发明实施例提供了一种基于多线程的页面渲染方法，如图5所示，包括：

S1051.开启第一线程，所述第一线程用于基于所述页面描述文件渲染虚拟界面。

在网页渲染过程中，若渲染真实界面的阶段耗时过久，会显著影响流畅度，为了提升网页渲染的速度，降低网页渲染的耗时，本发明实施例中在渲染真实界面之前，预先生成虚拟界面，如图6所示，所述虚拟界面与网页布局一一对应，所述虚拟界面中的每个虚拟控件都会映射到一个真实的界面控件。具体地，真实的界面控件通常都由主线程进行渲染，为了降低主线程负荷，本发明实施例中的第一线程为非主线程，并受控于主线程。在非主线程中提前执行一些比较耗时的操作(渲染虚拟界面)，可以提升页面显示速度。

S1053.基于所述页面描述文件渲染真实的界面控件，并根据所述真实的界面控件和所述虚拟界面生成真实界面。

在虚拟界面已经生成的基础上，步骤S1053由主线程执行，由步骤 S1053的内容可知，主线程除了渲染真实的界面控件之外不再需要执行其它耗时操作，即可得到最终的显示结果，如图7所示，从而可以显著提升页面的渲染速度。

事实上，如图8所示，本发明实施例中步骤S101-S103中进行了预排版，并且在步骤S105中实现了基于多线程的页面渲染。

由上述内容可知本发明实施例的页面渲染技术方案将页面分为模板和内容两部分，并分别使用了JSON文件和JavaScript文件进行描述，并基于预设的匹配规则实现了页面描述文件的自动生成，这种技术方案可以同时兼具高动态性，高性能和高开发效率三重优势，其原因在于：

1、使用JSON/JS文件描述网页内容不需要编译或重新发布客户端版本，可以实现在线热更新。

2、JSON描述文件不包含逻辑，描述清晰，比原生的开发方式更高效。

3、对比使用web描述页面的现有技术，本发明实施例中生成的页面描述文件可以在浏览器本地被解释执行，排版和渲染性能比较高效。

为了进一步提升网页渲染速度，本发明实施例还可以为真实的界面控件维护一个复用池，所述复用池用于维护已经被创建出来的真实的界面控件。所述真实的界面控件在不使用的时候不会销毁，而是被所述复用池回收管理。当重新需要所述界面控件时，可以先从所述复用池里面调取进行复用，从而避免界面控件的重复渲染，进一步提升网页显示的速度。

具体地，如图9所示，本发明实施例中所述复用池可以按照界面控件之间的继承关系按照树形结构维护界面控件形成的视图，即维护视图树。

具体地，在实际显示过程中所述复用池可以按照配置选择是否生成，若生成，则当界面控件不需要被显示时，可以被所述复用池回收，和所述界面控件存在继承关系的其它界面控件在不需要被显示时也一并被复用池回收。当在所述复用池中的界面控件需要恢复显示时，只需进行局部的显示调整即可。所述显示调整包括调整宽高，调整具体的显示内容等，比重新渲染界面控件的成本低很多。

本发明实施例提供的一种页面渲染方法具备下述多重有益效果：

首先，通过使用模板文件和数据填充文件进行页面描述，实现了后台对于页面内容的在线热更新，通过在浏览器中直接生成页面描述文件并且直接进行渲染，获得了比原生应用更为优异的渲染性能。

其次，通过在具体渲染过程中使用多线程渲染，避免了对于主线程资源的浪费，将耗时的操作分配在多个线程中进行，提升了渲染效率。

再次，通过维护复用池避免了对于界面控件的重复渲染，进一步提升了渲染效率。

进一步地，本发明实施例中不同网页数据内容可以共享模板，因此，相较于现有技术，节省了后台与前台浏览器之间数据交互的数据量，减少了更新网页内容时对于网络资源的占用。

本发明实施例的页面描述文件的自动生成以及渲染均可以由浏览器直接执行，不需要添加额外的辅助控件，因此，具备较好的应用前景。比如，可以应用于iPhoneQQ，QQ空间等产品上，以完成了产品中Feed的渲染，满足线上热更新的需求。Feed是一种数据格式，用于给(订阅的)用户提供持续更新的内容。在产品上线之后，通过本发明实施例提供的方法可以得到丰富的渲染效果，如图10-12所示，并且在渲染过程中能够充分保证渲染性能，提升流畅度，使得用户可以快速看到动态更新的最新界面。

本发明实施例在性能方面的考虑主要通过使用非主线程生成虚拟界面，并在渲染真实界面时采用复用池进行界面控件复用两种加速方法保证渲染速度。同时，在真实的界面控件的使用时，可以充分利用或者复用终端已经封装好的组件，比如自定义播放器，复杂文字渲染等非系统控件，因此相比于现有技术中的web网页模式，有更好的渲染性能。

本发明实施例在开发性能方面的考虑主要在于，在开发新样式的时候，只需修改模版文件(JSON)和数据填充文件(JS)即可，从而在开发过程中避免了工程编译，工程调试，版本发布等流程。同时由于JSON文件的描述特性，不包含代码逻辑，所以工程质量也得到了保证。将模版文件 (JSON)和数据填充文件(JS)由后台直接下发到终端即可实现网页的在线热更新。

本发明实施例进一步提供了一种页面渲染装置，如图13所示，包括：

文件获取模块201，用于获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

页面描述文件生成模块202，用于根据所述模板文件和目标数据填充文件生成页面描述文件；

渲染模块203，用于基于所述页面描述文件渲染页面。

进一步地，所述渲染模块203如图14所示，包括：

虚拟界面渲染单元2031，用于开启第一线程，所述第一线程用于基于所述页面描述文件渲染虚拟界面；

真实界面渲染单元2032，用于基于所述页面描述文件渲染真实的界面控件，并根据所述真实的界面控件和所述虚拟界面生成真实界面。

此外，所述装置还包括：

复用池维护模块204，用于维护复用池，所述复用池用于维护已经被创建出来的真实的界面控件以便于当重新需要所述界面控件时能够在所述复用池中调取所述界面控件进行复用。

进一步地，所述装置还能够用于处理页面交互事件。交互事件主要指点击，长按，滑动等响应于用户操作的事件。通过使用JSON文件中自定义标记位，在接收事件的时候，可以根据控件坐标进行事件的分发。即本发明实施例中通过使用JSON文件可以进行交互事件的处理。

本发明的装置实施例中所述的一种页面渲染装置与方法实施例基于同样地发明构思。

本发明的实施例还提供了一种存储介质，所述存储介质可用于保存用于实现实施例中需要用到的的程序代码。可选地，在本实施例中，上述存储介质可以位于计算机网络的多个网络设备中的至少一个网络设备。可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器 (ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

本发明的实施例还提供一种浏览器，所述浏览器能够运行本发明方法实施例中一种页面渲染方法。

本发明的实施例还提供一种终端，该终端可以是任何能够运行本发明装置实施例中一种页面渲染装置的硬件设备。可选地，在本实施例中，该终端可以是移动终端或计算机终端，还可以替换为计算机终端群中的任意一个计算机终端设备。

可选地，在本实施例中，上述计算机终端或移动终端可以位于计算机网络的多个网络设备中的至少一个网络设备。

可选地，图15是根据本发明实施例的终端的结构框图。如图15所示，该终端可以包括：一个或多个(图中仅示出一个)处理器、存储器、以及传输装置。

其中，存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器内的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端或移动终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置用于经由一个网络接收或者发送数据。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置包括一个网络适配器，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置为射频模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器用于存储用于进行页面渲染的程序。

处理器可以通过传输装置调用存储器存储的信息及应用程序，以执行下述步骤：

可选的，上述处理器还可以执行如下步骤的程序代码：

获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

根据所述模板文件和目标数据填充文件生成页面描述文件；

基于所述页面描述文件渲染页面。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台移动终端或计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

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

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

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

需要说明的是：上述本发明实施例的先后顺序仅仅为了描述，不代表实施例的优劣。

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

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

Claims (8)

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

获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

根据所述模板文件和目标数据填充文件生成页面描述文件；

开启第一线程，所述第一线程用于基于所述页面描述文件渲染虚拟界面；所述第一线程为非主线程，受控于主线程；由主线程基于所述页面描述文件渲染真实的界面控件，并根据所述真实的界面控件和所述虚拟界面生成真实界面；

所述方法还包括：

维护复用池，所述复用池用于维护视图树，所述视图树为按照真实的界面控件之间的继承关系基于树形结构形成的视图，以便于当重新需要所述真实的界面控件时能够在所述复用池中调取所述真实的界面控件进行复用。

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

所述网页布局包括网页控件的排列方式、类型、形状和位置信息；所述目标数据填充文件被用于向网页布局中填入具体内容；在模板文件相同的场景下，通过变换不同的目标数据填充文件得到不同的网页内容。

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

模板文件通过JSON文件描述，目标数据填充文件通过JavaScript文件描述。

4.根据权利要求3所述的方法，其特征在于：

在模板文件中，键描述网页布局类型，值描述网页布局类型对应的取值；所述网页布局类型包括待匹配项；在目标数据填充文件中，键描述待匹配项，值描述待匹配项的值；通过用目标数据填充文件中待匹配项的值替换模板文件中的待匹配项的值得到页面描述文件。

5.根据权利要求1所述的方法，其特征在于，所述虚拟界面与网页布局一一对应，所述虚拟界面中的每个虚拟控件都能够被映射到真实的界面控件。

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

文件获取模块，用于获取模板文件和目标数据填充文件，所述模板文件用于描述网页布局，所述目标数据填充文件用于描述在所述网页布局下的待显示的网页内容；

页面描述文件生成模块，用于根据所述模板文件和目标数据填充文件生成页面描述文件；

渲染模块，用于开启第一线程，所述第一线程用于基于所述页面描述文件渲染虚拟界面；所述第一线程为非主线程，受控于主线程；由主线程基于所述页面描述文件渲染真实的界面控件，并根据所述真实的界面控件和所述虚拟界面生成真实界面；

所述装置还包括：

复用池维护模块，用于维护复用池，所述复用池用于维护视图树，所述视图树为按照真实的界面控件之间的继承关系基于树形结构形成的视图，以便于当重新需要所述真实的界面控件时能够在所述复用池中调取所述真实的界面控件进行复用。

7.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序用于实现权利要求1中所述的一种页面渲染方法。

8.一种终端，其特征在于，所述终端用于运行权利要求6所述的一种页面渲染装置。

Images