CN114461214A - 一种页面显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种页面显示方法、装置、电子设备及存储介质。该方法包括：获取与接收到的页面显示请求相对应的待渲染代码片段；根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。本发明实施例的技术方案，实现了在加载的过程中，优先为用户显示目标页面的页面框架，并逐步向页面框架中补充细节内容，避免目标页面长时间处于白屏状态，提升了用户的体验。

Description

一种页面显示方法、装置、电子设备及存储介质

技术领域

本发明实施例涉及计算机技术，尤其涉及一种页面显示方法、装置、电子设备及存储介质。

背景技术

随着互联网技术和智能移动终端技术的快速发展，互联网技术被广泛应用于各个领域，用户可通过计算机或手机等智能终端在网页或APP的页面中浏览需要的信息。

然而，现有技术中通常都是采用基于JS驱动的前端框架完成对页面的开发，由于JS需要将所有的资源都下载到浏览器端并进行解析后才能为用户展示页面，在未完成解析之前页面会处于长时间的白屏状态。

发明内容

本发明提供一种页面显示方法、装置、电子设备及存储介质，以实现在进入显示页面时，可以快速显示页面相应内容的技术效果。

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

获取与接收到的页面显示请求相对应的待渲染代码片段；

根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

依据所述层级信息对相应待渲染代片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

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

待渲染代码片段获取模块，用于获取与接收到的页面显示请求相对应的待渲染代码片段；

目标页面框架确定模块，用于根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

子代码渲染模块，用于依据所述层级信息对相应待渲染代片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

第三方面，本发明实施例还提供了一种电子设备，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例任一所述的页面显示方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一所述的页面显示方法。

本发明通过获取与接收到的页面显示请求相对应的待渲染代码片段；根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。本发明通过上述技术方案，完成了对页面渲染代码的分割，并且根据渲染代码对应的各组件的层级信息对渲染代码中的子代码片段依次进行渲染，进而得到目标显示页面，便于用户在页面加载的过程中快速得到反馈，减少了页面处于白屏状态的时间，达到了可以快速显示页面相应内容的效果，提升了用户的操作体验。

附图说明

为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。

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

图2是本发明实施例一中提供的当前页面组件的结构示意图；

图3是本发明实施例二中提供的一种页面显示方法的流程示意图；

图4是本发明实施例二中提供的页面框架的结构示意图；

图5是本发明实施例二中提供的代码分割的运行机制的流程图；

图6是本发明实施例三中提供的一种页面显示装置的结构示意图；

图7是本发明实施例四中提供的一种电子设备的结构示意图。

具体实施方式

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

实施例一

图1为本发明实施例一所提供的一种页面显示方法流程示意图，本实施例可适用于根据页面显示请求对目标界面进行显示的情况，该方法可以由页面显示装置来执行，该装置可由硬件和/或软件组成，并一般可集成在手机、平板以及计算机等电子设备中。

如图1所示，本公开实施例一提供的一种页面显示方法，包括如下步骤：

S110、获取与接收到的页面显示请求相对应的待渲染代码片段；

其中，页面显示请求可以是展示目标页面的请求，待渲染代码片段可以是和目标页面相对应的代码片段，不同的目标页面可以对应不同的待渲染代码片段。具体的，页面显示请求可以是由用户通过触发显示界面上的交互按钮后，由终端设备根据用户触发的交互按钮发送对应的页面显示请求，或者是在用户启动应用程序时，由应用程序自行发送对应的页面显示请求，例如，当用户在页面触发该页面上的交互按钮时，交互按钮可以是但不限于页面上的“刷新”、“前进”和“返回”等，当用户想要返回上一界面时，用户通过触发页面上的“返回”按钮发出对应的页面显示请求，或者是当用户打开该应用程序时，由该应用程序自主发送页面显示请求。

具体的，在接收到页面请求之后，可以根据接收到的页面显示请求获取相对应的待渲染代码片段。其中，页面显示请求中可以携带有目标页面的相关信息，可以根据页面请求中携带的信息确定出页面请求对应的的待渲染代码片段。本实施例不对页面显示请求中的携带的信息以及根据信息确定目标页面的方法进行限定，本领域技术人员可以根据不同的需求自主确定页面显示请求中携带的信息以及根据该信息确定目标页面的方法，例如，目标页面页面的显示请求中携带了目标页面的域名信息，由浏览器对域名信息进行解析并查找本地存储空间中的对应规则，根据对应规则确定目标页面。

S120、根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

其中，组件可以是目标页面上的页面元素，层级信息可以是目标页面组件的嵌套层级信息，层级信息还可以是用来表示组件之间是否存在依附关系的信息，显示界面可以是用来显示目标页面的界面，目标页面框架可以是在页面数据加载完成前，为用户展示的页面占位图。

具体的，得到和页面显示请求对应的渲染代码片段后，可以根据待渲染代码片段对应的各组件的层级信息，得到显示在显示界面上的目标页面框架，在对目标页面进行加载时，可以根据各组件的层级信息提取到对应的的一级元素信息，例如，可以根据第一层级信息对应的组件提取对应的目标页面的一级元素信息，其中，一级元素信息可以是目标页面元素的位置、形状、尺寸等，进而可以根据一级元素信息形成目标页面框架，可以理解的是，目标页面的元素包括但不限于页面上的文字、图片、音频、动画、视频等。

在上述技术方案的基础上，所述在得到显示在显示界面上的目标页面框架后，可以根据所述待渲染代码片段的层级信息，对第一层级的子代码片段渲染处理，得到与目标显示页面相对应的目标页面框架。

可以理解的，本申请在得到显示在显示界面上的目标页面框架之后，根据待渲染代码片段的层级信息，直接对第一层级的子代码片段进行渲染，进而得到与目标显示界面对应的目标页面框架。上述方案实现了在页面显示的过程中根据层级信息在短时间内为用户显示一个页面框架，可以使用户尽快得到界面反馈，减少了用户处于白屏页面的时间。

S130、依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

其中，子代码片段可以是采用预设的方法将待渲染代码片段进行分割后得到的代码片段，目标显示页面可以是完成待渲染代码片段的渲染后，为用户展示的完整页面。

具体的，在根据待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架之后，根据层级信息对待渲染代码中的子代码片段进行渲染，可以理解的是，根据层级信息对代渲染代码中的子代码片段进行渲染可以是根据各组件的层级信息，优先对处于顶层的组件对应的待渲染代码中的子代码片段进行渲染，并将渲染结果更新至目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面，具体的，在完成对子代码片段的渲染后，将渲染的结果逐步补入到已经完成渲染的目标页面框架中，在完成了所有子代码片段的渲染后，即可得到完整的目标显示页面。

在上述技术方案的基础上，所述依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面还包括：

若依据所述层级信息，确定相应组件为独立组件或独立子组件，则对相应的子代码片段进行渲染处理，得到与所述独立组件或子组件相对应的框架信息；

若依据所述层级信息，确定相应组件为非独立组件或非独立子组件，则对相应的子代码片段进行渲染处理，得到相应组件相对应的细节信息；

将所述框架信息和所述细节信息更新至所述目标页面框架中，直至各子代码片段渲染完成，得到所述目标显示页面。

其中，独立组件可以是在页面中与其他组件不存在依附关系的组件，独立子组件可以是与其他子组件不存在依附关系的组件，相应的，非独立组件可以理解为与其他组件存在依附关系的组件，非独立子组件可以理解为与其他子组件存在依附关系的子组件。与独立组件或子组件相对应的框架信息可以是构成组件框架的信息，例如目标页面元素的位置、形状、尺寸等，细节信息可以是对非独立组件或非独立子组件的子代码片段进行渲染处理后得到的信息。

可以理解的是，上述实施例中的方法，在获取到与页面显示请求对应的带渲染代码后，根据待渲染代码对应的各组件的层级信息确定出目标页面的框架，由系统首先加载目标页面框架对应的代码片段，进而形成页面的框架，由于目标页面框架对应的代码量有限，因此代码的加载速度会很快，从而当用户访问系统时在很短时间内即可为给用户反馈，为用户渲染一个骨架页面，让用户预先了解系统的页面布局结构，减少用户的等待时间，消除首页白屏给用户的不良体验。

进一步的，在完成了目标页面框架的渲染之后，便可以逐步加载和渲染目标页面中的子组件信息，具体的，根据层级信息判断相应的组件是否为独立组件或独立子组件，当相应的组件为独立组件或独立子组件时，则优先得到与独立组件或独立子组件对应的框架信息，若对应的组件为非独立组件或非独立子组件时，则直接对相应的子代码片段进行渲染处理，进而得到相应组件对应的细节信息，并将得到的框架信息和细节信息更新到目标页面的框架中，直至各子代码片段渲染完成，得到目标显示页面。进而可以在显示页面的过程中逐级的完成页面的渲染，减少了页面加载所需的时间。

具体的，图2提供了当前页面组件的结构示意图，如图2所示，当需要对页面上的组件A进行渲染时，先对组件A内是否存在子组件进行判断，此时组件A内不存在子组件，因此，独立组件A的代码并未进行分割，可以直接对独立组件A的代码进行渲染；需要对页面上的组件B进行渲染时，同样对组件B内是否存在子组件进行判断，此时组件B内存在子组件b，因此，组件B的编译代码片段被分割为组件B的代码片段和子组件b的代码片段，此时优先对组件B的代码片段进行渲染，得到组件B的框架，在得到组件B的框架之后，在对子组件b的代码进行渲染，并将渲染结果填充到组件B的框架内。进而，在完成了对目标页面中所有组件代码的渲染后，就可以得到一个完整的目标页面。

本发明实施例一提供的技术方案，该方案通过获取与接收到的页面显示请求相对应的待渲染代码片段；根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。利用上述方法，可以在显示页面的过程中优先为用户显示页面的框架，并逐步向框架内填充其他组件的框架和细节内容，进而可以在短时间内为用户渲染一个页面，然后逐步细化页面细节，从而减少了用户的等待时间，避免页面长时间处于白屏状态，优化了用户的操作体验。

实施例二

图3为本发明实施例二中提供的一种页面显示方法的流程示意图。本实施例在上述实施例的基础上，进一步优化了上述页面显示方法。相应的，如图3所示，本实施例的方法具体包括：

确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，以在接收到页面显示请求时，基于相应的待使用层级信息对待渲染代码片段渲染处理，得到与页面显示请求相对应的目标显示页面。

其中，待显示页面可以是根据用户的选择确定的加载页面，也可以是预先设定的需要为用户进行展示的页面，可以理解的是，针对不同的待显示页面，其对应的待渲染代码片段也是不同的，因此需要根据不同的待显示页面获取对应的待渲染代码片段，并确定待渲染代码片段中各个组件的待使用层级信息，进而可以在接收到页面显示请求后，基于相应的待使用层级系信息对待渲染代码片段进行渲染处理，得到与页面显示请求相对应的目标显示页面。

在上述技术方案的基础上，所述确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，包括：

根据预先设置的页面划分规则，将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息。

其中，页面划分规则可以是根据页面组件的层级信息对待显示页面的待渲染代码进行划分，可以理解的是，待显示页面中可能存在多个处于同一层级的独立组件，针对不同的独立组件，将各独立组件分别分割至不同的自子代码片段中，进而可以得到多个子代码片段，并基于得到的多个子代码片段，确定出待渲染代码片段和各独立子组件相对应的待使用层级信息。

在上述技术方案的基础上，所述将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息，包括：

针对各独立组件，若当前独立组件中包括至少一个独立子组件时，将所述至少一个独立子组件分割至不同的与所述当前独立组件相关联的下一层级的子代码片段中，直至所述独立子组件中不包括独立子单元，得到与各独立组件相对应的待渲染代码片段，以及与各独立组件相对应的待使用层级信息；或，

针对各独立组件，若当前独立组件中包括至少一个独立子组件，且所述独立子组件所对应的层级为目标层级，则将与所述目标层级相关联的各独立子组件分割至与所述当前独立子组件相关联的下一层级的子代码片段中；

根据各子代码片段，确定所述待渲染代码片段，并记录各独立组件的待使用层级信息。

其中，目标层级可以是预先设置的层级信息，例如，用户可以根据具体的应用环境将目标层级设定为3级，则将独立组件中层级信息等于3级的独立子组件中的子组件分割到与当前独立子组件相关联的下一层级的子代码片段中。待使用层级信息可以是采取预设的方法为独立组件设置的层级信息。

本发明上述实施例通过在获取到各待展示页面的相对应的待渲染代码片段后，将得到的待渲染代码片段输入到预先设置的代码分割单元内，由代码分割单元根据预先设置的页面划分规则，将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并针对不同的独立组件，由代码分割单元对组件内是否包含子组件进行判断。进一步的，根据分割完成后得到的子代码片段，确定待渲染代码片段，并记录各独立组件的待使用层级信息。

具体的，图3提供了代码分割及渲染的流程图。如图3所示，包括如下环节：代码分割、代码编译、代码渲染。前端页面的代码首先在代码分割单元进行代码分割，之后输入到代码编译单元进行编译，最后编译后的代码在代码渲染单元进行渲染。具体的：

1、代码分割单元。根据页面元素结构进行代码分割，同一层的元素分割在同一段代码中，独立的子组件分别分割到不同的代码片段中。图4提供了页面框架的结构示意图，如图4所示，页面中用黑色矩形框圈住的区域为子组件，代码分割时，首页面对应的代码片段仅仅保存一级元素即黑色矩形框的位置、形状、尺寸等，并且各个子组件的代码分别分割到不同的代码片段中，如图4所示：组件1对应代码片段1，组件2对应代码片段2。

具体的，图5提供了代码分割的运行机制的流程图，如图5所示，首先，将前端代码组件输入到代码分割单元，先判定该组件内部是否包含子组件，如果不包含子组件，则不需进行任何代码分割处理；如果该组件内部包含子组件，则判定其子组件的等级是否是N级(其中N可以是目标层级，可以根据实际情况自行设置，一般情况下为3)以上的组件，如果是则该组件不再进行代码分割，和子组件一起作为一个整体进入到下一个单元；如果其子组件的等级不是N级以上的组件，则该组件需要进行代码分割，将子组件分割出来，并且按照以上循环继续判断分割出来的子组件是否还需要继续分割。

如果代码的所有子组件都通过了过滤和分割处理后，则将分割后的代码片段输入到代码编译单元。

2、代码编译单元。将通过代码分割单元分割得到的代码片段输入到代码编译单元进行编译，得到一系列编译后的代码。

3、代码渲染单元。代码渲染单元先将编译后的代码进行页面骨架的渲染，然后再进行页面细节的渲染。

(1)页面框架的渲染。系统首先加载首页一级元素对应的代码片段，形成系统首页面的框架。由于系统首页一级元素对应的代码量有限，因此代码的加载速度会很快，从而当用户访问系统时在很短时间内即可为给用户反馈，为用户渲染一个框架页面，让用户预先了解系统的页面布局结构，减少用户的等待时间，消除首页白屏给用户的不良体验。

(2)页面细节的渲染。当系统首页的框架渲染完成后，便可以逐步加载和渲染其子组件信息，进行页面细节的渲染，逐步丰富完善页面，当完成页面所有组件代码的渲染时，则完成了页面所有内容的渲染。

本发明实施例通过根据系统页面组件的组织结构对页面的代码进行分割，比以系统页面为单位对代码进行分割的方法更加合理，并且本发明中根据页面元素的组织结构对系统的代码进行分割，可以使代码分割的更加均衡，避免出现代码片段过长或者过短的情况。

在上述技术方案的基础上，所述基于各子代码片段，确定所述待渲染代码片段，包括：

基于预先设置的代码编译单元对各子代码片段进行编译处理，得到所述待渲染代码片段。

具体的，在获取到待显示页面中各组件对应的子代码片段之后，将子代码片段输入到预先设置的编译单元中，由编译单元对子代码片段进行编译处理后，得到待渲染代码片段。

本发明实施例二提供的技术方案，该方案通过确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，以在接收到页面显示请求时，基于相应的待使用层级信息对待渲染代码片段渲染处理，得到与页面显示请求相对应的目标显示页面；根据预先设置的页面划分规则，将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息；基于预先设置的代码编译单元对各子代码片段进行编译处理，得到所述待渲染代码片段。利用上述方法，可以根据页面上组件的组织结构对页面的代码进行分割，进而提升了代码分割时的合理性，可以将代码分割的更加均衡，进而提升了代码分割的效率。

实施例三

图5为本发明实施例三提供的一种页面显示装置的结构示意图，该装置包括：

待渲染代码片段获取模块61，用于获取与接收到的页面显示请求相对应的待渲染代码片段；

目标页面框架确定模块62，用于根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

子代码渲染模块63，用于依据所述层级信息对相应待渲染代片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

在上述技术方案的基础上，可选的是，所述页面显示装置包括：

层级信息确定模块60，用于确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，以在接收到页面显示请求时，基于相应的待使用层级信息对待渲染代码片段渲染处理，得到与页面显示请求相对应的目标显示页面。

在上述技术方案的基础上，可选的是，所述层级信息确定模块60用于：

根据预先设置的页面划分规则，将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息。

在上述技术方案的基础上，可选的是，所述层级信息确定模块60包括：

代码分割单元，所述代码分割单元用于针对各独立组件，若当前独立组件中包括至少一个独立子组件时，将所述至少一个独立子组件分割至不同的与所述当前独立组件相关联的下一层级的子代码片段中，直至所述独立子组件中不包括独立子单元，得到与各独立组件相对应的待渲染代码片段，以及与各独立组件相对应的待使用层级信息；或，

针对各独立组件，若当前独立组件中包括至少一个独立子组件，且所述独立子组件所对应的层级为目标层级，则将与所述目标层级相关联的各独立子组件分割至与所述当前独立子组件相关联的下一层级的子代码片段中；

根据各子代码片段，确定所述待渲染代码片段，并记录各独立组件的待使用层级信息。

在上述技术方案的基础上，可选的是，所述层级信息确定模块60包括：

代码编译单元，所述代码编译单元用于对各子代码片段进行编译处理，得到所述待渲染代码片段。

在上述技术方案的基础上，可选的是，所述目标页面框架确定模块62包括：

目标页面框架渲染单元，用于根据所述待渲染代码片段的层级信息，对第一层级的子代码片段渲染处理，得到与目标显示页面相对应的目标页面框架。

在上述技术方案的基础上，可选的是，所述子代码渲染模块63具体用于：

若依据所述层级信息，确定相应组件为独立组件或独立子组件，则对相应的子代码片段进行渲染处理，得到与所述独立组件或子组件相对应的框架信息；

若依据所述层级信息，确定相应组件为非独立组件或独立子组件，则对相应的子代码片段进行渲染处理，得到相应组件相对应的细节信息；

将所述框架信息和所述细节信息更新至所述目标页面框架中，直至各子代码片段渲染完成，得到所述目标显示页面。

本发明实施例所提供的页面显示装置可执行本发明任意实施例所提供的页面显示方法，具备执行方法相应的功能模块和有益效果。

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

实施例四

图7为本发明实施例四提供的一种电子设备的结构示意图。图7示出了适于用来实现本发明实施例实施方式的示例性电子设备70的框图。图7显示的电子设备70仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，电子设备70以通用计算设备的形式表现。电子设备70的组件可以包括但不限于：一个或者多个处理器或者处理单元701，系统存储器702，连接不同系统组件(包括系统存储器702和处理单元701)的总线703。

总线703表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备70典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备70访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器702可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)704和/或高速缓存存储器705。电子设备70可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统706可以用于读写不可移动的、非易失性磁介质(图7未显示，通常称为“硬盘驱动器”)。尽管图7中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线703相连。存储器702可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块707的程序/实用工具708，可以存储在例如存储器702中，这样的程序模块707包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块707通常执行本发明所描述的实施例中的功能和/或方法。

电子设备70也可以与一个或多个外部设备709(例如键盘、指向设备、显示器710等)通信，还可与一个或者多个使得用户能与该电子设备70交互的设备通信，和/或与使得该电子设备70能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口711进行。并且，电子设备70还可以通过网络适配器712与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器712通过总线703与电子设备70的其它模块通信。应当明白，尽管图7中未示出，可以结合电子设备70使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元701通过运行存储在系统存储器702中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的页面显示方法。

实施例五

本发明实施例五提供了一种包含计算机可执行指令的存储介质，其上存储有计算机可执行指令，该指令被处理器执行时实现上述实施例所提供的页面显示方法：

获取与接收到的页面显示请求相对应的待渲染代码片段；

根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

本发明实施例的包含计算机可执行指令的存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

Claims (10)

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

获取与接收到的页面显示请求相对应的待渲染代码片段；

根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

依据所述层级信息对相应待渲染代码片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

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

确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，以在接收到页面显示请求时，基于相应的待使用层级信息对待渲染代码片段渲染处理，得到与页面显示请求相对应的目标显示页面。

3.根据权利要求2所述的方法，其特征在于，所述确定与各待显示页面相对应的待渲染代码片段，并确定待渲染代码片段中各组件的待使用层级信息，包括：

根据预先设置的页面划分规则，将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息。

4.根据权利要求3所述的方法，其特征在于，所述将隶属于同一层级的各独立组件分别分割至不同的子代码片段中，得到多个子代码片段，并基于各子代码片段，确定所述待渲染代码片段和与各独立组件相对应的待使用层级信息，包括：

针对各独立组件，若当前独立组件中包括至少一个独立子组件时，将所述至少一个独立子组件分割至不同的与所述当前独立组件相关联的下一层级的子代码片段中，直至所述独立子组件中不包括独立子单元，得到与各独立组件相对应的待渲染代码片段，以及与各独立组件相对应的待使用层级信息；或，

针对各独立组件，若当前独立组件中包括至少一个独立子组件，且所述独立子组件所对应的层级为目标层级，则将与所述目标层级相关联的各独立子组件分割至与所述当前独立子组件相关联的下一层级的子代码片段中；

根据各子代码片段，确定所述待渲染代码片段，并记录各独立组件的待使用层级信息。

5.根据权利要求3所述的方法，其特征在于，所述基于各子代码片段，确定所述待渲染代码片段，包括：

基于预先设置的代码编译单元对各子代码片段进行编译处理，得到所述待渲染代码片段。

6.根据权利要求1所述的方法，其特征在于，所述根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架，包括：

根据所述待渲染代码片段的层级信息，对第一层级的子代码片段渲染处理，得到与目标显示页面相对应的目标页面框架。

7.根据权利要求1所述的方法，其特征在于，所述依据所述层级信息对相应待渲染代片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面，包括：

若依据所述层级信息，确定相应组件为独立组件或独立子组件，则对相应的子代码片段进行渲染处理，得到与所述独立组件或子组件相对应的框架信息；

若依据所述层级信息，确定相应组件为非独立组件或非独立子组件，则对相应的子代码片段进行渲染处理，得到相应组件相对应的细节信息；

将所述框架信息和所述细节信息更新至所述目标页面框架中，直至各子代码片段渲染完成，得到所述目标显示页面。

8.一种页面显示装置，其特征在于，包括：

待渲染代码片段获取模块，用于获取与接收到的页面显示请求相对应的待渲染代码片段；

目标页面框架确定模块，用于根据所述待渲染代码片段所对应的各组件的层级信息，得到显示在显示界面上的目标页面框架；

子代码渲染模块，用于依据所述层级信息对相应待渲染代片段中的子代码片段进行渲染，并将渲染结果更新至所述目标页面框架中，直至各子代码片段渲染完成，得到目标显示页面。

9.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的页面显示方法。

10.一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一所述的页面显示方法。

Images