网页页面数据加载方法、装置、计算机设备和存储介质与流程

本申请涉及互联网技术领域，具体而言，本申请涉及一种网页页面数据加载方法、装置、计算机设备和存储介质。

背景技术：

随着互联网技术的发展和应用的普及，互联网已经成为巨大的资讯平台、沟通平台、交易平台，在日常工作、生活中发挥重要的作用，利用浏览器软件上网浏览页面内容，如利用ios(苹果公司的操作系统)的网页浏览应用浏览网页页面成为了日常生活不可或缺的一部分。

现有技术中采用网络视图浏览网页页面时，先加载网页页面，然后利用加载的网页页面去下载所有的网页页面数据，当网页页面数据的数据量较大时，网页页面数据加载较慢，很容易出现白屏的情况。

技术实现要素：

本申请的目的旨在至少能解决上述的技术缺陷之一，特别是网页页面数据的数据量较大时加载较慢且容易出现白屏的技术缺陷。

本申请提供一种网页页面数据加载方法，包括如下步骤：

在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；

在所述网页页面数据和所述空白的网页页面加载完成后，将所述网页页面数据渲染到所述空白的网页页面中；

将渲染后的网页页面在前端进行显示。

在一个实施例中，所述在所述网页页面数据和所述空白的网页页面加载完成后的步骤之前，还包括：

若所述网页页面数据先下载完成，等待所述空白的网页页面加载完成后，执行将所述网页页面数据渲染到所述空白的网页页面中的步骤。

在一个实施例中，所述在所述网页页面数据和所述空白的网页页面加载完成后的步骤之前，还包括：

若所述空白的网页页面先加载完成，等待所述网页页面数据下载完成后，执行将所述网页页面数据渲染到所述空白的网页页面中的步骤。

在一个实施例中，所述将所述网页页面数据渲染到所述空白的网页页面中的步骤，包括：

从后台调用所述网页页面数据，并读取javascript脚本语言；

根据所述javascript脚本语言将所述网页页面数据渲染到所述空白的网页页面中。

在一个实施例中，所述在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面的步骤之前，还包括：

接收对目标网页地址的访问请求，响应于所述访问请求执行所述加载网页页面的步骤。

在一个实施例中，所述接收对目标网页地址的访问请求的步骤之前，还包括：

将待访问的网页地址统一设置于指定域名的服务器中，解析所述指定域名得到对应的互联网协议地址，根据所解析得到的互联网协议地址访问所述待访问的网页地址。

在一个实施例中，所述后台从服务器下载待显示的网页页面数据的步骤，包括：

从所述互联网协议地址中获取与所述目标网页地址对应的网页页面数据。

在一个实施例中，所述在后台向服务器请求并下载待显示的网页页面数据的步骤，包括：

获取与所述目标网页地址对应的目标域名；

根据所述目标域名确定对应的目标互联网协议地址；

从所述目标互联网协议地址中下载与所述目标网页地址对应的网页页面数据。

在一个实施例中，所述根据所述目标域名确定对应的目标互联网协议地址的步骤，包括：

在本地域名数据库中查找与所述目标域名对应的目标互联网协议地址，若在本地域名数据库中未查询到对应的目标互联网协议地址，则解析所述目标域名得到对应的目标互联网协议地址，并将所述目标互联网协议地址更新到所述本地域名数据库中。

本申请还提供一种网页页面数据加载装置，包括：

加载模块，用于在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；

渲染模块，用于在所述网页页面数据和所述空白的网页页面加载完成后，将所述网页页面数据渲染到所述空白的网页页面中；

显示模块，用于将所述渲染后的网页页面在前端进行显示。

本申请还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行如任一实施例所述的网页页面数据加载方法的步骤。

本申请还提供一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如任一实施例所述的网页页面数据加载方法的步骤。

上述的网页页面数据加载方法、装置、计算机设备和存储介质，其在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；在所述网页页面数据和所述空白的网页页面加载完成后，将所述网页页面数据渲染到所述空白的网页页面中；将所述渲染后的网页页面在前端进行显示。通过下载网页页面数据的同时，同步加载空白的网页页面，可以减少在网页页面上加载网页页面数据的时间，减少白屏出现，提高加载效率。

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

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为一个实施例中网页页面数据加载方法的应用环境示意图；

图2为一个实施例中网页页面数据加载方法的流程图；

图3为一个实施例中网页页面数据加载方法的流程图；

图4为一个实施例中网页页面数据加载方法的流程图；

图5为另一个实施例中网页页面数据加载方法的流程图；

图6为一个实施例中下载网页页面数据的流程图；

图7为一个实施例中网页页面数据加载装置结构示意图；

图8为一个实施例中计算机设备的内部结构示意图。

具体实施方式

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

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

本申请提供的网页页面数据加载方法，可以应用于如图1所示的应用环境中。具体的，终端102的网页浏览应用210在加载网页页面时，在后台向服务器104请求并下载待显示的网页页面数据，并同步在网页浏览应用210的网络视图控件上加载空白的网页页面；在网页页面数据和空白的网页页面加载完成后，网页浏览应用210将网页页面数据渲染到空白的网页页面中；网页浏览应用210将渲染后的网页页面在前端进行显示。

本技术领域技术人员可以理解，这里所使用的“终端”可以是手机、平板电脑、pda(personaldigitalassistant，个人数字助理)、mid(mobileinternetdevice，移动互联网设备)等；服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现；网页浏览应用可以是应用于ios的浏览器等等。

在一个实施例中，如图2所示，提供了一种网页页面数据加载方法，以该方法应用于图1中的网页浏览应用为例进行说明，可以包括以下步骤：

步骤s202，在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面。

在本步骤中，通过网页浏览应用的webview(网络视图)控件加载空白的网页页面，同时在网页浏览应用的后台下载网页页面数据，空白的网页页面是指网页页面中不包括网页页面数据。

在一个实施例中，如图3所示，步骤s202的在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面之前，还可以包括：

步骤s200，接收对目标网页地址的访问请求，响应于访问请求执行加载网页页面的步骤。

在具体实施过程中，当网页浏览应用接收到目标网页地址的访问请求时，根据目标网页地址查询对应的目标域名，再通过dns(domainnamesystem，域名系统)解析得到对应的目标互联网协议地址，从目标互联网协议地址中获取对应的网页页面数据。

为了进一步简化域名解析过程并减少时长，本申请还可以采用多种方式对解析域名的过程进行简化，具体将在下文中详细进行说明。

步骤s204，在网页页面数据和空白的网页页面加载完成后，将网页页面数据渲染到空白的网页页面中。

在具体实施过程中，若网页页面数据量较大，可能是网页页面数据先下载完成；若网页页面数据量较小，也可能是空白的网页页面先加载完成，当网页页面数据和空白的网页页面加载都完成之后，才执行网页页面数据的渲染的步骤。

在一个实施例中，如图4所示，步骤s204的在网页页面数据和空白的网页页面加载完成后之前，还可以包括：

s203a，若网页页面数据先下载完成，等待空白的网页页面加载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

具体的，若网页页面数据先下载完成，判断空白的网页页面是否加载完成，若空白的网页页面未加载完成，则等待空白的网页页面加载完成后，再执行将网页页面数据渲染到空白的网页页面中的步骤。

例如，若网页页面数据下载时长需要300毫秒，空白的网页页面的加载时长需要400毫秒，则网页页面数据下载完成后，等待空白的网页页面加载完成，网页页面数据和空白的网页页面的加载总耗时为400毫秒。

在一个实施例中，如图4所示，步骤s204的在网页页面数据和空白的网页页面加载完成后之前，还可以包括：

s203b，若空白的网页页面先加载完成，等待网页页面数据下载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

具体的，若空白的网页页面先加载完成，判断网页页面数据是否下载完成，若网页页面数据未下载完成，则等待网页页面数据下载完成之后，再执行将网页页面数据渲染到空白的网页页面中的步骤。

例如，若网页页面数据下载时长需要300毫秒，空白的网页页面的加载时长需要200毫秒，则空白的网页页面加载完成后，等待网页页面数据下载完成，网页页面数据和空白的网页页面的加载总耗时为300毫秒。

在一个实施例中，步骤s204中的将网页页面数据渲染到空白的网页页面中，可以包括：

(1)从后台调用网页页面数据，并读取javascript脚本语言；

(2)根据javascript脚本语言将网页页面数据渲染到空白的网页页面中。

本步骤中，后台下载的网页页面数据，此时是以html(hypertextmarkuplanguage，超文本标记语言)代码的形式存在，这些html代码会经过网页浏览应用的处理，最终得到各种各样的网页页面。

具体的，网页浏览应用可以采用javascript脚本语言，构建一个树状结构的dom(documentobjectmodel，文档对象模型)对象，并构建一种类似于dom的树状结构的cssom(cascadingstylesheetsobjectmodel，层叠样式表对象模型)对象，将dom对象和cssom对象融合一棵rendertree(渲染树)，根据渲染树种确定的每个dom元素的样式规则；然后网页浏览应用可以具体计算dom对象中的每个元素最终在前端的显示屏幕上显示的大小位置，宽高等几何属性，在已确定了几何属性的元素上填充像素，比如绘制文字，颜色，图像，边框，阴影等等可视元素，这期间会产生多个图层，最后将多个图层按照合理的顺序合并到同一图层，并显示在网页浏览应用的前端。

步骤s206，将渲染后的网页页面在前端进行显示。

本步骤中，当网页浏览应用根据前端的显示屏幕上的几何属性和合适的可视元素渲染得到渲染后的网页页面后，将渲染后的网页页面在前端进行显示。

上述网页页面数据加载方法，其在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；在网页页面数据和空白的网页页面加载完成后，将网页页面数据渲染到空白的网页页面中；将渲染后的网页页面在前端进行显示。在下载网页页面数据的同时，同步加载空白的网页页面，可以减少在网页页面上加载网页页面数据的时间，减少白屏出现，提高加载效率。

上述实施例阐述了下载网页页面数据的同时，同步加载空白的网页页面，可以减少在网页页面上加载网页页面数据的时间的过程。以下将结合实施例进一步阐述采用不同方式对解析域名进行简化时网页页面数据加载的过程。

在一个实施例中，可以参考图5所示，将待访问的网页地址统一设置于指定域名的服务器中，可以简化根据网页地址查询对应的域名的步骤，具体的网页页面数据加载的过程可以如下：

s501，将待访问的网页地址统一设置于指定域名的服务器中；

s502，解析指定域名得到对应的互联网协议地址；

s503，接收对目标网页地址的访问请求；

s504，从互联网协议地址中获取与目标网页地址对应的网页页面数据；

s505，通过网络视图加载空白的网页页面；

s506，若网页页面数据先下载完成，等待空白的网页页面加载完成；

s507，若空白的网页页面先加载完成，等待网页页面数据下载完成；

s508，判断网页页面数据和空白的网页页面是否均加载完成；若是，执行步骤s509；

s509，将网页页面数据渲染到空白的网页页面中；

s510，将渲染后的网页页面在前端进行显示。

上述实施例中，步骤s505是与步骤s504同步启动，从而可以减少在网页页面上加载网页页面数据的时间，提高加载效率，将待访问的网页地址统一设置于指定域名的服务器中，解指定域名得到对应的互联网协议地址，可以省去根据待访问的网页地址查询域名的过程，并且提前将域名进行解析，当需要访问目标网页地址时，可以直接从互联网协议地址中获取与目标网页地址对应的网页页面数据，可以有效减少查询对应的域名并且对域名解析的时间，提高网页页面数据加载效率。

此外，下载网页页面数据的同时，同步加载空白的网页页面，可以减少在网页页面上加载网页页面数据的时间，减少白屏出现，提高加载效率。

在一个实施例中，可以参考图6所示，可以提前设置本地域名数据库，本地域名数据库中存储有多个域名和对应的已解析的互联网协议地址，当需要对目标域名进行解析时，可以直接从本地域名数据库中查询对应的互联网协议地址，具体的下载网页页面数据的过程可以如下：

s601，接收对目标网页地址的访问请求；

s602，获取与目标网页地址对应的目标域名；

s603，查询本地域名数据库中是否存储有与目标域名对应的目标互联网协议地址；若是，执行步骤s604，若否，执行步骤s605；

s604，从目标互联网协议地址中下载与目标网页地址对应的网页页面数据；

s605，解析目标域名得到对应的目标互联网协议地址；

s606，从解析得到的目标互联网协议地址中下载对应的网页页面数据；

s607，将解析的目标互联网协议地址更新到本地域名数据库中；

上述实施例中，提前设置本地域名数据库，本地域名数据库中存储有多个域名和对应的已解析的互联网协议地址，当需要对目标域名进行解析时，可以直接从本地域名数据库中查询和目标域名对应的目标互联网协议地址，若本地域名库中没有查询到与目标域名对应的目标互联网协议地址，再对目标域名进行解析，并将解析得到的目标互联网协议地址更新到本地域名数据库中，对本地域名数据库进行完善，下一次可以无需再对该目标域名进行解析，而是直接从本地域名库中查询，可以有效减少对域名解析的时间，提高网页页面数据加载效率。

上述网页页面数据加载方法，在下载网页页面数据的同时，同步加载空白的网页页面，可以减少在网页页面上加载网页页面数据的时间，减少白屏出现，提高加载效率。

进一步的，将待访问的网页地址统一设置于指定域名的服务器中，解指定域名得到对应的互联网协议地址，并且提前将域名进行解析，可以省去根据待访问的网页地址查询域名的过程，有效减少查询对应的域名并且对域名解析的时间，提高网页页面数据加载效率。

进一步的，对目标域名进行解析时，可以直接从本地域名数据库中查询和目标域名对应的目标互联网协议地址，可以有效减少对域名解析的时间，提高网页页面数据加载效率；若本地域名库中没有查询到与目标域名对应的目标互联网协议地址，再对目标域名进行解析，并将解析得到的目标互联网协议地址更新到本地域名数据库中，对本地域名数据库进行完善，下一次可以无需再对该目标域名进行解析。

如图7所示，图7为一个实施例中网页页面数据加载装置的结构示意图，本实施例中提供一种网页页面数据加载装置，包括加载模块701、渲染模块702和显示模块703，其中：

加载模块701，用于在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；

渲染模块702，用于在网页页面数据和空白的网页页面加载完成后，将网页页面数据渲染到空白的网页页面中；

显示模块703，用于将渲染后的网页页面在前端进行显示。

关于网页页面数据加载装置的具体限定可以参见上文中对于网页页面数据加载方法的限定，在此不再赘述。上述网页页面数据加载装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

如图8所示，图8为一个实施例中计算机设备的内部结构示意图。该计算机设备包括通过装置总线连接的处理器、非易失性存储介质、存储器和网络接口。其中，该计算机设备的非易失性存储介质存储有操作装置、数据库和计算机可读指令，数据库中可存储有控件信息序列，该计算机可读指令被处理器执行时，可使得处理器实现一种网页页面数据加载方法。该计算机设备的处理器用于提供计算和控制能力，支撑整个计算机设备的运行。该计算机设备的存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种网页页面数据加载方法。该计算机设备的网络接口用于与终端连接通信。本领域技术人员可以理解，图8中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提出了一种计算机设备，计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如下步骤：在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；在网页页面数据和空白的网页页面加载完成后，将网页页面数据渲染到空白的网页页面中；将渲染后的网页页面在前端进行显示。

在其中一个实施例中，处理器执行计算机程序时在网页页面数据和空白的网页页面加载完成后的步骤之前，还包括：若网页页面数据先下载完成，等待空白的网页页面加载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

在其中一个实施例中，处理器执行计算机程序时在网页页面数据和空白的网页页面加载完成后的步骤之前，还包括：若空白的网页页面先加载完成，等待网页页面数据下载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

在其中一个实施例中，处理器执行计算机程序时将网页页面数据渲染到空白的网页页面中的步骤，包括：从后台调用网页页面数据，并读取javascript脚本语言；根据javascript脚本语言将网页页面数据渲染到空白的网页页面中。

在其中一个实施例中，处理器执行计算机程序时在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面的步骤之前，还包括：接收对目标网页地址的访问请求，响应于访问请求执行加载网页页面的步骤。

在其中一个实施例中，处理器执行计算机程序时接收对目标网页地址的访问请求的步骤之前，还包括：将待访问的网页地址统一设置于指定域名的服务器中，解析指定域名得到对应的互联网协议地址，根据所解析得到的互联网协议地址访问待访问的网页地址。

在其中一个实施例中，处理器执行计算机程序时后台从服务器下载待显示的网页页面数据的步骤，包括：从互联网协议地址中获取与目标网页地址对应的网页页面数据。

在其中一个实施例中，处理器执行计算机程序时在后台向服务器请求并下载待显示的网页页面数据的步骤，包括：获取与目标网页地址对应的目标域名；根据目标域名确定对应的目标互联网协议地址；从目标互联网协议地址中下载与目标网页地址对应的网页页面数据。

在其中一个实施例中，处理器执行计算机程序时根据目标域名确定对应的目标互联网协议地址的步骤，包括：在本地域名数据库中查找与目标域名对应的目标互联网协议地址，若在本地域名数据库中未查询到对应的目标互联网协议地址，则解析目标域名得到对应的目标互联网协议地址，并将目标互联网协议地址更新到本地域名数据库中。

在一个实施例中，提出了一种存储有计算机可读指令的存储介质，该计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如下步骤：在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面；在网页页面数据和空白的网页页面加载完成后，将网页页面数据渲染到空白的网页页面中；将渲染后的网页页面在前端进行显示。

在其中一个实施例中，计算机可读指令被处理器执行时在网页页面数据和空白的网页页面加载完成后的步骤之前，还包括：若网页页面数据先下载完成，等待空白的网页页面加载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

在其中一个实施例中，计算机可读指令被处理器执行时在网页页面数据和空白的网页页面加载完成后的步骤之前，还包括：若空白的网页页面先加载完成，等待网页页面数据下载完成后，执行将网页页面数据渲染到空白的网页页面中的步骤。

在其中一个实施例中，计算机可读指令被处理器执行时将网页页面数据渲染到空白的网页页面中的步骤，包括：从后台调用网页页面数据，并读取javascript脚本语言；根据javascript脚本语言将网页页面数据渲染到空白的网页页面中。

在其中一个实施例中，计算机可读指令被处理器执行时在加载网页页面时，在后台向服务器请求并下载待显示的网页页面数据，并通过网络视图同步加载空白的网页页面的步骤之前，还包括：接收对目标网页地址的访问请求，响应于访问请求执行加载网页页面的步骤。

在其中一个实施例中，计算机可读指令被处理器执行时接收对目标网页地址的访问请求的步骤之前，还包括：将待访问的网页地址统一设置于指定域名的服务器中，解析指定域名得到对应的互联网协议地址，根据所解析得到的互联网协议地址访问待访问的网页地址。

在其中一个实施例中，计算机可读指令被处理器执行时后台从服务器下载待显示的网页页面数据的步骤，包括：从互联网协议地址中获取与目标网页地址对应的网页页面数据。

在其中一个实施例中，计算机可读指令被处理器执行时在后台向服务器请求并下载待显示的网页页面数据的步骤，包括：获取与目标网页地址对应的目标域名；根据目标域名确定对应的目标互联网协议地址；从目标互联网协议地址中下载与目标网页地址对应的网页页面数据。

在其中一个实施例中，计算机可读指令被处理器执行时根据目标域名确定对应的目标互联网协议地址的步骤，包括：在本地域名数据库中查找与目标域名对应的目标互联网协议地址，若在本地域名数据库中未查询到对应的目标互联网协议地址，则解析目标域名得到对应的目标互联网协议地址，并将目标互联网协议地址更新到本地域名数据库中。

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

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