CN104657499A - 一种客户端app的网页加载方法及装置 - Google Patents

Abstract

本发明的实施方式提供了一种客户端APP的网页加载方法。该方法包括：客户端APP根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面；根据所述网页地址信息从服务器获取网页内容并基于所述网页程序界面显示所述网页内容。通过先获取网页程序并显示相应的网页程序界面，再获取网页内容并基于网页程序界面显示，本发明的方法使得在网页加载过程中，能够及时向用户显示部分网页界面，在感观上显著地减少了用户等待时间，为用户带来了更好的体验。此外，本发明的实施方式提供了一种客户端APP的网页加载装置。

Description

一种客户端APP的网页加载方法及装置

技术领域

本发明的实施方式涉及互联网技术领域，更具体地，本发明的实施方式涉及一种客户端APP(Application，应用程序)的网页加载方法及装置。

背景技术

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

随着移动互联网的发展，用户使用终端设备接入互联网的频率越来越高，对网页的浏览与使用也越来越多，除了使用浏览器进行网页的加载和显示外，常见的还可以使用混合APP进行网页的加载和显示。混合APP并非浏览器，但其内部具有浏览器组件，这种APP需要安装到本地后才可使用，其使用内部的浏览器组件来获取和展示网页的部分或全部内容，混合APP例如是微信。

目前，一些混合APP提供的服务平台例如公众服务号等，提供的服务内容复杂多样，而且其提供的服务内容大都以网页形式提供；因此为获取服务内容，这些混合APP需要完成网页加载过程。

发明内容

但是，用户使用客户端APP加载网页时，每打开一个网页都是一次网页完全加载过程，每次均需要从服务器获取网页全部内容后再显示网页，在网速较慢的情况下非常耗费时间，而在用户请求打开网页到网页显示之前的过程中暂时提供给用户的界面会是一个没有内容的空白界面，用户等待时间较长，用户体验较差。

因此在现有技术中使用客户端APP进行网页加载，这是非常令人烦恼的过程。

为此，非常需要一种改进的客户端APP网页加载方案，以使提高网页加载过程的显示速度以及加载速度。

在本上下文中，本发明的实施方式期望提供一种客户端APP的网页加载方法及装置。

在本发明实施方式的第一方面中，提供了一种客户端APP网页加载方法，例如，该方法可以包括：客户端APP根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面；根据所述网页地址信息从服务器获取网页内容并基于所述网页程序界面显示所述网页内容。

在本发明实施方式的第二方面中，提供了一种客户端APP网页加载装置，例如，该装置可以包括：第一获取单元，用于根据网页地址信息从服务器获取网页程序；运行单元，用于运行所述网页程序以显示相应的网页程序界面；第二获取单元，用于根据所述网页地址信息从服务器获取网页内容；显示单元，用于基于所述网页程序界面显示所述网页内容。

根据本发明实施方式的客户端APP的网页加载方法和装置，客户端APP通过先获取网页程序并显示相应的网页程序界面，再获取网页内容并基于网页程序界面进行显示，可以加快网页加载过程中页面的显示速度，进一步地，本发明实施例方式可以从本地获取网页程序，从而显著减少了从服务器获取网页程序的时间，使客户端APP的网页加载速度大幅提高，为用户带来了更好的体验。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

图1示意性地示出了根据本发明实施方式的一个示例性应用场景的框架示意图；

图2示意性地示出了本发明实施方式的客户端APP的网页加载方法一实施例的流程图；

图3示意性地示出了本发明实施方式的客户端APP的网页加载方法另一实施例的流程图；

图4示意性地示出了本发明实施方式的客户端APP的网页加载装置一实施例的示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种客户端APP的网页加载方法和装置。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

发明概述

本发明人发现，现有技术中使用客户端APP每次加载网页时，均需要从服务器获取网页的全部内容后再进行显示，一方面，在客户端APP从服务器获取全部网页内容的过程中，会暂时提供给用户一个没有内容的空白界面，如果网络传输速度不佳，用户会等待较长时间，降低用户体验；另一方面，客户端APP每次打开网页均需要从服务器请求网页的全部内容，加载速度会比较慢。

针对以上问题，发明人考虑将网页划分为两部分，即网页程序部分以及网页内容部分，网页程序部分包括HTML代码、JS代码、CSS文件和网页程序需要的图片。上述JS代码指代的是用JavaScript编写的脚本文件的代码；上述CSS是Cascading Style Sheet的缩写，即层叠样式表单；上述网页程序需要的图片指HTML(Hyper Text Markup Language，超级文本标记语言)代码加载过程中需要的图片，其往往不随网页内容变化而变化，并且不同于网页内容中的图片；而网页内容部分则为不同网页所包括的不同网页实体内容，例如文字、图片等。在客户端APP请求进行加载网页时，先获取网页程序以显示相应的网页程序界面，再获取网页内容并基于网页程序界面显示，这样，用户可以先看到网页程序界面，例如所显示的网页的主体框架、样式和不随网页变化而变化的图片，再看到具体的网页内容，减少了用户等待时间，提高用户体验；另一方面，网页程序可以保存在本地，在加载网页时，可以从本地获取网页程序，而无需再从服务器获取，从而减少客户端与服务器之间的通信内容，提高网页加载速度。

在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。

应用场景总览

首先参考图1，图1是本发明的实施方式的一个示例性应用场景的框架示意图。其中，用户通过用户设备上的客户端102与提供资讯类应用服务的服务器101进行交互。本领域技术人员可以理解，图1所示的框架示意图仅是本发明的实施方式可以在其中得以实现的一个示例。本发明实施方式的适用范围不受到该框架任何方面的限制。

需要注意的是，此处的用户设备可以是现有的、正在研发的或将来研发的、能够通过任何形式的有线和/或无线连接(例如，Wi-Fi、LAN、蜂窝、同轴电缆等)实现其上客户端102与服务器101交互的任何用户设备，包括但不限于：现有的、正在研发的或将来研发的智能手机、非智能手机、平板电脑、膝上型个人计算机、桌面型个人计算机、小型计算机、中型计算机、大型计算机等。

还需要注意的是，此处的服务器101仅是现有的、正在研发的或将来研发的、能够向用户提供资讯类应用服务的设备的一个示例。本发明的实施方式在此方面不受任何限制。

基于图1所示的框架，客户端102可以根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面；然后，客户端102可以根据所述网页地址信息从服务器获取网页内容并基于所述网页程序界面显示所述网页内容。

可以理解的是，本发明的应用场景中，虽然此处和下面将本发明实施方式的动作描述为由客户端102执行，但是本发明在执行主体方面不受限制，只要执行了本发明实施方式所公开的动作即可。

示例性方法

下面结合图1的应用场景，参考图2-3来描述根据本发明示例性实施方式的用于客户端APP的网页加载方法。需要注意的是，上述应用场景仅是为了便于理解本发明的精神和原理而示出，本发明的实施方式在此方面不受任何限制。相反，本发明的实施方式可以应用于适用的任何场景。

参见图2，示出了本发明中客户端APP的网页加载方法一实施例的流程图，例如具体可以包括如下步骤：

步骤201：客户端APP根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面。

网页制作方在制作网页时需要对网页进行划分，将网页划分为网页程序以及网页内容两部分。网页程序包括HTML代码、JS代码、CSS文件和网页程序需要的图片。运行网页程序可以实现对网页程序界面的显示，网页程序界面为网页程序在客户端APP运行后的展现形式，其包括了网页的主体框架、样式和不随网页变化而变化的图片。

在一些可能的实施方式中，步骤201的具体实现可以包括：客户端APP根据网页地址信息从服务器获取网页程序，将所述网页程序传递给所述客户端APP中的浏览器组件，由所述浏览器组件运行所述网页程序以显示相应的网页程序界面。

在上述实施方式中，获取网页程序的主体是客户端APP，客户端APP获取所述网页程序后，再将所述网页程序传递给该客户端APP内部的浏览器组件进行运行显示，即并非由浏览器组件来获取网页程序，其优点在于：(1)、可以打包一次获取网页程序，因为网页程序可以分为多个文件，如果由浏览器组件获取会建立多次网络请求，比较耗时，而一次打包由客户端APP获取网页程序则只建立一次网络请求，速度较快；(2)、方便由客户端APP管理网页程序的本地缓存，如果由浏览器组件获取网页程序的话，本地缓存中的网页程序会处于不可控状态，随时可能被清除从而导致重复获取；(3)、方便对网页程序进行版本管理，浏览器组件没有版本管理的能力，而由客户端APP获取网页程序则可以对网页程序进行版本管理。

在一些可能的实施方式中，在运行所述网页程序的过程中，还可以包括：利用所述网页程序调用本地接口，所述本地接口客户端APP能够提供的包括图片接口、拍照接口或进度条接口。

客户端APP可以提供一些本地接口如图片接口、拍照接口或进度条接口等供网页程序在运行过程中调用，例如，网页程序运行以显示网页程序界面的过程中，需要显示某个图片，则可以通过调用本地图片接口实现对该图片的显示。

客户端APP响应于用户触发的网页加载请求，根据网页地址信息从服务器获取网页程序，将网页程序传递给所述客户端APP中的浏览器组件，由浏览器组件运行网页程序以显示相应的网页程序界面。也就是说，在网页加载过程中，先对网页程序界面进行显示，例如，先显示网页的主体框架、样式和不随网页变化而变化的图片，可以使用户先看到该网页所包含的大体结构。

在一些可能的实施方式中，在步骤201之前又可以先根据所述网页地址信息判断本地是否保存有所述网页程序，如果是，则从本地获取所述网页程序，如果否，则根据所述网页地址信息从服务器获取所述网页程序，并将所述网页程序保存在本地。

由于不同网页可能使用相同的网页程序，则为了加快网页加载速度，可以将网页程序保存在本地，在需要获取网页程序时直接从本地获取网页程序，在本地未保存有网页程序时再从服务器获取网页程序，可以大幅减少客户端与服务器之间的通信内容，提高网页加载速度。在一个可能的实施例中，在将网页程序保存在本地的同时，可以同时保存该网页程序的版本号。

在一些可能的实施方式中，网页被划分为网页程序和网页内容。客户端APP在加载网页时，所使用的网页地址可以为URL(Uniform ResourceLocator，统一资源定位符)，客户端APP请求加载网页时，对所使用的URL进行分析处理，得到网页地址信息，该网页地址信息包含网页程序地址和网页内容地址两个地址，所述网页程序地址指向网页程序，所述网页内容地址指向网页内容。

则可以根据所述网页程序地址判断本地是否保存有所述网页程序地址对应的网页程序；在本地未保存的情况下，可以根据所述网页程序地址从服务器获取所述网页程序。

进一步地，根据所述网页程序地址判断本地是否保存有所述网页程序地址对应的网页程序的具体实现可以包括：

根据所述网页程序地址包括的网页程序版本号信息，以及本地所保存的网页程序版本号信息，判断本地是否保存有所述网页程序地址对应的网页程序。

步骤202：根据所述网页地址信息从服务器获取网页内容并基于所述网页程序界面显示所述网页内容。

在一些可能的实施方式中，所述根据所述网页地址信息从服务器获取网页内容，包括：

由客户端APP内部的浏览器组件利用所述网页程序根据所述网页内容地址从服务器获取所述网页内容。

在实际应用中，浏览器组件可以利用网页程序根据获取网页内容地址从服务器获取网页内容并基于网页程序界面显示网页内容；浏览器组件也可以根据网页内容地址从服务器获取网页内容后，再利用数据接口将网页内容传递给网页程序，从而基于网页程序界面显示网页内容。

这样，根据本发明实施方式的客户端APP的网页加载方法，客户端APP通过先获取网页程序并显示相应的网页程序界面，再获取网页内容并基于网页程序界面进行显示，可以加快网页加载过程中页面的显示速度，进一步地，本发明实施例方式可以从本地获取网页程序，从而显著减少了从服务器获取网页程序的时间，使客户端APP的网页加载速度大幅提高，为用户带来了更好的体验。

参见图3，示出了本发明中客户端APP的网页加载方法另一实施例的流程图，例如具体可以包括如下步骤：

步骤301：客户端APP对网页地址URL进行分析处理，得到网页程序地址和网页内容地址这两个地址。

步骤302：根据得到的网页程序地址判断本地是否保存有网页程序地址对应的网页程序，如果是，进入步骤303，如果否，进入步骤304。

步骤302的具体实现可以根据网页程序地址包括的网页程序版本号信息，以及本地所保存的网页程序版本号信息，判断本地是否保存有网页程序地址对应的网页程序。

步骤303：根据网页程序地址从本地获取网页程序。

步骤303的具体实现可以根据网页程序地址包括的网页程序版本号信息从本地获取网页程序。

步骤304：根据网页程序地址从服务器获取网页程序，并在本地保存。

步骤305：运行网页程序以显示相应的网页程序界面，从而将网页的主体框架、样式和不随网页变化而变化的图片呈现给用户，此时用户可以看到网页的大体结构，犹如打开本地APP的呈现方式。

步骤306：利用网页程序根据网页内容地址从服务器获取网页内容。

步骤307：基于网页程序界面显示网页内容。将网页内容与已经呈现的网页程序界面结合，将完整的网页加载后的效果展示给用户。

这样，根据本发明实施方式的客户端APP的网页加载方法，客户端APP通过先获取网页程序并显示相应的网页程序界面，再获取网页内容并基于网页程序界面进行显示，可以加快网页加载过程中页面的显示速度，进一步地，本发明实施例方式可以从本地获取网页程序，从而显著减少了从服务器获取网页程序的时间，使客户端APP的网页加载速度大幅提高，为用户带来了更好的体验。

示例性设备

在介绍了本发明示例性实施方式的方法之后，接下来，参考图4对本发明示例性实施方式的、用于客户端APP的网页加载装置进行介绍。

参见图4，示出了本发明中客户端APP的网页加载装置一实施例的结构图，例如具体可以包括：

第一获取单元401，用于根据网页地址信息从服务器获取网页程序。

运行单元402，用于运行所述网页程序以显示相应的网页程序界面。

第二获取单元403，用于根据所述网页地址信息从服务器获取网页内容。

显示单元404，用于基于所述网页程序界面显示所述网页内容。

例如，在一些可能的实施方式中，所述运行单元402可以具体用于：

将所述网页程序传递给所述客户端APP中的浏览器组件，由所述浏览器组件运行所述网页程序以显示相应的网页程序界面。

在一些可能的实施方式中，所述网页地址信息可以包括网页程序地址和网页内容地址，所述网页地址可以为统一资源定位符URL。

在一些可能的实施方式中，本发明中客户端APP的网页加载装置还可以包括：

判断单元405，用于根据所述网页地址信息判断本地是否保存有所述网页程序。

第三获取单元406，用于如果所述判断单元的判断结果为是，则从本地获取所述网页程序。

则所述第一获取单元401，可以具体用于如果所述判断单元的判断结果为否，则根据所述网页地址信息从服务器获取所述网页程序，并将所述网页程序保存在本地

在一些可能的实施方式中，所述判断单元405，可以具体用于根据所述网页程序地址判断本地是否保存有所述网页程序地址对应的网页程序。

进一步地，所述第一获取单元401，可以具体用于如果所述判断单元的判断结果为否，则根据所述网页程序地址从服务器获取所述网页程序。

进一步地，所述判断单元405可以具体用于：根据所述网页程序地址包括的网页程序版本号信息，以及本地所保存的网页程序版本号信息，判断本地是否保存有所述网页程序地址对应的网页程序。

在一些可能的实施方式中，所述网页程序可以包括HTML代码、JS代码、CSS文件和网页程序需要的图片。

另外，在一些可能的实施方式中，还可以包括：

调用单元，用于所述运行单元在运行所述网页程序的过程中，利用所述网页程序调用本地接口，所述本地接口包括所述客户端APP能够提供的图片接口、拍照接口或进度条接口。

在一些可能的实施方式中，所述第二获取403可以单元具体用于：

由所述客户端APP内部的浏览器组件利用所述网页程序根据所述网页内容地址从服务器获取所述网页内容。

在一些可能的实施方式中，所述网页地址为统一资源定位符URL。

这样，根据本发明实施方式的客户端APP的网页加载装置，客户端APP通过先获取网页程序并显示相应的网页程序界面，再获取网页内容并基于网页程序界面进行显示，可以加快网页加载过程中页面的显示速度，进一步地，本发明实施例方式可以从本地获取网页程序，从而显著减少了从服务器获取网页程序的时间，使客户端APP的网页加载速度大幅提高，为用户带来了更好的体验。

应当注意，尽管在上文详细描述中提及了客户端APP的网页加载装置的若干单元或子单元，但是这种划分仅仅并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多装置的特征和功能可以在一个装置中具体化。反之，上文描述的一个装置的特征和功能可以进一步划分为由多个装置来具体化。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (11)

1.一种客户端APP的网页加载方法，包括：

客户端APP根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面；

根据所述网页地址信息从服务器获取网页内容并基于所述网页程序界面显示所述网页内容。

2.根据权利要求1所述的方法，其中，所述客户端APP根据网页地址信息从服务器获取网页程序，运行所述网页程序以显示相应的网页程序界面，包括：

客户端APP根据网页地址信息从服务器获取网页程序，将所述网页程序传递给所述客户端APP中的浏览器组件，由所述浏览器组件运行所述网页程序以显示相应的网页程序界面。

3.根据权利要求1所述的方法，其中，所述网页地址信息包括网页程序地址和网页内容地址。

4.根据权利要求3所述的方法，在客户端APP根据网页地址信息从服务器获取网页程序之前，还包括：

所述客户端APP根据所述网页地址信息判断本地是否保存有所述网页程序，如果是，则从本地获取所述网页程序，如果否，则根据所述网页地址信息从服务器获取所述网页程序，并将所述网页程序保存在本地。

5.根据权利要求4所述的方法，其中，

所述客户端APP根据网页地址信息判断本地是否保存有所述网页程序，包括：

所述客户端APP根据所述网页程序地址判断本地是否保存有所述网页程序地址对应的网页程序；

所述根据所述网页地址信息从服务器获取所述网页程序，包括：

根据所述网页程序地址从服务器获取所述网页程序。

6.根据权利要求5所述的方法，其中，所述客户端APP根据所述网页程序地址判断本地是否保存有所述网页程序地址对应的网页程序，包括：

所述客户端APP根据所述网页程序地址包括的网页程序版本号信息，以及本地所保存的网页程序版本号信息，判断本地是否保存有所述网页程序地址对应的网页程序。

7.根据权利要求1所述的方法，其中，所述网页程序包括HTML代码、JS代码、CSS文件和网页程序需要的图片。

8.根据权利要求1所述的方法，在运行所述网页程序的过程中，还包括：

利用所述网页程序调用本地接口，所述本地接口包括所述客户端APP能够提供的图片接口、拍照接口或进度条接口。

9.根据权利要求3所述的方法，其中，所述根据所述网页地址信息从服务器获取网页内容，包括：

由所述客户端APP内部的浏览器组件利用所述网页程序根据所述网页内容地址从服务器获取所述网页内容。

10.根据权利要求1-9任一项所述的方法，其中，所述网页地址为统一资源定位符URL。

11.一种客户端APP的网页加载装置，包括：

第一获取单元，用于根据网页地址信息从服务器获取网页程序；

运行单元，用于运行所述网页程序以显示相应的网页程序界面；

第二获取单元，用于根据所述网页地址信息从服务器获取网页内容；

显示单元，用于基于所述网页程序界面显示所述网页内容。