CN111723314B - 网页展示方法、装置、电子设备及计算机可读存储介质 - Google Patents

Abstract

本申请提供了一种网页展示方法、装置、电子设备及计算机可读存储介质。该方法包括：接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面；调用初始化后的网络视图，根据客户端生成的页面生成界面图像并展示界面图像。本申请中，网络视图的初始化与客户端生成页面同时执行，减少了网络视图等待页面的时间，减少了客户端等待网络视图初始化过程的时间，充分利用了传统方法中的等待或空闲时间，且由于客户端在本地执行页面生成，简化与服务器端之间的交互，节省交互时间，从而整体上缩短了页面打开时间，有利于提升用户体验。

Description

网页展示方法、装置、电子设备及计算机可读存储介质

技术领域

本申请涉及网络技术领域，具体而言，本发明涉及一种网页展示方法、装置、电子设备及计算机可读存储介质。

背景技术

目前，智能手机、平板电脑和二合一电脑等电子设备已经广泛普及。用户通常通过这些电子设备来浏览网页。

现有的一种网页展示方法包括电子设备接收用户输入的针对某一网页的触发指令，调用WEBVIEW(即网络视图)通过DNS(Domain Name System，域名***)查找该网页所在服务端的真实IP(Internet Protocol address，互联网协议地址)地址，然后向该IP点至发送符合HTTP(超文本传输协议)的请求，请求获取该网页的HTML页面，电子设备与服务端经过数次握手后，服务端反馈所请求的HTML模板，此时WEBVIEW显示HTML模板(内容处为空白)；然后WEBVIEW通过javascript(一种直译式脚本语言)代码向服务端发送内容数据获取请求，又经过一系列握手之后，服务端反馈所请求的内容数据，WEBVIEW再把得到的内容数据渲染到HTML模板上，此时才显示出内容。

然而，本申请发明人发现，现有的网络展示方法从接收到网页触发指令到展示出包含具有内容的页面，耗时较长，效率低下。也就是说，利用现有的网络展示方法，用户从收入针对网页的触发指令开始，到真正看到填充有内容的网页时，往往需要一段较长时间(例如几秒)，导致用户体验低下。

发明内容

本申请提供了一种网页展示方法、装置、电子设备及计算机可读存储介质，可以解决现有技术的展示出包含内容的网页耗时较长的问题。技术方案如下：

第一方面，提供了一种网页展示方法，包括：

接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面；

调用初始化后的网络视图，根据客户端生成的页面生成界面图像并展示界面图像。

可选地，初始化网络视图并同时调用客户端生成页面，包括：

在初始化网络视图过程中开始调用客户端生成页面；

或者，在调用客户端生成页面的过程中开始初始化网络视图；

或者，开始初始化网络视图，并同时开始调用客户端生成页面。

可选地，调用客户端生成页面，包括：

当确认为客户端首次生成页面时，客户端获取预先存储的超文本传输协议HTML模板、客户端的第一JS文件和第一库JS文件；第一JS文件和第一库JS文件分别为支持客户端生成页面的业务JS文件和过程控制JS文件；

根据第一库JS文件和第一JS文件，从服务端设备获取网页的通用网关接口CGI数据并存储CGI数据；

根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页的HTML片段；

将HTML模板与首页的HTML片段进行合并，得到客户端生成的首屏页面，存储首屏页面并向网络视图输出。

可选地，存储CGI数据，包括：将CGI数据存储到电子设备的非易失性存储器中；

以及，存储首屏页面，包括：将首屏页面存储到电子设备的易失性存储器中；易失性存储器的输入输出接口速度大于非易失性存储器的输入输出接口速度；

以及，向网络视图输出之后，还包括：调用网络视图获取预先存储的网络视图JS文件，并通过执行网络视图JS文件，从网络重新获取CGI数据，并更新已存储的CGI数据。

可选地，调用客户端生成页面，包括：

当确认为客户端的非首次生成页面时，调用客户端中已获取到的第一库JS文件直接读取已存储的CGI数据；

根据已获取到的第一库JS文件、第一JS文件和所读取的CGI数据，在客户端的生成页面环境下生成当前其它页面的HTML片段；其它页面为首屏页面之外的页面；

将HTML模板与当前其它页面的HTML片段进行合并，得到客户端生成的当前其它页面，存储当前其它页面并向网络视图输出。

可选地，第一方面的网页展示方法还包括：

当网络视图初始化完毕、且客户端的当前其它页面还未生成页面完毕时，调用网络视图读取已存储的上一个其它页面生成界面图像并展示。

可选地，根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页或当前其它页面的HTML片段，包括：

根据第一库JS文件、以及生成页面环境中第一JS文件的依赖文件中的vue函数，对CGI数据进行处理，得到vue实例；根据vue实例生成虚拟节点树；根据依赖文件中的渲染至字符串函数，将虚拟节点树同步转换成HTML片段。

可选地，在调用客户端生成页面之前，还包括：

移除原生JS文件的依赖文件的下述各项，得到第一JS文件的依赖文件：数据观测和观察模块、移除异步队列、以及虚拟节点树生成文档节点的接口。

可选地，第一JS文件包括基于vue框架的第一JS文件；以及基于vue框架的第一JS文件是通过下述方法预先构建的：

将包含业务代码的vue文件转换成JS格式的主文件；

从主文件中拆分出客户端入口构建文件；

利用构建工具，将客户端入口构建文件，编译为可执行的第一JS文件；

构建工具包括vue转换器和vue样式转换器，vue转换器中包括支持客户端生成页面的二进制代码，vue样式转换器中的内联CSS逻辑和***虚拟节点树节点操作的二进制代码都已被屏蔽。

可选地，将包含业务代码的vue文件转换成JS格式的主文件，包括：

当vue文件中存在表征非客户端生成逻辑的字符串时，屏蔽该字符串对应的非客户端生成页面的源代码；将屏蔽非客户端生成页面的源代码后的vue文件，转换成JS格式的主文件；

当vue文件中不存在表征非客户端生成逻辑的字符串时，直接将vue文件转换成JS格式的主文件。

可选地，确认为客户端的首次生成页面之前，还包括：

确认客户端是否具备生成页面环境，生成页面环境包括生成JS内核、生成软件工具包SDK、以及包含第一JS文件和第一库JS文件的内容分发网络CDN或离线包；生成JS内核为支持客户端生成页面的JS内核；生成SDK为支持客户端生成页面的SDK；

当确认客户端不具备生成页面环境时，切换为向服务端设备依次请求网页对应的HTML模板和CGI数据。

第二方面，提供了一种网页展示装置，包括：

处理模块，用于接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面。

展示模块，用于调用初始化后的网络视图，根据客户端生成的页面生成界面图像并展示界面图像。

可选地，处理模块具体用于在初始化网络视图过程中开始调用客户端生成页面；或者，在调用客户端生成页面的过程中开始初始化网络视图；或者，开始初始化网络视图，并同时开始调用客户端生成页面。

可选地，本申请实施例中，网页展示装置的处理模块包括：初始化单元和生成单元。

初始化单元，用于接收到针对网页的触发指令时，初始化网络视图。

生成单元，用于接收到针对网页的触发指令时，调用客户端生成页面。

可选地，生成单元具体用于当确认为客户端首次生成页面时，客户端获取预先存储的HTML模板、客户端的第一JS文件和第一库JS文件；第一JS文件和第一库JS文件分别为支持客户端生成页面的业务JS文件和过程控制JS文件；根据第一库JS文件和第一JS文件，从服务端设备获取网页的CGI数据并存储CGI数据；根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页的HTML片段；将HTML模板与首页的HTML片段进行合并，得到客户端生成的首屏页面，存储首屏页面并向网络视图输出。

可选地，生成单元具体用于将CGI数据存储到电子设备的非易失性存储器中；以及，将首屏页面存储到电子设备的易失性存储器中；易失性存储器的输入输出接口速度大于非易失性存储器的输入输出接口速度；以及，向网络视图输出之后，调用网络视图获取预先存储的网络视图JS文件，并通过执行网络视图JS文件，从网络重新获取CGI数据，并更新已存储的CGI数据。

可选地，生成单元具体用于当确认为客户端的非首次生成页面时，调用客户端中已获取到的第一库JS文件直接读取已存储的CGI数据；根据已获取到的第一库JS文件、第一JS文件和所读取的CGI数据，在客户端的生成页面环境下生成当前其它页面的HTML片段；其它页面为首屏页面之外的页面；将HTML模板与当前其它页面的HTML片段进行合并，得到客户端生成的当前其它页面，存储当前其它页面并向网络视图输出。

可选地，生成单元还用于当网络视图初始化完毕、且客户端的当前其它页面还未生成页面完毕时，调用网络视图读取已存储的上一个其它页面生成界面图像并展示。

可选地，生成单元具体用于根据第一库JS文件、以及生成页面环境中第一JS文件的依赖文件中的vue函数，对CGI数据进行处理，得到vue实例；根据vue实例生成虚拟节点树；根据依赖文件中的渲染至字符串函数，将虚拟节点树同步转换成HTML片段。

可选地，本申请实施例中，网页展示装置还包括：设置优化模块。

设置优化模块，用于在调用客户端生成页面之前，移除原生JS文件的依赖文件的下述各项，得到第一JS文件的依赖文件：数据观测和观察模块、移除异步队列、以及虚拟节点树生成文档节点的接口。

可选地，设置优化模块还用于通过下述方法预先构建基于vue框架的第一JS文件：将包含业务代码的vue文件转换成JS格式的主文件；从主文件中拆分出客户端入口构建文件；利用构建工具，将客户端入口构建文件，编译为可执行的第一JS文件；构建工具包括vue转换器和vue样式转换器，vue转换器中包括支持客户端生成页面的二进制代码，vue样式转换器中的内联CSS逻辑和***虚拟节点树节点操作的二进制代码都已被屏蔽。第一JS文件包括基于vue框架的第一JS文件。

可选地，设置优化模块具体用于当vue文件中存在表征非客户端生成逻辑的字符串时，屏蔽该字符串对应的非客户端生成页面的源代码；将屏蔽非客户端生成页面的源代码后的vue文件，转换成JS格式的主文件；当vue文件中不存在表征非客户端生成逻辑的字符串时，直接将vue文件转换成JS格式的主文件。

可选地，生成模块还用于确认为客户端的首次生成页面之前，确认客户端是否具备生成页面环境，生成页面环境包括生成JS内核、生成SDK、以及包含第一JS文件和第一库JS文件的CDN或离线包；生成JS内核为支持客户端生成页面的JS内核；生成SDK为支持客户端生成页面的SDK；当确认客户端不具备生成页面环境时，切换为向服务端设备依次请求网页对应的HTML模板和CGI数据。

第三方面，提供了一种电子设备，包括：

处理器、存储器和总线；

总线，用于连接处理器和存储器；

存储器，包括非易失性存储器和易失性存储器，非易失性存储器用于存储操作指令；

处理器，用于通过调用操作指令至易失性存储器，执行第一方面中任一项提供的网页展示方法。

第四方面，提供了一种计算机可读存储介质，存储介质存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如第一方面中任一项提供的网页展示方法。

本申请实施例提供的技术方案带来的有益效果是：

本申请实施例中，网络视图的初始化与客户端生成页面同时执行，对于网络视图而言大大减少了等待页面生成的时间，对于生成页面这个步骤而言大大减少了等待网络视图初始化过程的时间，充分利用了传统方法中的等待或空闲时间，而且由于页面的生成在客户端本地执行，节省了向服务端设备请求页面和返回页面的步骤，简化了交互，节省了交互时间，缩短了从接收到针对网页的触发指令到展示包含页面的界面图像的整个过程所需时间，即从而整体上缩短了页面打开时间，尤其可以大大缩短首屏页面打开时间，可以接近或达到零白屏的体验，让用户打开页面的体验更加接近在客户端本地直接生成并打开页面的体验，有利于提升用户体验及提高用户留存率。白屏即为显示了HTML框架但是框架中的内容处为空白。

而且，本申请实施例中，页面的生成是在电子设备的客户端本地实施的，减少了对服务端设备和网络的依赖，而且客户端本地生成页面充分利用了电子设备(例如移动设备)中客户端的原生性能，不需要使用额外的服务端设备，不需要后台的服务端方案，降低了服务端设备成本和运维成本，降低了接入成本。对于开发人员而言，实现客户端生成页面对电子设备一端的软件改造成本比较小，且不需要额外的服务端的软件开发。

本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1a为本申请一个实施例提供的一种网页展示***的架构示意图；

图1b为本申请一个实施例提供的一种电子设备的部分软件架构示意图；

图2为本申请另一个实施例提供的一种网页展示方法的流程示意图；

图3为本申请另一个实施例提供的网页展示方法的一个示例的原理示意图；

图4为现有技术的Vue服务端生成函数renderToString的原理流程图；

图5为本申请又一个实施例提供的构建客户端JS文件和网络视图JS文件的原理示意图；

图6为本申请又一个实施例提供的vue文件中通过字符串注解方式区分是否为客户端生成页面的源代码的原理示意图；

图7为本申请又一个实施例提供的网页展示方法的一个示例的整体构架原理示意图；

图8a和图8b分别为本申请又一个实施例提供的触发页面和首屏页面的一个实例的示意图；

图8c和图8d分别为本申请又一个实施例提供的触发页面和首屏页面的又一个实例的示意图；

图9a为本申请又一个实施例提供的未接入本地客户端生成页面的多个首屏时间实例的推移示意图；

图9b为本申请又一个实施例提供的接入本地客户端生成页面的多个首屏时间实例的推移示意图；

图10为本申请还一个实施例提供的一种电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

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

本申请的发明人注意到，存在一种基于服务端生成页面的网页展示方法。服务端生成页面的过程主要是在服务端设备请求页面数据和页面资源，在服务端设备合成包含内容数据的页面(例如首屏页面)输出。服务端设备中安装有服务端。

具体地，电子设备接收到用户输入的触发网页的指令时，先启动网络视图，再去向服务端设备发送页面请求；服务端设备根据页面请求，生成页面返回，电子设备接收到服务端设备生成的页面后在网络视图展示，此时页面内容可见。

然后，这种基于服务端生成页面的网页展示方法包括下述缺陷之一：

1、网络视图初始化过程和服务端生成页面过程的时间浪费：一方面，在网络视图初始化完毕后才发起请求加载页面，该初始化过程中服务端设备和网络处于等待状态，依赖网络且又未合理利用网络的空闲；另一方面，在服务端生成页面并返回的过程中，电子设备端的网络视图也一直在等待。

2、改造成本过大：服务端生成页面不仅需要改造业务代码，还要对服务端设备(例如服务器)进行开发改造，并约定新的请求头和响应头来确保缓存策略的正常运作。

3、服务端生成页面不便于缓存页面相关数据，又无法利用电子设备中已缓存的其它软件的离线包。离线包是提前将一些资源文件下载到本地的非易失性存储器，例如SD卡，无需接入网络也可以随时访问的资源文件。

4、运维成本较高：需要搭建服务端后台，要考虑服务端设备的负载和开销等问题，接入成本较高，维护成本高。

本申请提供的网页展示方法、装置、电子设备和计算机可读存储介质，旨在解决现有技术的如上技术问题。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

本申请的一个实施例提供了一种网页展示***，如图1a所示，该***包括：电子设备和服务端设备。

电子设备通过网络与服务端设备电连接。本申请实施例中的网络可以包括互联网和移动通信网络中的至少一种；互联网可以包括局域网。

电子设备具有联网、输入输出和显示等功能，电子设备可以是终端类设备，例如电子设备可以是台式电脑、智能手机或平板电脑等设备。

电子设备可以通过局域网接入网络，也可以通过移动通信网络接入网络。例如，电子设备可以通过WiFi(Wireless Fidelity，无线保真)局域网接入互联网。再如，电子设备可以通过3G(3rd-Generation wireless telephone technology，第三代手机通信技术)、LTE(Long Term Evolution，长期演进)等移动通信网络接入互联网。

服务端设备可以是单台服务器、服务器集群和分布式服务器中的至少一种。服务端设备可以以有线的方式接入网络。例如，服务端设备通过光纤接入互联网的广域网或者主干网。

可选地，本申请实施例的网页展示***中，电子设备可以是单个或多个，每个电子设备用于实施本申请实施例后续提供的网页展示方法，具体方法在后续详解介绍，此处不赘述；电子设备中安装有网络视图和客户端。可选地，如图1b所示，客户端是应用程序，主要用于在电子设备本地生成页面；网络视图是应用程序，主要用于在电子设备本地，根据客户端生成的页面生成界面图像，并展示界面图像。例如，电子设备可以是智能手机，客户端可以是安装在智能手机中的应用程序A，网络视图可以是安装在智能手机中的浏览器、或应用程序B中内嵌的具有浏览功能的插件。

服务端设备中安装有服务端，用于提供支持电子设备实施网页展示方法的资源，例如网页页面的CGI(Common Gateway Interface，通用网关接口)数据、离线包或CDN(Content Delivery Network，内容分发网络)数据文件等。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

本申请的另一个实施例中提供了一种网页展示方法，该方法的流程示意图如图2所示，包括下述步骤：

S201：接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面。

可选地，本申请中，电子设备中安装有网络视图和客户端。电子设备接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面。

可选地，初始化网络视图并同时调用客户端生成页面，包括：在初始化网络视图过程中开始调用客户端生成页面；或者，在调用客户端生成页面的过程中开始初始化网络视图；或者，开始初始化网络视图，并同时开始调用客户端生成页面。

S202：调用初始化后的网络视图，根据客户端生成的页面生成界面图像并展示界面图像。

具体地，本申请的电子设备调用初始化后处于运行状态的网络视图，根据客户端生成的页面生成界面图像，并展示所生成的界面图像。

本申请实施例中，网络视图的初始化与客户端生成页面同时执行，对于网络视图而言大大减少了等待页面生成的时间，对于生成页面这个步骤而言大大减少了等待网络视图初始化过程的时间，充分利用了传统方法中的等待或空闲时间，而且由于页面的生成在客户端本地执行，节省了向服务端设备请求页面和返回页面的步骤，简化了交互，节省了交互时间，缩短了从接收到针对网页的触发指令到展示包含页面的界面图像的整个过程所需时间，即整体上缩短了页面打开时间，尤其可以大大缩短首屏页面打开时间，可以接近或达到零白屏的体验，让用户打开页面的体验更加接近在客户端本地直接生成并打开页面的体验，有利于提升用户体验及提高用户留存率。白屏即为显示了HTML框架但是框架中的内容处为空白。

而且，本申请实施例中，页面的生成是在电子设备的客户端本地实施的，减少了对服务端设备和网络的依赖，而且客户端本地生成页面充分利用了电子设备(例如移动设备)中客户端的原生性能，不需要使用额外的服务端设备，不需要后台的服务端方案，降低了服务端设备成本和运维成本，降低了接入成本。对于开发人员而言，实现客户端生成页面对电子设备一端的软件改造成本比较小，且不需要额外的服务端的软件开发。

下面以同时开始执行网络视图初始化和客户端生成页面为例，介绍一下本申请实施例的网页展示方法的一个示例。

具体地，如图3所示，用户click(点击)页面入口后，电子设备接收到用户输入的触发指令，电子设备在init(初始化)webview(网络视图)的内核的同时，向客户端发送页面request(请求)，通过客户端的生成页面环境的中间层并行启动子线程去请求页面数据，并在客户端生成包含内容数据的首屏html页面，等webview内核初始化完成之后，直接根据客户端生成的首屏html页面，生成page(界面图像)，此时页面内容可见。通过同时开始执行网络视图初始化和客户端生成页面的并行加载方式，缩短了电子设备的初始化耗时，缩短了页面加载的总耗时。

下面介绍本申请又一个实施例，本实施例中提供了网页展示方法的另一种可能的实现方式。具体地，提供了一种基于客户端生成页面的网页展示方法。

可选地，在执行基于客户端生成页面的网页展示方法之前，提供支持客户端进行页面生成的生成页面环境。

生成页面环境包括生成JS内核、生成SDK(Software Development Kit，软件工具包)、以及包含第一JS文件和第一库JS文件的CDN或离线包。生成JS内核为支持客户端生成的JS内核；生成SDK为支持客户端生成的SDK。

可选地，对客户端的生成页面环境中生成JSCore(JavaScript Core，直译式脚本语言内核)环境进行适配。

具体地，实现客户端生成页面需要客户端本地提供JS执行环境，保证本地生成页面逻辑的运行。对JSCore进行下述几个改进点：

1、基于客户端提供在JSCore调用客户端方法的底层函数(CallNative函数)，上层适配了调试输出函数(console.log函数)、计时器(setTimeout函数)等等。

2、基于计时器(setTimeout)，适配出了一个用于异步编程的函数(Promise)，解决异步编程的回调嵌套问题。Promise是JavaScript编程语言上层提供的一个函数，是一个抽象异步处理对象以及对其进行各种操作的组件。

3、基于异步编程的函数(Promise)封装了读写缓存的函数、以及HTTP(HyperTextTransfer Protocol，超文本传输协议)请求函数等等。

4、关于Cookie的读取，通过反调客户端提供的接口获取完毕之后存储在全局上下文中。Cookie是web网站为了辨别用户身份而储存在作为用户本地终端的电子设备上的数据。

可选地，对生成环境中框架层进行适配。

对于使用原生JS开发的页面，不需要适配生成render转换函数即可接入客户端本地生成页面。而对于使用框架开发的页面，如基于Vue(一套用于构建用户界面的渐进式框架)或ReactJs(用于用户界面构建的Javascript库)等框架的页面，需要开发人员适配出生成render转换函数，通过该render函数将页面实例转换成html字符串。

下面介绍客户端生成页面环境中涉及的对离线包的利用。

可选地，客户端生成页面能较为充分地利用电子设备中某些软件(例如移动版通信软件)的离线包。由服务端设备下发离线包，离线包中携带有客户端生成页面需要用到的JS文件和HTML模板文件等数据，将客户端生成页面需要用到的JS文件和HTML模板文件，存储在电子设备本地的非易失性存储器(例如SD卡)中。当离线包下发到用户的电子设备之后，电子设备无需从服务端设备获获取资源文件，获取CGI数据就可以生成页面。

可选地，客户端生成页面包括客户端首次生成页面和非首次生成页面。非首次生成页面又可以称为二次生成页面。

可选地，在电子设备确认为客户端的首次生成页面之前，还包括：确认客户端是否具备生成页面环境，生成环境包括生成JS内核、生成SDK、以及包含第一JS文件和第一库JS文件的CDN或离线包；当确认客户端不具备生成页面环境时，切换为向服务端设备依次请求网页对应的HTML模板和CGI数据。

此外，本申请的客户端的生成页面环境支持降级。例如，如果移动版通信软件中没有生成页面环境中的生成SDK，或者用户的电子设备中不存在生成JS离线包，那么该页面降级为普通的(即非客户端生成的)WEB页面，执行背景技术中传统的网页展示方法，或利用服务端生成页面生成界面图像进行展示。这样可以避免版本冲突或离线包覆盖率的问题导致页面加载失败。

下面重点介绍针对网页的触发指令时，电子设备调用客户端生成页面的内容。客户端生成页面包括客户端首次生成页面和非首次生成页面。非首次生成页面又可以称为二次生成页面。

可选地，电子设备调用客户端生成页面包括：当电子设备确认为客户端首次生成页面时，客户端获取预先存储的HTML模板、客户端的第一JS文件和第一库JS文件；第一JS文件和第一库JS文件分别为支持客户端生成页面的业务JS文件和过程控制JS文件。

过程控制JS文件中包括客户端生成页面过程中多个框架性步骤对应的二进制代码；每个框架性步骤的二进制代码被执行时，会调用包含该框架性步骤对应的具体步骤内容的业务JS文件。过程控制JS文件类似于母程序，业务JS文件类似于母程序中一个步骤所链接的子程序。

业务JS文件包括JS bundle(批)文件。第一库JS文件包括执行过程的逻辑代码，用于对业务JS文件等进行处理。

电子设备中的客户端根据第一库JS文件和第一JS文件，从服务端设备获取网页的CGI数据并存储CGI数据。

电子设备中的客户端根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页的HTML片段。

电子设备中的客户端将HTML模板与首页的HTML片段进行合并，得到客户端生成的首屏页面，存储首屏页面并向网络视图输出。

可选地，电子设备调用客户端生成页面，包括：当电子设备确认客户端为非首次生成页面时，电子设备中的客户端调用客户端中已获取到的第一库JS文件直接读取已存储的CGI数据。

电子设备中的客户端根据已获取到的第一库JS文件、第一JS文件和所读取的CGI数据，在客户端的生成页面环境下生成当前其它页面的HTML片段；其它页面为首屏页面之外的页面。

电子设备中的客户端将HTML模板与当前其它页面的HTML片段进行合并，得到客户端生成的当前其它页面，存储当前其它页面并向网络视图输出。

本申请实施例中，与客户端首次生成页面不同的是，客户端二次生成页面，即非首次生成页面时，直接从电子设备的缓存中读取数据，不需要通过网络从服务端设备请求获取新数据，大大减少了网络耗时，从而大大加快了基于客户端二次生成页面的网页展示速度。

可选地，本申请实施例中采用了多级缓存策略。客户端将CGI数据存储到电子设备的非易失性存储器中，将客户端生成的页面(包括首屏页面和非首屏页面)都存储到电子设备的易失性存储器中。易失性存储器的输入输出接口速度大于非易失性存储器的输入输出接口速度。

可选地，易失性存储器具体可以为内存，内存包括内存级别的缓存池，非易失性存储器包括闪存、外接U盘、SSD(Solid State Disk，固态硬盘)或机械硬盘等，闪存包括SD(Secure Digital memory，安全数字存储)卡。

可选地，电子设备调用客户端存储CGI数据，包括：客户端将CGI数据存储到非易失性存储器中；电子设备调用客户端存储首屏页面，包括：客户端将首屏页面存储到易失性存储器中；电子设备调用客户端向网络视图输出之后，还包括：电子设备调用网络视图获取预先存储的网络视图JS文件，并通过执行网络视图JS文件，从网络重新获取CGI数据，并更新已存储的CGI数据。

具体地，1)介绍CGI数据的存储方式

电子设备调用客户端首次进行本地生成页面时，会通过网络请求获取CGI数据，之后会把CGI数据存储在SD卡之中。当客户端生成页面完毕把页面输出给webview进行界面图像生成之后，会重新获取CGI进行数据更新页面，同时再更新SD卡中存储的数据。

客户端二次生成页面时，数据从SD卡中获取，因为数据已经被更新过，所以可以最大限度的保证客户端生成页面是最新的，而不需要通过网络从服务端设备重新请求数据。

2)介绍客户端生成的页面的存储方式

客户端生成的页面会存储在一个内存级别的缓存池中。

可选地，本申请实施例基于客户端生成页面的网页展示方法，还包括：当网络视图初始化完毕、且客户端的当前其它页面还未生成页面完毕时，电子设备调用网络视图读取已存储的上一个其它页面生成界面图像并展示界面图像，大大降低白屏的几率。

具体地，客户端二次生成页面时，如果客户端生成页面的耗时大于webview的初始化时间，那么webview可以直接取缓存池中的页面进行显示，而无需等待生成页面完毕，可以避免因等待生成页面完毕而造成的白屏。当二次生成页面完毕之后，更新已存储的页面。

可选地，本申请中，对JS文件的依赖文件包进行减包优化。

可选地，本申请中，在调用客户端生成页面之前，还包括：移除原生JS文件的依赖文件的下述各项，得到第一JS文件的依赖文件：数据观测和观察模块、异步队列、以及虚拟节点树生成文档节点的接口。

上文简单介绍过客户端生成页面环境中框架层的适配。本申请中，可以利用任意一种web前端，即webview，的JS文件，实现在客户端生成页面，既支持原生JS文件进行客户端生成页面，也支持多种框架的JS文件进行客户端生成页面。Web前端的JS框架包括多种，例如包括Vue框架、artTempate框架或ReactJS框架等。下面以基于Vue框架的页面为例，介绍支持使用框架开发的页面进行客户端生成页面的一些改进。

首先介绍客户端生成页面的核心函数renderToString的改造。

可选地，支持客户端生成页面的Vue框架的renderToString(渲染至字符串)函数，迁移自Vue服务端生成页面的核心库函数。Vue服务端生成页面的renderToString流程如图4所示，图4中服务端设备利用渲染函数_render将Vue Instance(实例)转换为虚拟节点数vdom，利用虚拟节点树转换函数patchNode将vdom转换为文档片段html-string，接着根据文档模板Html Template和文档片段html-string(html片段)，生成合成文档Compound，Compound包括head(头部)、style(样式)和script(脚本)，然后输出结果，即OutputResult。patchNode函数的处理过程中包括使用Node异步API的过程。

本申请的发明人经过研究发现，由于Vue服务端生成页面的过程强依赖于Node环境，调用了大量的Node特有API(Application Programming Interface，应用程序编程接口)，如调用底层文件读写接口用于处理文档片段html-string与文档模板Html Template的结合、对于多节点的虚拟Dom使用Node异步API进行处理。

在本申请的客户端生成页面的过程中，上述处理都是不需要的。也就是说，本申请中只需要获得作为客户端生成结果的html字符串即可。对于文档模板Html Template的拼接，可以由在底层封装的一个函数进行处理。对于CSS(Cascading Style Sheets，流样式表)，由于在客户端生成页面的过程中处理CSS是无意义的，开发人员通过打包工具从JS文件中分离出CSS，在生成文档模板Html Template时，将对应页面的JS的CSS内联至HtmlTemplate，可以减少第一JS文件的大小。CSS是一种用来表现HTML或XML等文件样式的计算机语言。HTML是标准通用标记语言的一个应用；XML是标准通用标记语言的一个子集。

其次介绍基于Vue框架的JS文件的依赖文件包的减包优化。

可选地，本申请中，Vue框架的JS文件，即Vue.js。基于vue框架的第一JS文件的依赖文件是通过下述方法得到的：电子设备移除原生JS文件的依赖文件的下述各项，得到第一JS文件的依赖文件：数据观测和观察模块、移除异步队列、以及虚拟节点树生成文档节点的接口。可见，本申请中在不影响客户端生成基于vue框架的页面的情况下，减少了JS文件的依赖文件的数量和规模，既提升了生成页面的效率，又减少所占存储空间。

具体地，1)移除数据观测(Observe)和观察者(Watcher)：由于客户端生成页面的过程中只需要数据的快照(快照指网页或页面在某一时刻的数据)，并不需要检测数据的变化，因此本申请中把观测数据有关的模块都去掉了，把数据的存取修改为简单的取值和赋值操作。

2)移除异步队列：基于同样的原理，由于客户端生成的页面只是一个快照，只需要获取(某一时刻的)最终的数据。对于中间过程数据发生了什么变化都无需关注，因此也就不需要一个异步的队列来处理数据变化了。

3)移除vdom大部分接口：由于客户端生成页面的过程中，生成html字符串使用的是renderToString，因此，通过虚拟DOM生成文档document节点的接口都不再适用，这一部分也就不需要了。

可选地，本申请基于vue框架的第一JS文件的依赖文件可以包括后续图7中处于右下的***文件、javescript执行环境的二进制文件和其它执行文件等，此处不再赘述。

可选地，本申请中，电子设备根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页或当前其它页面的HTML片段，包括：电子设备中的客户端根据第一库JS文件、以及生成页面环境中第一JS文件的依赖文件中的vue函数，对CGI数据进行处理，得到vue实例；根据vue实例生成虚拟节点树；根据依赖文件中的renderTOString函数，将虚拟节点树同步转换成HTML片段。可见，本申请中在不影响客户端生成基于vue框架的页面的情况下，精简了转换成HTML片段的步骤流程，大大提升了客户端生成页面效率。

接着介绍基于vue框架的第一JS文件的构建打包和区分代码的改进。

可选地，本申请中，第一JS文件包括基于vue框架的第一JS文件；以及基于vue框架的第一JS文件是通过下述方法预先构建的：将包含业务代码的vue文件转换成JS格式的主文件；从主文件中拆分出客户端入口构建文件；利用构建工具，将客户端入口构建文件，编译为可执行的第一JS文件；构建工具包括vue转换器和vue样式转换器，vue转换器中包括支持客户端生成页面的二进制代码，vue样式转换器中的内联CSS逻辑和***虚拟节点树节点操作的二进制代码都已被屏蔽。

可选地，如图5所示，图5中网络视图具体为浏览器，为了支持移动客户端生成页面，进行代码编译构建时，需要通过构建工具构建出两份JS文件，分别为客户端JS文件和网络视图JS文件。客户端JS文件包括本申请上述客户端的第一JS文件。

源文件Source框内，业务代码Universal Application Code包括路由Router和组件Components。将组件Components，即.vue文件，转换成主文件app.JS，从主文件中拆分出客户端入口构建文件Viola client entry和浏览器入口构建文件Browser entry。

构建工具构建的核心是两个代码编译转换器，分别是vue-viola-loader(vue转换器)和vue-viola-style-loader(vue样式转换器)，它们会将源自.vue文件的客户端入口构建文件和浏览器入口构建文件，分别编译成客户端JS文件Viola client Bundle和浏览器JS文件Browser Bundle，客户端JS文件和浏览器JS文件都是可执行的JS文件。

本设备中通过改造vue-loader中编译成生成页面的二进制代码，以及对vue-style-loader的内联CSS逻辑和***DOM节点操作的二进制代码进行屏蔽，统一样式哈希值的规则，生成的新的vue-viola-loader和vue-viola-style-loader。DOM是W3C文档对象模型，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。哈希值是散列函数从任何一种数据中创建的字符串。散列函数是一种能够从任何一种数据中创建字符串的方法。

然后，构建工具Webpack bulid(编译构建)出的移动客户端的JS文件用于支持移动客户端生成页面。具体地，客户端JS文件属于生成客户端环境Viola Client，客户端JS文件中包含文件内渲染函数Bundle Renderer，用于Render渲染出HTML页面。编译构建出的浏览器JS文件用于对HTML页面文档片段的Hydrate(融合)和交互的管理。webpack是前端资源加载和打包工具，它将根据前端模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

可见，为了支持本申请的客户端生成页面的方法，对于开发人员而言，客户端生成页面的代码改造成本比较小，无需额外的服务端设备和服务端的开发，完成网络视图端代码和客户端代码的区分，就可以让包括各JS文件的同一套代码在多个电子设备上运行，即实现同一套代码多端运行，可移植性增强，适用面更广。

可选地，将包含业务代码的vue文件转换成JS格式的主文件，包括：

当vue文件中存在表征非客户端生成逻辑的字符串时，屏蔽该字符串对应的非客户端生成页面的源代码；将屏蔽非客户端生成页面的源代码后的vue文件，转换成JS格式的主文件；

当vue文件中不存在表征非客户端生成逻辑的字符串时，直接将vue文件转换成JS格式的主文件。

可见，本申请的客户端生成页面适用于同一套代码多端运行，提高页面性能的同时节省了开发和运维成本。

具体地，在打包构建时，通过字符串注解的方式区分客户端生成页面的源代码和非客户端生成页面的源代码。例如，如图6所示，在同一个.vue文件中，通过字符串注解的方式(/*not in viola{*/)来区分是否为移动客户端生成页面的源代码，使得一个.vue文件能够同时在客户单生成页面和非客户端生成页面的方案中使用。“假定该块为web侧执行原代码，非移动客户端生成原代码”这段字符串注解表明，对应的该块源代码为非客户端生成原代码，而是web侧执行原代码，例如，包括向服务端设备请求数据的源代码，所请求的数据包括HTML模板和CGI数据等)。可选地，在构建工具打包构建时，通过指定构建变量，利用前置加载器屏蔽不需要的原代码。

可选地，本申请中还对JS文件加载模式进行了改进，采用了单例模式动态加载JS文件。

具体地，在客户端生成页面的过程中，底层的方法和客户端生成页面方法被抽离行成一个静态JS文件，例如本申请中的第一库JS文件，电子设备预先加载该静态JS文件。对于业务JS文件，例如本申请中的第一JS文件，客户端通过动态加载的方式来执行，并且通过自行计数的方式，当计数达到阀值时，销毁当前的上下文。JS文件在JSCore下执行的时候，会有对应的执行环境，这个执行环境就称为当前JS的上下文。使用这种方式，既可以减少核心库JS的文件I/O(Input Output，输入输出)和初始化执行时间，又可以避免内存占用过大问题。

下面结合附图来介绍本发明实施例的网页展示方法的一个示例的整体构架原理。

可选地，如图7所示，本申请中电子设备中设置有WebView、客户端、校验模块和适配模块。

电子设备接收到用户针对某一网页的点击操作后，确认接收到针对该网页的触发指令。校验模块对该触发指令进行校验，检验当前环境是否具备客户端生成页面的条件，即检验是否具备客户端生成页面环境，例如客户端生成页面所依赖的可执行文件是否完整，当前客户端是否具备生成页面的能力等等；之后通过适配模块在客户端生成页面前做一个适配和预处理，例如若依赖的可执行文件不完整，那么发起请求去服务端设备获取所缺的离线包等等，使得电子设备本地具备客户端的生成页面环境，并存储到非易失性存储器中，例如存储到SD卡中。

检验模块确认出存在客户端的页面生成环境时，即校验通过，一方面启动Tools(工具)进程，加载webview，即初始化webview或启动webview内核，同时另一方面并行调用客户端生成页面，将针对网页的触发指令发送至客户端。

客户端中的接入模块接收到针对网页的触发指令后，输出启动动态部分页面片段生成指令，并向合成模块输出启动整体页面合成指令。合成模块根据启动整体页面合成指令，生成首屏页面片段生成指令后输出。

本地生成模块包含第一库JS文件，本地生成模块通过JNI(Java NativeInterface，Java的本地接口)接收到首页面片段生成指令和启动动态部分页面片段生成指令后，从本地已存储的离线包和File(指除了离线包之外的页面文件等)中获取页面模板和第一JS文件，根据底层的生成页面环境中的javascript执行环境的二进制文件、***文件和其他执行文件中的至少一种，执行第一JS文件；通过执行第一JS文件，本地生成模块发起请求从服务端设备获取CGI数据(此时为首次生成页面)。JNI是一种编程框架，使得Java虚拟机中的Java程序可以调用本地应用或库，也可以被其他程序调用。

本地生成模块根据页面模板、第一JS文件、以及请求到的CGI数据，从CGI数据中提取内容数据或将CGI数据作为内容数据，在本地生成页面环境下生成填充有内容数据的首屏HTML片段，作为执行结果。本地生成模块得到执行结果后，通过JNI输出。javascript执行环境的二进制文件包括JS执行引擎，即JSCore。

合成模块接收到首屏页面片段后，从离线包或File中的至少一种文件包获取的骨架文件，与首屏页面片段进行合成，得到首屏页面，作为客户端生成的首屏页面输出。例如，合成模块从离线包或File中获取HTML模板，与首屏HTML片段进行合成，得到首屏HTML页面，作为客户端生成的首屏HTML页面输出。

同理，合成模块还可以在后续的生成页面过程中合成得到第二屏页面和第三屏页面等等。即合成模块可以合成得到第N屏页面，N为正整数，N为1时即为首屏页面。

此外，合成模块还为每一屏页面设置对应的页面状态信息，页面状态信息包括页面序号；例如，首屏页面对应设置有页面序号1，第N屏页面对应设置有页面序号N。合成模块将页面及其序号对应输出，使得Webview能够根据各对应的页面和页面序号，对各页面进行拼接、融合和渲染展示。

结果处理模块对合成模块输出的客户端生成的页面进行处理并输出。具体地，结果处理模块是客户端生成的页面和Webview根据页面生成界面图像之间的一个过渡模块。结果处理模块获取客户端生成的页面已缓存的信息后，将已缓存页面的获取方式发送至Webview。

缓存模块将客户端生成的页面，例如首屏页面，存储到内存中。

客户端输出所生成的页面后，调用本地生成模块继续获取后续的CGI数据，对页面片段进行更新，从而实现对已存储的生成的页面进行更新。

Webview初始化完毕后，即webview内核启动后，加载页面。加载页面包括获取离线包中的页面骨架模板，例如HTML模板；加载页面包括获取最新生成的页面、或者获取已缓存的页面。获取最新生成的页面，可以是获取客户端输出的最新生成的页面。获取已缓存的页面，包括获取内存中已缓存的页面；可选地，Webview接收结果处理模块发送的已缓存页面的获取方式后，执行一些准备工作，准备工作完毕后获取页面时，根据获取方式从存储模块获取客户端生成的页面。

Webview将获取的客户端生成的页面，填充到页面骨架模板中，得到生成的界面图像后进行展示。

下面结合附图介绍一下应用本申请实施例的网页展示方法的示例。

例如，某一社交软件的“我的收藏页”是基于Vue框架的页面、“内容详情页”是基于art-template框架的页面。art-template是一个简约且处理速度较快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近JavaScript极限的运行性能，并且同时支持NodeJS(Node JavaScript，节点直译式脚本语言)和网络视图。

如图8b所示的“我的收藏页”是该社交软件用户收藏内容的集合页面，入口在如图8a所示的该社交软件的个人中心，如图8b所示，页面由收藏卡片列表构成，涵盖视频、文章和图文三种类型，页面可编辑删除相关的收藏记录，采用的是vue框架作为页面组件架构。

本申请的电子设备包括移动终端，当移动终端利用本申请的网页展示方法，检测到图8a中的“我的收藏”被点击时，确认接收到针对“我的收藏页”的触发指令，调用移动客户端生成并输出html页面，然后由基于Vue框架的webview生成并展示出如图8b所示的“我的收藏”的详情页面的界面图像。为了保护隐私，申请人对本申请中部分附图(例如图8a至图8d)中的部分信息等进行了打码处理。

再如，如图8d所示的“内容详情页”是社交软件的二级页面，从如图8c所示的社交软件首页feeds流的社交化卡片进入，“内容详情页”是基于Art-Template框架的。feed是将用户主动订阅的若干消息源组合在一起形成内容聚合器，帮助用户持续地获取最新的订阅源内容。feed流即持续更新并呈现给用户内容的信息流。本申请feeds流可以理解为内容信息流。

当移动终端利用本申请的网页展示方法，检测到图8c中某一网页的概要信息被点击时，确认接收到针对该网页的触发指令，调用移动客户端生成并输出html页面，然后由基于Art-Template框架的webview，根据html页面生成并展示出如图8d所示的内容详情页面的界面图像。

下面介绍一下使用客户端生成页面与不使用客户端生成页面的对比实验结果。

本申请能够大大提升H5页面的首屏页面加载速度，从某一社交软件的外网数据统计，使用本地客户端生成的页面，展示首屏界面图像的时间大大缩短。这里以如图8a至图8b的“我的收藏页”页面的数据展示说明。

图9a为未使用本地客户端生成页面的多个首屏生成并展示所需时间的推移示意图。即多次利用基于不使用客户端生成的网页展示方法，即使用传统的web侧提供页面，进行网页加载，记录各次加载过程从触发加载开始至显示出首屏页面界面图像的时间构成的推移图。

图9b为使用本地客户端生成页面的多个首屏生成并展示所需时间的推移示意图。即多次利用基于客户端生成页面的网页展示方法，进行网页加载，记录各次加载过程从触发加载开始至显示出首屏页面界面图像的时间构成的推移图。

从图9a和图9b的数据中可以发现，使用客户端直出生成页面后，“我的收藏”的首屏生成并展示所需时间由原来的均值800～1000ms(毫秒)，下降到了均值100～200ms，减少了四分之三。

基于同一发明构思，本申请的又一个实施例提供了一种网页展示装置，设置于本申请的电子设备中，包括：处理模块和展示模块。

处理模块，用于接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面。

展示模块，用于调用初始化后的网络视图，根据客户端生成的页面生成界面图像并展示界面图像。

可选地，处理模块具体用于在初始化网络视图过程中开始调用客户端生成页面；或者，在调用客户端生成页面的过程中开始初始化网络视图；或者，开始初始化网络视图，并同时开始调用客户端生成页面。

可选地，本申请实施例中，网页展示装置的处理模块包括：初始化单元和生成单元。

初始化单元，用于接收到针对网页的触发指令时，初始化网络视图。

生成单元，用于接收到针对网页的触发指令时，调用客户端生成页面。

可选地，生成单元具体用于当确认为客户端首次生成页面时，客户端获取预先存储的HTML模板、客户端的第一JS文件和第一库JS文件；第一JS文件和第一库JS文件分别为支持客户端生成页面的业务JS文件和过程控制JS文件；根据第一库JS文件和第一JS文件，从服务端设备获取网页的CGI数据并存储CGI数据；根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页的HTML片段；将HTML模板与首页的HTML片段进行合并，得到客户端生成的首屏页面，存储首屏页面并向网络视图输出。

可选地，生成单元具体用于将CGI数据存储到电子设备的非易失性存储器中；以及，将首屏页面存储到电子设备的易失性存储器中；易失性存储器的输入输出接口速度大于非易失性存储器的输入输出接口速度；以及，向网络视图输出之后，调用网络视图获取预先存储的网络视图JS文件，并通过执行网络视图JS文件，从网络重新获取CGI数据，并更新已存储的CGI数据。

可选地，生成单元具体用于当确认为客户端的非首次生成页面时，调用客户端中已获取到的第一库JS文件直接读取已存储的CGI数据；根据已获取到的第一库JS文件、第一JS文件和所读取的CGI数据，在客户端的生成页面环境下生成当前其它页面的HTML片段；其它页面为首屏页面之外的页面；将HTML模板与当前其它页面的HTML片段进行合并，得到客户端生成的当前其它页面，存储当前其它页面并向网络视图输出。

可选地，生成单元还用于当网络视图初始化完毕、且客户端的当前其它页面还未生成页面完毕时，调用网络视图读取已存储的上一个其它页面生成界面图像并展示。

可选地，生成单元具体用于根据第一库JS文件、以及生成页面环境中第一JS文件的依赖文件中的vue函数，对CGI数据进行处理，得到vue实例；根据vue实例生成虚拟节点树；根据依赖文件中的渲染至字符串函数，将虚拟节点树同步转换成HTML片段。

可选地，本申请实施例中，网页展示装置还包括：设置优化模块。

设置优化模块，用于在调用客户端生成页面之前，移除原生JS文件的依赖文件的下述各项，得到第一JS文件的依赖文件：数据观测和观察模块、移除异步队列、以及虚拟节点树生成文档节点的接口。

可选地，设置优化模块还用于通过下述方法预先构建基于vue框架的第一JS文件：将包含业务代码的vue文件转换成JS格式的主文件；从主文件中拆分出客户端入口构建文件；利用构建工具，将客户端入口构建文件，编译为可执行的第一JS文件；构建工具包括vue转换器和vue样式转换器，vue转换器中包括支持客户端生成页面的二进制代码，vue样式转换器中的内联CSS逻辑和***虚拟节点树节点操作的二进制代码都已被屏蔽。第一JS文件包括基于vue框架的第一JS文件。

可选地，设置优化模块具体用于当vue文件中存在表征非客户端生成逻辑的字符串时，屏蔽该字符串对应的非客户端生成页面的源代码；将屏蔽非客户端生成页面的源代码后的vue文件，转换成JS格式的主文件；当vue文件中不存在表征非客户端生成逻辑的字符串时，直接将vue文件转换成JS格式的主文件。

可选地，生成模块还用于确认为客户端的首次生成页面之前，确认客户端是否具备生成页面环境，生成页面环境包括生成JS内核、生成SDK、以及包含第一JS文件和第一库JS文件的CDN或离线包；生成JS内核为支持客户端生成页面的JS内核；生成SDK为支持客户端生成页面的SDK；当确认客户端不具备生成页面环境时，切换为向服务端设备依次请求网页对应的HTML模板和CGI数据。

本实施例的网页展示装置可执行本申请上述各实施例中任一实施例或任一可选的实施方式的网页展示方法，其实现原理和所取得的有益技术效果与本申请的网页展示方法相类似，此处不再赘述。

基于相同的发明构思，本申请还一个实施例中提供一种电子设备，包括：处理器、存储器和总线；

总线，用于连接处理器和存储器；

存储器，用于非易失性存储器和易失性存储器，非易失性存储器用于存储操作指令；

处理器，用于通过调用操作指令至易失性存储器，执行本申请上述各实施例中任一实施例或可选实施方式的网页展示方法。

可选地，本实施例中的电子设备平台包括电子设备。该电子设备，如图10所示，图10所示的电子设备1000包括：处理器1001和存储器1003。其中，处理器1001和存储器1003相电连接，如通过总线1002相连。可选的，电子设备1000还包括网络模块1004。需要说明的是，实际应用中网络模块1004不限于一个，该电子设备1000的结构并不构成对本申请实施例的限定。

其中，处理器1001应用于本申请实施例中，用于本申请上述的网页展示装置中各模块的功能。

处理器1001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field－Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器1001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线1002可包括一通路，在上述组件之间传送信息。总线1002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线1002可以分为地址总线、数据总线、控制总线等。为便于表示，图10中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器1003可以是ROM(Read-Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(random access memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead-Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

可选的，存储器1003用于存储执行本申请方案的应用程序代码或操作指令，并由处理器1001来控制执行。处理器1001用于执行存储器1003中存储的应用程序代码或操作指令，以实现本申请上述各实施例中任一实施例或任一可选的实施方式的网页展示方法；或者，以实现本申请上述实施例的网页展示装置的动作，其实现原理和所取得的有益技术效果与本申请的网页展示方法相类似，此处不再赘述。

基于同一发明构思，本申请又一个实施例提供了一种计算机可读存储介质，存储介质存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现本申请上述各实施例中任一实施例或任一可选的实施方式的网页展示方法。

本申请实施例提供了一种计算机可读存储介质适用于上述方法实施例，其实现原理和所取得的有益技术效果与本申请的网页展示方法相类似，在此不再赘述。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

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

Claims (13)

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

接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面；

调用初始化后的所述网络视图，根据所述客户端生成的页面生成界面图像并展示所述界面图像；

其中，所述调用客户端生成页面，包括：

当确认为客户端首次生成页面时，所述客户端获取预先存储的超文本传输协议HTML模板、所述客户端的第一JS文件和第一库JS文件；所述第一JS文件和所述第一库JS文件分别为支持所述客户端生成页面的业务JS文件和过程控制JS文件；

根据所述第一库JS文件和所述第一JS文件，从服务端设备获取所述网页的通用网关接口CGI数据并存储所述CGI数据；

根据所述第一库JS文件、所述第一JS文件和所述CGI数据，在所述客户端的生成页面环境下生成首页的HTML片段；

将所述HTML模板与所述首页的HTML片段进行合并，得到所述客户端生成的首屏页面，存储所述首屏页面并向所述网络视图输出；

当确认为所述客户端的非首次生成页面时，调用所述客户端中已获取到的第一库JS文件直接读取已存储的CGI数据；

根据已获取到的所述第一库JS文件、第一JS文件和所读取的CGI数据，在所述客户端的生成页面环境下生成当前其它页面的HTML片段；所述其它页面为首屏页面之外的页面；

将所述HTML模板与所述当前其它页面的HTML片段进行合并，得到所述客户端生成的当前其它页面，存储所述当前其它页面并向所述网络视图输出。

2.根据权利要求1所述的方法，其特征在于，所述初始化网络视图并同时调用客户端生成页面，包括：

在初始化网络视图过程中开始调用客户端生成页面；

或者，在调用客户端生成页面的过程中开始初始化网络视图；

或者，开始初始化网络视图，并同时开始调用客户端生成页面。

3.根据权利要求2所述的方法，其特征在于，所述存储所述CGI数据，包括：将所述CGI数据存储到电子设备的非易失性存储器中；

以及，所述存储所述首屏页面，包括：将所述首屏页面存储到电子设备的易失性存储器中；所述易失性存储器的输入输出接口速度大于所述非易失性存储器的输入输出接口速度；

以及，所述向所述网络视图输出之后，还包括：调用所述网络视图获取预先存储的网络视图JS文件，并通过执行所述网络视图JS文件，从所述网络重新获取CGI数据，并更新已存储的CGI数据。

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

当所述网络视图初始化完毕、且所述客户端的当前其它页面还未生成页面完毕时，调用所述网络视图读取已存储的上一个其它页面生成界面图像并展示。

5.根据权利要求1所述的方法，其特征在于，所述根据所述第一库JS文件、第一JS文件和所述CGI数据，在所述客户端的生成页面环境下生成首页或当前其它页面的HTML片段，包括：

根据所述第一库JS文件、以及所述生成页面环境中所述第一JS文件的依赖文件中的vue函数，对所述CGI数据进行处理，得到vue实例；根据所述vue实例生成虚拟节点树；根据所述依赖文件中的渲染至字符串函数，将所述虚拟节点树同步转换成所述HTML片段。

6.根据权利要求5所述的方法，其特征在于，在所述调用客户端生成页面之前，还包括：

移除原生JS文件的依赖文件的下述各项，得到所述第一JS文件的依赖文件：数据观测和观察模块、移除异步队列、以及所述虚拟节点树生成文档节点的接口。

7.根据权利要求5所述的方法，其特征在于，所述第一JS文件包括基于vue框架的第一JS文件；以及所述基于vue框架的所述第一JS文件是通过下述方法预先构建的：

将包含业务代码的vue文件转换成JS格式的主文件；

从所述主文件中拆分出客户端入口构建文件；

利用构建工具，将所述客户端入口构建文件，编译为可执行的所述第一JS文件；

所述构建工具包括vue转换器和vue样式转换器，所述vue转换器中包括支持所述客户端生成页面的二进制代码，所述vue样式转换器中的内联CSS逻辑和***虚拟节点树节点操作的二进制代码都已被屏蔽。

8.根据权利要求7所述的方法，其特征在于，所述将包含业务代码的vue文件转换成JS格式的主文件，包括：

当所述vue文件中存在表征非客户端生成逻辑的字符串时，屏蔽该字符串对应的非客户端生成页面的源代码；将屏蔽所述非客户端生成页面的源代码后的vue文件，转换成JS格式的主文件；

当所述vue文件中不存在表征非客户端生成逻辑的字符串时，直接将所述vue文件转换成JS格式的主文件。

9.根据权利要求1所述的方法，其特征在于，所述确认为客户端的首次生成页面之前，还包括：

确认所述客户端是否具备所述生成页面环境，所述生成页面环境包括生成JS内核、生成软件工具包SDK、以及包含所述第一JS文件和所述第一库JS文件的内容分发网络CDN或离线包；所述生成JS内核为支持所述客户端生成页面的JS内核；所述生成SDK为支持所述客户端生成页面的SDK；

当确认所述客户端不具备所述生成页面环境时，切换为向服务端设备依次请求所述网页对应的HTML模板和CGI数据。

10.一种网页展示装置，其特征在于，包括：

处理模块，用于接收到针对网页的触发指令时，初始化网络视图并同时调用客户端生成页面；

展示模块，用于调用初始化后的所述网络视图，根据所述客户端生成的所述页面生成界面图像并展示所述界面图像；

其中，生成单元具体用于当确认为客户端首次生成页面时，客户端获取预先存储的HTML模板、客户端的第一JS文件和第一库JS文件；第一JS文件和第一库JS文件分别为支持客户端生成页面的业务JS文件和过程控制JS文件；根据第一库JS文件和第一JS文件，从服务端设备获取网页的CGI数据并存储CGI数据；根据第一库JS文件、第一JS文件和CGI数据，在客户端的生成页面环境下生成首页的HTML片段；将HTML模板与首页的HTML片段进行合并，得到客户端生成的首屏页面，存储首屏页面并向网络视图输出，或者，生成单元具体还用于当确认为客户端的非首次生成页面时，调用客户端中已获取到的第一库JS文件直接读取已存储的CGI数据；根据已获取到的第一库JS文件、第一JS文件和所读取的CGI数据，在客户端的生成页面环境下生成当前其它页面的HTML片段；其它页面为首屏页面之外的页面；将HTML模板与当前其它页面的HTML片段进行合并，得到客户端生成的当前其它页面，存储当前其它页面并向网络视图输出。

11.根据权利要求10所述的网页展示装置，其特征在于，

所述处理模块具体用于在初始化网络视图过程中开始调用客户端生成页面；或者，在调用客户端生成页面的过程中开始初始化网络视图；或者，开始初始化网络视图，并同时开始调用客户端生成页面。

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

处理器、存储器和总线；

所述总线，用于连接所述处理器和所述存储器；

所述存储器，包括非易失性存储器和易失性存储器，所述非易失性存储器用于存储操作指令；

所述处理器，用于通过调用所述操作指令至所述易失性存储器，执行上述权利要求1至9中任一项所述的网页展示方法。

13.一种计算机可读存储介质，其特征在于，所述存储介质存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至9中任一项所述的网页展示方法。