CN108170497A - 一种页面渲染的方法及装置 - Google Patents

Abstract

本申请实施例公开一种页面渲染的方法及装置，该方法客户端可向用户提供页面访问入口，并当监测到该页面访问入口被触发时，确定第一页面，而后，客户端可从该第一页面中包含的各页面节点中确定出第一显示页面的节点集，并按照预设的第一渲染规则，对确定出的第一显示页面的节点集中的各页面节点进行渲染。由于客户端在监测到页面访问入口被触发时，可将向用户第一时间显示的各页面节点整体进行渲染并显示，因此，客户端向用户第一时间显示的各页面节点所属的页面是流畅性较强的页面，即，该页面中包含的各页面节点是一并呈现给用户的，而不是逐个呈现给用户，提高了向用户第一时间显示的页面的流畅性，提升了用户体验。

Description

一种页面渲染的方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面渲染的方法及装置。

背景技术

随着计算机技术的不断发展，各种客户端相继推出，这些客户端可使的用户随时随地的进行业务处理，从而给用户带来了极大的便利。

当前，用户在打开客户端时，客户端通常是将页面中的各页面元素(这里提到的页面元素是指页面中的各图标)逐个渲染并显示的，因此，客户端向用户呈现的页面将是一个流畅性较差的页面(因为页面中的各页面元素是逐个显示出的)，从而降低了用户使用客户端的用户体验。

发明内容

本申请实施例提供一种页面渲染的方法，用以解决现有技术中客户端向用户显示的页面流畅性较低，降低用户体验的问题。

本申请实施例提供了一种页面渲染的方法，包括：

在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点；

从所述多个页面节点中，确定第一显示页面的节点集，所述第一显示页面的节点集中包含第一显示页面的多个页面节点；

按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

本申请实施例提供一种页面渲染的装置，用以解决现有技术中客户端向用户显示的页面流畅性较低，降低用户体验的问题。

本申请实施例提供了一种页面渲染的装置，包括：

页面确定模块，在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点；

节点确定模块，从所述多个页面节点中，确定第一显示页面的节点集，所述第一显示页面的节点集中包含第一显示页面的多个页面节点；

渲染模块，按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

在本申请实施例中，由于客户端在监测到页面访问入口被触发时，可将向用户第一时间显示的各页面节点整体进行渲染并显示，因此，客户端向用户第一时间显示的各页面节点所属的页面是流畅性较强的页面，即，该页面中包含的各页面节点是一并呈现给用户的，而不是逐个呈现给用户，提高了向用户第一时间显示的页面的流畅性，提升了用户体验。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的页面渲染过程的示意图；

图2为本申请实施例提供的页面跳转的示意图；

图3为本申请实施例提供的待渲染页面中包含的各页面节点的示意图；

图4为本申请实施例提供的List组件的布局效果示意图；

图5为本申请实施例提供的一种页面渲染的装置示意图。

具体实施方式

为了实现本申请的目的，本申请实施例提供了一种页面渲染的方法及装置，由于客户端在监测到页面访问入口被触发时，可将向用户第一时间显示的各页面节点整体进行渲染并显示，因此，客户端向用户第一时间显示的各页面节点所属的页面是流畅性较强的页面，即，该页面中包含的各页面节点是一并呈现给用户的，而不是逐个呈现给用户，有效改善了页面加载速度，提高了向用户第一时间显示的页面的流畅性，提升了用户体验。

目前，安装在移动终端(诸如智能手机、平板电脑等终端)操作系统中的应用主要有三种模式：原生应用(Native)、网页模式应用(Web)、混合模式应用(Hybrid)。这三种应用拥有各自的特征，例如，开发Native应用的成本较高，并且针对不同的操作系统需要开发不同版本的Native应用，但是，Native应用的交互界面通常较好；而对于Web应用来说，Web应用所能实现的交互功能通常十分有限，并且开发出的交互界面与Native相比，效果较差，对于Hybrid应用来说，Hybrid应用所能实现的交互功能比起Native应用还是较少，并且Hybrid应用的运行效率也低于Native应用。

为了实现应用开发效率和应用交互功能的统一，开发者可以通过在自己利用前端代码开发的应用中嵌入Weex软件开发工具包(Weex SDK)，来使得该应用能够一方面兼容各种移动端的操作系统，不必针对不同的操作系统开发不同的版本，另一方面实现Native级别的交互功能。

然而，对于通过Weex软件开发工具开发出的客户端页面来说，客户端将用户访问的首屏页面(该首屏页面指的是用户点击访问入口(图标、图片链接入口、文字链接入口等)后第一时间在终端屏幕中向用户显示的页面)显示给用户的过程中，客户端是将首屏页面中的各页面节点逐个渲染并显示的，也就是说，客户端向用户呈现出的首屏页面将是一个流畅性较差的页面，这就极大的降低了用户体验。因此，本申请实施例意在解决客户端首屏页面显示效果较差而导致用户体验较差的问题。其中，这里提到的客户端首屏页面可以是Web页面、Native页面或是Hybrid页面。

在本申请实施例中，页面单元是指客户端页面布局中的各页面框，如在一个页面包含有若干图标，而针对每个图标来说，承载该图标的即为该页面中的页面单元。页面单元中所展示的图标、滚动条等页面元素是需要客户端对页面节点进行渲染后实现的，客户端将页面单元对应的页面节点渲染完后，该页面单元只是以图标、滚动条等形式进行展示，而这些图标、滚动条并不具备实际的业务功能，因此，客户端为了使该页面单元(该页面单元中承载有渲染完的页面节点)具备业务功能，客户端需要为该页面单元加载一个页面模块，这样一来，该页面单元上所显示的图标、滚动条等信息将具备实际的业务功能，从而使得用户可对该页面单元实施操作。

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

图1为本申请实施例提供的页面渲染过程的示意图，具体包括以下步骤：

S101：在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点。

在本申请实施例中，用户在通过客户端实现页面访问时，客户端向用户提供页面访问入口，以使用户通过该页面访问入口，实现对页面的访问。例如：在终端中显示的各个客户端的图标，这些图标可以看做是客户端向用户提供的页面访问入口，用户点击图标后，客户端可监测到该页面访问入口被触发，进而在后续的过程中，客户端向用户显示需要访问的页面。

当然，这里提到的页面访问入口也可以是客户端中设置的能够跳转到其他页面的控件，如，客户端响应于用户点击页面访问入口的操作，会将向用户展示该页面访问入口对应的一个页面，而后，用户在该页面上点击了一个指定控件时，客户端会将该页面进行跳转，以显示另一个页面。其中，这里提到的指定控件即是能够跳转到其他页面的控件，如图2所示。

图2为本申请实施例提供的页面跳转的示意图。

客户端将向用户展示如图2所示的页面，该页面的指定控件中设有其他页面的统一资源定位符(Uniform Resource Locator，URL)，因此，当用户点击了该页面中的指定控件时，客户端将根据该指定控件中的URL跳转出相应的页面，以供用户进行查看，其中，这里提到的指定控件则可称为跳转页面的页面访问入口。

除此之外，在本申请实施例中，页面访问入口也可以是客户端中设置的应用访问入口，该应用访问入口是指能够使用户在该客户端中跳转到第三方客户端指定页面的入口，如，当用户点击了客户端所显示的某一第三方客户端图标时，该客户端会将第三方客户端的指定页面跳转出来进行显示，其中，这里提到的第三方客户端图标即为应用访问入口。

当监测到设置的页面访问入口被触发时，客户端需要进一步确定出该页面访问入口对应的第一页面。

这里提到的第一页面指在页面访问入口被触发时，向用户第一时间显示的具有业务功能的交互页面所在完整页面，如，当购物客户端的页面访问入口被触发时，该购物客户端第一时间向用户显示的商品页面的完整页面，即第一页面。

当然，若上述步骤S101中的页面访问入口为能够跳转到其他页面的控件，则这里提到的第一页面则是指客户端页面发生跳转后，客户端向用户显示的跳转页面的完整页面。

具体的，当客户端监测到用户对该客户端的图标执行指定操作时，则可确定出客户端所设置的页面访问入口被触发，如，当用户点击终端中所显示的该客户端的图标时，该客户端所设置的页面访问入口将被触发，换句话说，该客户端将被启动运行，那么在客户端运行之时，将在第一时间向用户显示该第一页面；再例如，当用户启动该终端的语音输入功能，并将客户端的语音信息输入到终端时，终端可对该语音信息进行识别，进而确定出用户通过该语音信息所要启动的客户端，而后，终端可代替用户启动该客户端，此时，该客户端所设置的页面访问入口将被触发，进而将第一时间向用户显示的第一页面进行展示。

客户端在监测到页面访问入口被触发时，确定用户通过客户端访问页面。此时，客户端首先确定在第一时间需要显示给用户的第一页面，其次，对该第一页面执行渲染操作之后，方可显示给用户。

需要说明的是，而在客户端中显示的页面可以包含两种类型：一种类型为短页面，即能够在客户端的显示屏中全部显示的页面；另一种类型为长页面，即该页面中包含的内容无法在客户端的显示屏中全部显示，采用分页显示或者分区显示的方式，通过指定操作方可在不同页或者不同区之间进行切换显示。

通常一个页面中包含多个页面节点，然而，由于终端屏幕无法一次性将第一页面的全部页面节点显示完全，一次只能显示部分页面节点，因此，对于第一页面中包含的多个页面节点，一部分页面节点是客户端在监测到该页面访问入口被触发时，第一时间需要在终端屏幕上向用户显示的，在本申请中称为第一显示页面；而另一部分页面节点则是客户端在监测到该页面访问入口被触发时第一时间处于隐藏状态的，这两类页面节点的区别如图3所示。总的来说，第一显示页面是用户访问的第一页面的子集，是第一页面的首屏页面，不包括欢迎页等临时加载的内容，是稳定加载后显示的内容。第一页面指的是用户访问的页面的完整页面。

图3为本申请实施例提供的第一页面中包含的各页面节点的示意图。

在图3中，用户在终端屏幕中通过诸如点击客户端图标的方式，打开该客户端时，该客户端将监测到设置的页面访问入口被触发，继而确定出该第一页面。其中，该第一页面并不是指当页面访问入口被触发时，在终端屏幕中向用户显示的第一个页面，而是一个整体的页面，这里提到的第一页面即为图3中虚线区域与终端屏幕区域所构成的整个页面。通常情况下，由于终端屏幕尺寸的限制，用户通常只能看到该整体页面的一部分页面，即，图3中终端屏幕所显示的页面区域，而其他区域的页面将会处于隐藏显示状态。当用户在图3所示的终端屏幕上执行向左滑动操作时，隐藏在终端屏幕右侧的页面区域将会显示在终端屏幕中，相应地显示在终端屏幕中的页面区域则相应的会隐藏在终端屏幕的左侧。

当监测到页面访问入口被触发时，通常都会默认向用户显示一个指定的页面，这里的指定的页面可以理解为客户端在终端屏幕中向用户显示的第一显示页面，换句话说，当监测到页面访问入口被触发时，该客户端第一时间在终端屏幕中向用户显示的页面，也即，首屏页面，在该页面中(即当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的页面)，通常都会包含有几个固定的页面节点，客户端在向用户显示该页面时，通常需要通过这几个固定的页面节点构建出该页面。

需要说明的是，本申请实施例中所记载的第一时间可以理解为从客户端的页面访问入口被触发到显示第一显示页面(首屏页面)给用户之间的时间，即第一显示页面渲染加载时间。本申请实施例的主要目的也在于缩短第一时间的时长，以达到秒开的效果。

S102：从所述多个页面节点中，确定第一显示页面的节点集。

所述第一显示页面的节点集中包含所述页面访问入口被触发时的第一时间需要显示的多个页面节点，这些多个页面节点可以构成上述记载的第一显示页面。

客户端在向用户显示该第一显示页面(该第一显示页面即为加载完成后首先在终端屏幕上显示的页面，换句话说，当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的页面，也称为首屏页面)时，需要先确定出第一页面(该第一页面即为图3中所示的整个页面)中包含的各页面节点中，确定出构成第一显示页面(即对应于本申请实施例中所记载的第一显示页面的节点集)的各页面节点。

其中，客户端具体可通过以下方式确定出得到第一显示页面(首屏页面)的各页面节点：通常情况下，页面的显示实际上是客户端运行该页面的各页面代码而实现的，换句话说，一个页面其实是由多个页面代码形成的，客户端需要执行这些页面代码，才能渲染并显示出该页面。客户端在打开(即客户端设置的页面访问入口被触发)时，可确定第一页面对应的页面代码，而后，客户端可对这些页面代码进行解析，以确定出客户端在页面访问入口被触发时，第一时间需要在终端屏幕中向用户显示的多个页面节点(即首屏页面中包含的各页面节点)，进而根据这些页面节点，确定出构成第一显示页面的节点集。

其中，这里提到的第一显示页面的节点集指的是第一显示页面中包含的各页面节点所构成的节点集，即当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的首屏页面中包含的各页面节点所构成的集合。

客户端通过解析页面代码，确定首屏页面(第一显示页面)中的各页面节点时，具体可通过解析第一页面中包含的各页面代码，确定出首屏页面所对应的页面代码段(即确定出客户端在页面访问入口被触发时，第一时间需要在终端屏幕中向用户显示的页面所包含的页面代码段)。客户端在确定出该页面代码段后，可通过预设的文档对象模型(Document Object Model，DOM)，将该页面代码段转换为多个页面节点。

其中，客户端通过DOM将页面代码段转换为页面节点的目的在于，在实际应用中，DOM中规定了如何获取、添加或删除页面代码的标准，所以，页面维护人员在对页面进行维护、更新等操作时，通常都需要基于DOM标准来进行。除此之外，页面维护人员为了能够在页面出现问题时，能够快速对这些问题进行定位、修复，可通过DOM模型将页面中的各页面代码进行节点化，不同页面节点在页面上对应不同的页面内容，这样一来，当页面中的某一处页面内容出现问题时，页面维护人员可迅速确定出该页面内容所对应的页面节点，进而通过对该页面节点的修复，使该页面内容回归正常，而不至于当该页面内容出现问题时，需要通过遍历检查所有的页面代码来进行问题的定位及修复，提高了页面维护的效率。

S103：按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

在本申请实施例中，客户端通过上述方法确定出第一显示页面的节点集后，需要通过该第一显示页面的节点集中各页面节点的静态资源，才能实现对第一显示页面(即当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的首屏页面)的渲染工作，其中，这里提到的静态资源是指诸如层叠样式表(Cascading Style Sheets，CSS)，URL等信息。

具体的，在实际应用中，Native是基于操作系统的原生程式编写运行的应用模式，其享有操作系统赋予的较高的权限，并且可访问本地资源，页面开发人员或页面维护人员通过Native不仅能够较为便利的开发出客户端页面，且渲染出交互页面也较为华丽，能够为用户提供较佳的用户体验。因此，在本申请实施例中，客户端在对第一显示页面的节点集中的各页面节点进行渲染时，同样需要利用客户端底层所预设的Native函数，具体的渲染方式可以是：客户端在确定出第一显示页面的节点集后，可通过客户端JavaScript代码，从第一页面节点集包含的各页面节点中提取出各页面节点对应的静态资源，而后，客户端可通过预设的接口，从客户端底层中调取预设的第一Native函数，并将该提取出的静态资源作为参数传入到该第一Native函数，这样一来，客户端可通过该第一Native函数对该参数的计算，对该第一显示页面的节点集中的各页面节点进行渲染。

需要说明的是，Native函数作为底层函数，客户端通常需要特定的接口才能从底层中调用Native函数，因此，在本申请实施例中，客户端可通过预先在本地的Weex接口，从底层中调取该第一Native函数，继而通过该第一Native函数渲染第一显示页面的节点集中的各页面节点。

由于客户端是将第一显示页面的节点集包含的各页面节点对应的静态资源整体作为参数传入到该第一Native函数中的，这样一来，该第一Native函数对该静态资源进行计算后，即可实现对首屏页面(当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的页面，也即第一显示页面)的整体渲染，换句话说，客户端是将首屏页面中的各页面节点全部渲染完后，才将渲染后的首屏页面展示给用户的，用户看到该页面时，该页面会将各页面节点(该页面节点为首屏页面中包含的页面节点)对应的内容全部向用户展示，而不会出现首屏页面中的各页面节点逐个向用户显示的情况出现，因此，当监测到页面访问入口被触发时，该客户端第一时间向用户展示的页面(即首屏页面)将是一个完整的页面，从而极大的提高了用户的感官体验。

当监测到页面访问入口被触发时，客户端向用户所展示的页面中通常都包含有各图标、滚动条等内容，这些内容的排版方式都是按照客户端所要求的排版布局进行的，而这些内容的实质其实就是客户端渲染各页面节点得到的，所以，客户端对首屏页面中包含的各页面节点进行渲染时，通常需要将各页面节点按照一定的方式放置在客户端预设的布局框架中，相应的，客户端渲染完各页面节点后，客户端渲染各页面节点后所得到的各页面内容将规整的排布在页面中。

在实际应用中，List组件作为一个可滚动的单选或多选列表框，其可向页面开发人员或页面维护人员提供一个良好的布局模式，所以，在本申请实施例中，上述客户端同样可采用List组件对客户端的页面进行布局，具有的布局效果如图4所示。

图4为本申请实施例提供的List组件的布局效果示意图。

在图4中，最左侧的图即为List组件的布局效果示意图，从该图中可以看出，客户端在终端屏幕所显示的一个页面实际上由List组件划分多个页面框，每个页面框实际上就是一个页面单元，每个页面单元实际上就是当监测到页面访问入口被触发时，在页面中所看到的一个图标、滚动条等页面内容。

客户端在对第一显示页面(首屏页面)中的各页面节点进行渲染时，其实相当于是将各页面节点(即第一显示页面的节点集中包含的各页面节点)分别放置在了各页面单元，并在各页面单元中完成页面节点渲染的工作，换句话说，是通过对各页面节点的渲染实现对各页面单元的渲染，如图4右侧的两幅图所示，客户端通过DOM得到的各页面节点实际上是将页面规整的划分为若干部分，每个节点在客户端的页面布局中所有相应的位置，换句话说，每个页面节点都对应有各自的页面单元。客户端相当于将各页面节点放置在各页面单元后渲染各页面节点将会得到用户实际所看到的页面中的各图标、滚动条等页面内容。

客户端将页面节点放置在页面单元中渲染页面节点时，通常需要对各页面单元分配内存资源，相当于各页面单元在获取到内存为其分配的资源后，才会对放置在页面单元中的页面节点进行渲染，因此，在本申请实施例中，客户端在对第一显示页面的节点集中的各页面节点进行渲染时，可将为这些页面节点对应的页面单元分配内存资源，从而使得客户端利用这些内存资源，完成对各页面单元中的各页面节点的渲染工作。

需要说明的是，客户端确定出的第一页面中包含有多个页面单元，而当监测到页面访问入口被触发时，客户端第一时间在终端屏幕中向用户显示的首屏页面(即第一显示页面)其实只是包含一部分页面单元，通常情况下，客户端需要将内存资源均匀的划分至该第一页面页面中的各页面单元，以用于对各页面单元中包含的各页面节点进行渲染工作。而在本申请实施例中，客户端在向各页面单元分配内存资源时，实际上只是对首屏页面中的页面单元划分了内存资源，而对于隐藏在终端屏幕中的其他页面单元则不会分配内存资源，这样其实就极大的节省了内存资源的消耗，因为，对于隐藏在终端屏幕中的页面单元来说，用户是无法看到的，同时用户也无法对这些页面单元进行操作，所以，若客户端对这些页面单元也分配内存资源，则会极大的浪费内存资源，同时也会对用户查看当前显示在终端屏幕中的页面造成影响。

客户端在各页面单元中将各页面节点进行渲染后，实际上已经将页面中需要显示的各图标、滚动条渲染出来了，但是，由于这些图、滚动条需要使用户能够对其进行操作，所以，客户端渲染完各页面节点后，需要对各页面单元(即对各页面节点)分别设置页面模块，这些页面模块其实就赋予了各图标、滚动条的业务功能。

因此，在本申请实施例中，客户端在对首屏页面(即当监测到页面访问入口被触发时第一时间在终端屏幕中向用户显示的页面，也即第一显示页面)的各页面节点渲染后，可针对每个页面节点所对应的页面单元，为其加载一个页面模块，从而得到一个具有实际业务功能的完整页面。其中，客户端在加载各页面模块时，可根据首屏页面中包含的页面单元的数量进行加载，换句话说，客户端只需要加载首屏页面中各页面单元的各页面模块即可，而对于隐藏在终端屏幕中的其他页面单元来说，虽然客户端实际上也需要对这些页面单元加载相应的页面模块，但是，由于当监测到页面访问入口被触发时，只会将首屏页面第一时间显示在终端屏幕中以供用户查看，所以，隐藏在终端屏幕中的页面单元客户端无需对其加载各页面模块，这样就极大的降低了客户端的运行负载，提高了客户端向用户展示首屏页面的速度。

用户在查看到客户端向用户展示的首屏页面(即第一显示页面)后，可能后续会对该首屏页面进行滑动操作，以查看隐藏在终端屏幕中的其他页面区域，因此，在本申请实施例中，客户端当监测到用户对首屏页面(即第一显示页面)执行指定操作时(即对首屏页面中第一显示页面的节点集执行指定操作时)，客户端从隐藏在终端屏幕中的页面节点中确定出至少一个响应该指定操作的页面节点，进而将该页面节点确定为客户端接下来需要显示地方其他页面节点(即用户执行完指定操作后，客户端需要将哪些页面节点显示给用户)。

例如，在图3所示的第一页面中，出现在终端屏幕中的页面为当监测到页面访问入口被触发时，客户端第一时间在终端屏幕中向用户显示的首屏页面(第一显示页面)，而对于虚线部分的页面区域来说，这些页面区域所包含的页面节点其实就是客户端在向用户显示该首屏页面时，隐藏在终端屏幕中的其他页面节点。当用户按住终端屏幕向左拖动(即用户执行的指定操作)客户端在终端屏幕所显示的首屏页面时，客户端会将隐藏在终端屏幕右侧的页面节点A移到终端屏幕中进行显示，所以，对于该页面节点A来说，该页面节点A即是客户端在监测到用户所执行的指定操作后，确定出的其他页面节点。

在本申请实施例中，客户端在确定出该其他页面节点后，可通过预设的JavaScript代码，提取出该页面节点中的静态资源，并通过预设的接口调用设置在底层的第二Native函数，而后，客户端可将提取出的静态资源作为参数传入到该第二Native函数中，以通过第二Native函数渲染该页面节点。其中，当客户端通过用户所执行的指定操作，确定出的其他页面节点为单个页面节点时，客户端只需将该页面节点的静态资源传入到调用的第二Native函数中进而完成该页面节点的渲染工作，而对于确定出的其他页面节点为多个页面节点时，客户端可分别通过JavaScript代码，提取出各页面节点的各静态资源，并将各静态资源逐个作为参数传入到该第二Native函数中，相应的，第二Native函数将逐个对各参数进行计算，进而逐个对各页面节点实施渲染。

客户端将确定出的其他页面节点进行逐个渲染的目的在于，用户通过指定操作来查看除首屏页面(第一显示页面)以外的其他页面区域时，若客户端需要将响应于该指定操作的各页面节点全部渲染完在显示各用户，则用户可能需要等待较长的时间，才能看到这些页面节点。所以，在本申请实施例中，客户端根据用户所执行的指定操作，确定出响应于该指定操作的各其他页面节点后，可将这些页面节点逐个渲染并显示各用户，用户无需等待较长的时间即可查看到响应于该指定操作的页面节点，从而进一步提升了用户体验。

客户端在对确定出的其他页面节点进行渲染时，同样需要将该页面节点放置在客户端布局的页面单元中，并以对该页面单元分配内存资源的方式来渲染该页面节点，而客户端在显示该页面节点所对应的页面单元时，首屏页面中的一个或一些页面单元则势必将移出终端屏幕，即隐藏在终端屏幕中，所以，移出终端屏幕的页面单元对于用户来说，并处于暂时无用的状态，因此，终端先前为其分配的内存资源也将无法充分利用。

基于此，在本申请实施例中，客户端在渲染确定出的其他页面节点时，可先确定出用户在执行所述指定操作后，第一显示页面的节点集中显示状态由显示转化为隐藏的页面节点，即，用户执行该指定操作后，从终端屏幕中移出的页面节点，而后，客户端可将先前为其分配的内存资源进行释放，并将释放的内存资源分配所述其他页面节点对应的页面单元中，以使客户端利用该内存资源，在该页面单元中对该其他页面节点进行渲染。

客户端对完成对上述其他页面节点的渲染工作后，可将渲染结果在该其他页面节点对应的页面单元中进行显示，而为了赋予该页面单元实际的业务功能，在本申请实施例中，客户端可加载对应该页面单元的页面模块，从而得到具有实际业务功能的页面单元。其中，客户端加载对应页面单元的页面模块时，可根据页面单元的具体数量来确定加载的页面模块的数量。

从上述方法中可以看出，客户端渲染页面的过程可分为两部分，一部分是将第一时间在终端屏幕中向用户显示的第一显示页面(首屏页面)整体渲染完后再显示给用户的，而另一部分则是根据用户所执行的指定操作，实时、逐个页面节点进行渲染的，在渲染各页面节点的过程中，客户端渲染首屏页面各页面节点时，是只是根据各页面节点对应的页面单元数分配内存资源的，而并不会对第一页面中所有的页面单元分配内存资源，这样就极大的节省了内存资源，同时，客户端在对响应于用户指定操作的页面节点进行渲染的过程中，客户端可将显示状态由显示转化为隐藏的页面节点的内存资源进行释放，并利用释放的内存资源来对响应于用户指定操作的页面节点进行渲染，从而提高了内存资源的复用率，不仅如此，由于客户端在加载各页面模块时，并不是将第一页面所需的全部页面模块一次性全部加载的，而先加载首屏页面各页面单元所对应的页面模块，并在显示响应于用户指定操作的页面单元(即页面节点)时，再加载该页面单元对应的页面模块，这样就极大的缩短了客户端向用户显示首屏页面的时间，从而提升了用户体验。

需要说明的是，上述步骤S103中提到的第一Native函数与第二Native函数可以理解为函数结构相同，但是函数中包含的参数不同的两个函数，第一Native函数用于将第一显示页面(即首屏页面)中各页面节点的静态资源作为参数进行计算，以将首屏页面中包含的全部页面节点同时进行渲染，而第二Native函数则是将响应于用户指定操作的至少一个页面节点的静态资源作为参数进行计算，以将这些页面节点逐个进行渲染。

上述步骤S101中的页面访问口入为客户端中设置的应用访问入口，则这里提到的第一页面则是指客户端的页面跳转到第三方客户端的指定页面时所显示的第三方客户端的指定页面的完整页面。

还需说明的是，为了进一步的提升用户体验，缩短客户端向用户显示第一显示页面(首屏页面)的时间，在本申请实施例中，客户端在向用户显示首屏页面时，需要根据需要显示的首屏页面生成一个资源获取请求，服务器在接收到该资源获取请求后，可向用户返回一个该资源获取请求所要获取的静态资源的资源标识(如版本号)，客户端在接收到该资源标识后，可根据该资源标识，判断本地是否包含有该资源标识对应的静态资源，若是，则客户端可直接加载本地保存的静态资源，进而确定出第一页面，若客户端判断出本地并没有该资源标识对应的静态资源，则需要从服务器获取该静态资源。

其中，当客户端本地包含有该静态资源时，该静态资源可保存在本地的离线包中，该离线包可以是客户端预先从服务器中下载到本地的安装包(或更新包)，而服务器向客户端发送静态资源时，可将该静态资源打包存放于更新包中下发给客户端。

客户端预加载离线包的目的在于，在实际应用中，一些服务平台可能会定期举行一些特定活动，如特卖会、旅游优惠季、游戏促销活动等。在这段时间里，客户端(该客户端即为服务平台对应的客户端)中的页面通常也会发生相应的变化，用户在特定活动期间，打开该客户端访问页面时，客户端需要从服务平台的服务器中获取新页面的静态资源，进而才会将服务平台在特定活动期间所发布的页面展示给用户。但是，由于在这段时间内，服务器的访问压力十分巨大，则服务器可能无法尽快的将客户端需要获取的静态资源发送至客户端中，致使客户端迟迟无法加载该新页面，从而给用户带来了不便。

而在本申请实施例中，由于客户端采用了预加载的模式，服务器可预先将特定活动期间所涉及的静态资源打包成更新包并下发至各客户端中，这样一来，若客户端加载了该更新包，则用户在特定活动期间打开该客户端时，客户端即可直接从该更新包(加载到客户端本地后也可称为离线包)获取到第一页面所需的静态资源，继而通过获取到的静态资源确定出该第一页面，这就极大的提高了首屏页面的秒开率，从而给用户带来了良好的用户体验。

以上为本申请实施例提供的页面渲染方法，基于同样的思路，本申请实施例还提供一种页面渲染的装置，如图5所示。

图5为本申请实施例提供的一种页面渲染的装置示意图，具体包括：

页面确定模块501，在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点；

节点确定模块502，从所述多个页面节点中，确定第一显示页面的节点集，所述第一显示页面的节点集中包含第一显示页面的多个页面节点；

渲染模块503，按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

所述渲染模块503，按照预设的第一渲染规则，同时对确定的所述第一显示页面的节点集中的页面节点进行渲染。

所述渲染模块503，对于所述多个页面节点中除了所述第一显示页面的节点集中包含的页面节点之外包含的其他页面节点，按照预设的第二渲染规则，对所述其他页面节点进行渲染，所述第二渲染规则用于逐个渲染所述其他页面节点。

所述节点确定模块502，确定所述第一页面对应的页面代码；解析所述页面代码，得到加载完成时在屏幕上显示的页面内容对应的多个页面节点；根据确定出的所述多个页面节点，确定所述第一显示页面的节点集。这里的加载完成时在屏幕上显示的页面内容对应的多个页面节点是指加载完第一显示页面(首屏页面)，可以不需要等到完整的第一页面加载完成。

所述节点确定模块502，解析所述页面代码，确定加载完成时在屏幕上显示的页面内容的多个页面节点对应的页面代码段；按照预设的文档对象模型DOM，将所述页面代码段转换为所述多个页面节点。

所述渲染模块503，提取所述第一显示页面的节点集中各页面节点对应的静态资源；通过调用预设的第一Native函数，将所述静态资源作为参数传入到所述第一Native函数中，以通过所述第一Native函数整体渲染所述第一显示页面的节点集中的各页面节点。

所述渲染模块503，为所述第一显示页面的节点集中的各页面节点对应的页面单元分配内存资源。

所述渲染模块503，显示所述第一显示页面的节点集中的各页面节点对应的页面单元；根据所述页面单元的数量，加载所述页面单元对应的页面模块。

所述确定模块502，当监测到对显示的所述第一显示页面执行指定操作时，从所述至少一个页面节点中确定用于响应所述指定操作的页面节点；将确定的所述页面节点作为其他页面节点。

所述渲染模块503，提取所述其他页面节点对应的静态资源；通过调用预设的第二Native函数，将所述节点静态资源作为参数传入到所述第二Native函数中，以通过所述第二Native函数逐个渲染所述其他页面节点。

所述渲染模块503，确定在执行所述指定操作时所述第一显示页面的节点集中显示状态由显示转化为隐藏的页面节点，释放所述页面节点的内存资源；将所述内存资源分配给所述其他页面节点对应的页面单元。

所述渲染模块503，显示所述其他页面节点对应的页面单元；根据所述页面单元的数量，加载所述页面单元对应的页面模块。

所述确定模块502，确定本地离线包中的所述第一页面的静态资源；通过所述静态资源，确定所述第一页面。

所述确定模块502，若确定本地中不存在所述静态资源时，则从服务器获取所述静态资源，并通过获取到的所述静态资源，确定所述第一页面。

在本申请实施例中，客户端可向用户提供页面访问入口，并当监测到该页面访问入口被触发时，确定第一页面，而后，客户端可从该第一页面中包含的各页面节点中确定出第一显示页面的节点集，并按照预设的第一渲染规则，对确定出的第一显示页面的节点集中的各页面节点进行渲染。由于客户端在监测到页面访问入口被触发时，可将向用户第一时间显示的各页面节点整体进行渲染并显示，因此，客户端向用户第一时间显示的各页面节点所属的页面是流畅性较强的页面，即，该页面中包含的各页面节点是一并呈现给用户的，而不是逐个呈现给用户，提高了向用户第一时间显示的页面的流畅性，提升了用户体验。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (26)

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

在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点；

从所述多个页面节点中，确定第一显示页面的节点集，所述第一显示页面的节点集中包含第一显示页面的多个页面节点；

按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

2.如权利要求1所述的方法，其特征在于，按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，包括：

按照预设的第一渲染规则，同时对确定的所述第一显示页面的节点集中的页面节点进行渲染。

3.如权利要求1或2所述的方法，其特征在于，所述方法还包括：

对于所述多个页面节点中除了所述第一显示页面的节点集中包含的页面节点之外包含的其他页面节点，按照预设的第二渲染规则，对所述其他页面节点进行渲染，所述第二渲染规则用于逐个渲染所述其他页面节点。

4.如权利要求1所述的方法，其特征在于，从所述多个页面节点中，确定第一显示页面的节点集，具体包括：

确定所述第一页面对应的页面代码；

解析所述页面代码，得到加载完成时在屏幕上显示的页面内容对应的多个页面节点；

根据确定出的所述多个页面节点，确定所述第一显示页面的节点集。

5.如权利要求3所述的方法，其特征在于，解析所述页面代码，得到加载完成时在屏幕上显示的页面内容对应的多个页面节点，具体包括：

解析所述页面代码，确定加载完成时在屏幕上显示的页面内容的多个页面节点对应的页面代码段；

按照预设的文档对象模型DOM，将所述页面代码段转换为所述多个页面节点。

6.如权利要求1所述的方法，其特征在于，按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，具体包括：

提取所述第一显示页面的节点集中各页面节点对应的静态资源；

通过调用预设的第一Native函数，将所述静态资源作为参数传入到所述第一Native函数中，以通过所述第一Native函数整体渲染所述第一显示页面的节点集中的各页面节点。

7.如权利要求1所述的方法，其特征在于，在对所述第一显示页面的节点集中的页面节点进行渲染时，所述方法还包括：

为所述第一显示页面的节点集中的各页面节点对应的页面单元分配内存资源。

8.如权利要求7所述的方法，其特征在于，当所述第一显示页面的节点集中的页面节点渲染完成后，所述方法还包括：

显示所述第一显示页面的节点集中的各页面节点对应的页面单元；

根据所述页面单元的数量，加载所述页面单元对应的页面模块。

9.如权利要求8所述的方法，其特征在于，确定所述至少一个页面节点中包含的其他页面节点，具体包括：

当监测到对显示的所述第一显示页面执行指定操作时，从所述至少一个页面节点中确定用于响应所述指定操作的页面节点；

将确定的所述页面节点作为其他页面节点。

10.如权利要求9所述的方法，其特征在于，按照预设的第二渲染规则，对所述其他页面节点进行渲染，具体包括：

提取所述其他页面节点对应的静态资源；

通过调用预设的第二Native函数，将所述节点静态资源作为参数传入到所述第二Native函数中，以通过所述第二Native函数逐个渲染所述其他页面节点。

11.如权利要求10所述的方法，其特征在于，在渲染所述待其他页面节点时，所述方法还包括：

确定在执行所述指定操作时所述第一显示页面的节点集中显示状态由显示转化为隐藏的页面节点，释放所述页面节点的内存资源；

将所述内存资源分配给所述其他页面节点对应的页面单元。

12.如权利要求11所述的方法，其特征在于，当所述其他页面节点渲染完成后，所述方法还包括：

显示所述其他页面节点对应的页面单元；

根据所述页面单元的数量，加载所述页面单元对应的页面模块。

13.如权利要求1所述的方法，其特征在于，在所述页面访问入口被触发时，确定所述页面访问入口对应的第一页面，具体包括：

确定本地离线包中的所述第一页面的静态资源；

通过所述静态资源，确定所述第一页面。

14.如权利要求13所述的方法，其特征在于，所述方法还包括：

若确定本地中不存在所述静态资源时，则从服务器中获取所述静态资源，并通过获取到的所述静态资源，确定所述第一页面。

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

页面确定模块，在页面访问入口被触发时，确定所述页面访问入口对应的第一页面，所述第一页面中包含多个页面节点；

节点确定模块，从所述多个页面节点中，确定第一显示页面的节点集，所述第一显示页面的节点集中包含第一显示页面的多个页面节点；

渲染模块，按照预设的第一渲染规则，对确定的所述第一显示页面的节点集中的页面节点进行渲染，得到在屏幕上显示的所述第一显示页面。

16.如权利要求15所述的装置，其特征在于，所述渲染模块，按照预设的第一渲染规则，同时对确定的所述第一显示页面的节点集中的页面节点进行渲染。

17.如权利要求15或16所述的装置，其特征在于，所述渲染模块，对于所述多个页面节点中除了所述第一显示页面的节点集中包含的页面节点之外包含的其他页面节点，按照预设的第二渲染规则，对所述其他页面节点进行渲染，所述第二渲染规则用于逐个渲染所述其他页面节点。

18.如权利要求15所述的装置，其特征在于，所述节点确定模块，确定所述第一页面对应的页面代码；解析所述页面代码，得到加载完成时在屏幕上显示的页面内容对应的多个页面节点；根据确定出的所述多个页面节点，确定所述第一显示页面的节点集。

19.如权利要求17所述的装置，其特征在于，所述节点确定模块，解析所述页面代码，确定加载完成时在屏幕上显示的页面内容的多个页面节点对应的页面代码段；按照预设的文档对象模型DOM，将所述页面代码段转换为所述多个页面节点。

20.如权利要求15所述的装置，其特征在于，所述渲染模块，提取所述第一显示页面的节点集中各页面节点对应的静态资源；通过调用预设的第一Native函数，将所述静态资源作为参数传入到所述第一Native函数中，以通过所述第一Native函数整体渲染所述第一显示页面的节点集中的各页面节点。

21.如权利要求15所述的装置，其特征在于，所述渲染模块，为所述第一显示页面的节点集中的各页面节点对应的页面单元分配内存资源。

22.如权利要求21所述的装置，其特征在于，所述渲染模块，显示所述第一显示页面的节点集中的各页面节点对应的页面单元；根据所述页面单元的数量，加载所述页面单元对应的页面模块。

23.如权利要求22所述的装置，其特征在于，所述确定模块，当监测到对显示的所述第一显示页面执行指定操作时，从所述至少一个页面节点中确定用于响应所述指定操作的页面节点；将确定的所述页面节点作为其他页面节点。

24.如权利要求23所述的装置，其特征在于，所述渲染模块，提取所述其他页面节点对应的静态资源；通过调用预设的第二Native函数，将所述节点静态资源作为参数传入到所述第二Native函数中，以通过所述第二Native函数逐个渲染所述其他页面节点。

25.如权利要求24所述的装置，其特征在于，所述渲染模块，确定在执行所述指定操作时所述第一显示页面的节点集中显示状态由显示转化为隐藏的页面节点，释放所述页面节点的内存资源；将所述内存资源分配给所述其他页面节点对应的页面单元。

26.如权利要求25所述的装置，其特征在于，所述渲染模块，显示所述其他页面节点对应的页面单元；根据所述页面单元的数量，加载所述页面单元对应的页面模块。