CN113343154B - 页面加载方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明涉及数据处理技术领域，提供一种页面加载方法、装置、电子设备及存储介质，包括：响应于页面访问指令，进入H5页面；在H5页面显示原生加载态；获取H5页面对应的第一HTML文件；根据第一HTML文件确定H5页面所需的第一资源，并下载第一资源；计算H5页面加载第一资源的首屏时间，根据首屏时间设置定时器，响应于定时器到期，隐藏原生加载态；根据第一资源对H5页面进行渲染并显示；响应于H5页面的切换指令，获取切换的H5页面所需的第二资源；根据第一资源及第二资源确定目标资源并下载目标资源；根据目标资源对切换的H5页面进行渲染并显示。本发明不仅能够解决白屏问题，提高页面加载效果，还能在页面切换时快速切换页面。

Description

页面加载方法、装置、电子设备及存储介质

技术领域

本发明涉及数据处理技术领域，具体涉及一种页面加载方法、装置、电子设备及存储介质。

背景技术

现有的页面加载方法包括Webview加载态和原生加载态，但Webview加载态是纯Webview完成的，由于Webview需要先下载HTML文件，才能展示加载态，因此不可避免在刚刚进入页面时会有一定的白屏时间，影响了用户体验。而使用原生加载态，可以从一进入页面即展示加载态，避免了页面白屏，但原生加载态展示时间过长，即使已经加载出了部分内容，展示的还是加载态，同样严重影响了用户体验。由于其要等到Webview加载完成才隐藏加载态，当遇到复杂的页面，特别是多图和大图页面，当有部分内容在Webview中渲染出来了时，加载完成函数(onPageFinished)还是不会被回调，只有等到所有内容加载完毕，该函数才会被回调，此时距离部分内容在Webivew中渲染可能有几秒钟，大幅延长了加载态的时间。

发明内容

鉴于以上内容，有必要提出一种页面加载方法、装置、电子设备及存储介质，能够解决白屏问题，提高页面加载效果。

本发明的第一方面提供一种页面加载方法，所述方法包括：

响应于页面访问指令，进入H5页面；

在所述H5页面显示原生加载态；

获取所述H5页面对应的第一HTML文件；

根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源；

计算所述H5页面加载所述第一资源的首屏时间；

根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

根据所述第一资源对所述H5页面进行渲染并显示；

响应于H5页面的切换指令，获取所述切换的H5页面所需的第二资源；

根据所述第一资源及所述第二资源确定目标资源并下载所述目标资源；

根据所述目标资源对所述切换的H5页面进行渲染并显示。

在一个可选的实施方式中，所述根据所述第一HTML文件确定所述H5页面所需的第一资源包括：

对所述第一HTML文件进行解析，得到多个脚本语言节点；

根据所述多个脚本语言节点内容创建DOM节点树；

从所述DOM节点树的根节点开始遍历所述DOM树中的每一个DOM节点；

将遍历到的DOM节点内容确定为所述H5页面所需的第一资源。

在一个可选的实施方式中，所述下载所述第一资源包括：

向预设服务器发起所述第一资源的获取请求，所述第一资源的获取请求用于获取所述第一资源的目标资源路径；

接收所述预设服务器针对所述第一资源的获取请求的反馈信息，所述反馈信息中携带所述目标资源路径；

下载所述目标资源路径对应的第一资源。

在一个可选的实施方式中，所述计算所述H5页面加载所述第一资源的首屏时间包括：

获取接收到所述页面访问指令的第一时间点；

通过视窗属性值获取所述H5页面的可视区域，并从所述第一资源中获取位于所述可视区域内的目标元素；

获取所述目标元素的打开时间并根据所述打开时间确定第二时间点；

根据所述第二时间点及所述第一时间点计算首屏时间。

在一个可选的实施方式中，在隐藏所述原生加载态之后，所述方法还包括：

遍历获取所述第一资源的标签，并在每个标签中添加目标事件；

查看所述目标事件的状态；

根据所述目标事件的状态判断所述第一资源是否下载完毕；

当根据所述目标事件的状态确定所述第一资源下载完毕，触发所述下载完毕指令并执行所述根据所述第一资源对所述H5页面进行渲染并显示。

在一个可选的实施方式中，所述根据所述目标事件的状态判断所述第一资源是否下载完毕包括：

判断每个目标事件的状态是否为预设状态；

当每个目标事件的状态为所述预设状态时，确定所述第一资源下载完毕；

当至少有一个目标事件的状态不为所述预设状态时，确定所述第一资源未下载完毕。

在一个可选的实施方式中，所述目标资源为所述第一资源中与所述第二资源不同的资源。

本发明的第二方面提供一种页面加载装置，所述装置包括：

进入模块，用于响应于页面访问指令，进入H5页面；

显示模块，用于在所述H5页面显示原生加载态；

获取模块，用于获取所述H5页面对应的第一HTML文件；

下载模块，用于根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源；

计算模块，用于计算所述H5页面加载所述第一资源的首屏时间；

隐藏模块，用于根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

渲染模块，用于根据所述第一资源对所述H5页面进行渲染并显示；

所述获取模块，还用于响应于H5页面的切换指令，获取所述切换的H5页面所需的第二资源；

所述下载模块，还用于根据所述第一资源及所述第二资源确定目标资源并下载所述目标资源；

所述渲染模块，还用于根据所述目标资源对所述切换的H5页面进行渲染并显示。

本发明的第三方面提供一种电子设备，所述电子设备包括处理器和存储器，所述处理器用于执行存储器中存储的计算机程序时实现所述页面加载方法。

本发明的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述页面加载方法。

综上所述，本发明所述的页面加载方法、装置、电子设备及存储介质，响应于页面访问指令，进入H5页面，并在一进入所述H5页面时，在所述H5页面显示原生加载态，由于H5页面放在Webview中，属于原生页面的一部分，因此能够有效的避免纯Webview加载态导致出现的白屏问题。在获取到H5页面对应的第一HTML文件之后，根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源，计算所述H5页面加载所述第一资源的首屏时间，根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态，同时根据所述第一资源对所述H5页面进行渲染并显示。由于本申请能够精确的计算出H5首屏时间，首屏时间小于页面资源全部加载完成的时间，因此能够避免原生加载态方案加载时间过长的问题，从而达到在内容刚渲染出来即展示给用户的效果，提高了页面渲染的效果。

附图说明

图1是本发明实施例一提供的页面加载方法的流程图。

图2是本发明实施例二提供的页面加载装置的结构图。

图3是本发明实施例三提供的电子设备的结构示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施例对本发明进行详细描述。需要说明的是，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述在一个可选的实施方式中实施例的目的，不是旨在于限制本发明。

本发明实施例提供的页面加载方法由电子设备执行，相应地，页面加载装置运行于电子设备中。

实施例一

图1是本发明实施例一提供的页面加载方法的流程图。所述页面加载方法具体包括以下步骤，根据不同的需求，该流程图中步骤的顺序可以改变，某些可以省略。

S11，响应于页面访问指令，进入H5页面。

电子设备接收用户发起的应用程序启动指令，所述应用程序启动指令用于启动应用程序，接收针对应用程序的目标网页的访问指令之后，进入并显示H5页面。不同的目标网页对应的H5页面不同。

其中，所述应用程序可以是装载于电子设备中的任意一个应用类APP，例如，办公类应用、阅读类应用、购物类应用、游戏类应用等等，在此不做限定。

本实施例中的页面是指HTML.5(H5)页面，电子设备中的应用程序通过网络视图(webview)的形式，嵌入了H5页面，由于H5页面在打开时需要经历较多的流程，白屏时间较长，导致用户感知到页面打开慢。WebView是APP中一个非常实用的组件，基于Webkit网页渲染引擎，可以通过加载HTML数据的方式便捷地展现软件的界面的终端组件。

S12，在所述H5页面显示原生加载态。

现有技术是在H5页面显示Webview加载态，但是显示webview加载态，会导致出现白屏问题。白屏是在指定的界面区域只有单一颜色，例如在指定的内容区域只有黑色。

本实施例通过在H5页面显示原生加载态，由于H5页面放在Webview中，属于原生页面的一部分，因此能够有效的避免显示Webview加载态，从而避免出现白屏。

S13，获取所述H5页面对应的第一HTML文件。

电子设备在加载H5页面时，首先获取页面统一资源定位符(Uniform ResourceLocator，URL)，然后向预设服务器发出超文本传输协议(HyperText Transfer Protocol，HTTP)请求，预设服务器返回超文本标记语言(HyperText Markup Language，HTML)文件。

S14，根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源。

H5页面所需的第一资源是指需要显示在H5页面中的资源，所述第一资源可以分为css、js、png、svg、ico等资源类型，包括图片，文件等。

在一个可选的实施方式中，所述根据所述第一HTML文件确定所述H5页面所需的第一资源包括：

对所述第一HTML文件进行解析，得到多个脚本语言节点；

根据所述多个脚本语言节点内容创建DOM节点树；

从所述DOM节点树的根节点开始遍历所述DOM树中的每一个DOM节点；

将遍历到的DOM节点内容确定为所述H5页面所需的第一资源。

具体可以先输入H5页面的超文本标记语言HTML源代码，然后对该超文本标记语言HTML源代码进行解析，并创建保存有H5页面每一个脚本语言节点内容的文档对象模型DOM节点树。

在创建DOM节点树之后，可以从DOM节点树的根节点开始检测，并遍历所述DOM节点树中的每一个脚本语言节点(DOM节点)。

还可以每一个DOM节点都会被执行检查，将每一个DOM节点蕴含文本信息、图片、音频和视频信息的节点分别存储在不同的节点组中：将文本信息类的节点存储在文本信息节点组中、将图片类的节点存储在图片节点组中、将音频类的节点存储在音频节点组中、将视频类的节点存储在视频节点组中，完成DOM树的重建。

在一个可选的实施方式中，所述下载所述第一资源包括：

向预设服务器发起所述第一资源的获取请求，所述第一资源的获取请求用于获取所述第一资源的目标资源路径；

接收所述预设服务器针对所述第一资源的获取请求的反馈信息，所述反馈信息中携带所述目标资源路径；

下载所述目标资源路径对应的第一资源。

其中，上述预设服务器可为用户自行设置或者系统默认，该预设服务器可为云端服务器、组件服务器或者物理服务器等等，在此不作限定。

其中，该预设服务器可用于存储应用程序的资源包，该资源包中可包括以下至少一种：音频、视频、图片、文字等等，在此不作限定。资源包可指网页或者该网页对应的地址信息压缩包，由于有些网页内部包含一些大文件，因此，一般会将网页或者网页对应的地址信息压缩存储在上述预设服务器，以减少电子设备内部内存的损耗与占用。

电子设备将HTML转换成文档对象模型树(Document Object Model，DOM)的过程中如果发现DOM节点树中的某个节点引用了JavaScript(以下简称JS)，则向预设服务器发送JS请求，从服务器下载JS文件，浏览器根据JS文件渲染DOM树，直到DOM树上所有节点均被渲染完成，浏览器完成页面加载。

S15，计算所述H5页面加载所述第一资源的首屏时间。

首屏时间是用户打开一个网页并能看到该网页第一屏内容的时间，表示用户可以正常浏览并使用该网页的第一屏内容。电子设备通过寻找首屏区域内的所有资源，计算资源加载完的时间得到首屏时间，根据首屏时间确定隐藏原生加载态的时间，在首屏资源加载完的同时隐藏原生加载态。

在一个可选的实施方式中，所述计算所述H5页面加载所述第一资源的首屏时间包括：

获取接收到所述页面访问指令的第一时间点；

通过视窗属性值获取所述H5页面的可视区域，并从所述第一资源中获取位于所述可视区域内的目标元素；

获取所述目标元素的打开时间并根据所述打开时间确定第二时间点；

根据所述第二时间点及所述第一时间点计算首屏时间。

其中，第一时间点是指触发页面访问指令的时间点。可视区域是指H5页面展示第一屏内容的区域，视窗(Viewport)用于获取网页的可视区域，即页面能够被浏览的范围，由于网页是在浏览器中打开，实质上获取的就是浏览器窗口的可视区域；视窗属性值包括了相对页面左上角原点的宽度偏移量(width)和高度偏移量(height)。

将每个元素的位置信息分别与所述可视区域进行比对，判断各所述元素是否位于可视区域内；若所述元素位于可视区域内，则确定所述元素为可视区域内的目标元素，并获取该目标元素的打开时间；若所述元素不位于可视区域内，则确定所述元素为非可视区域内的目标元素。

所述目标元素包括多个元素，根据每个元素的打开时间，确定最晚打开时间，并将该最晚打开时间作为第二时间点。将第二时间点减去第一时间点得到的时间确定为首屏时间。

该可选的实施方式，通过获取可视区域以及元素的位置信息确定目标元素，进而通过目标元素的打开时间计算得到首屏时间，由此获取到了用户实际感受到的首屏时间，提高了首屏时间获取的准确性和可靠性。

S16，根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态。

响应于定时器到期，H5通过jsbridge通知原生隐藏原生加载态。

现有技术要等到Webview加载完成才会隐藏加载态，当遇到复杂的页面，尤其是多图和大图页面时，只有部分资源在Webview中渲染出来时，加载完成函数(onPageFinished)还是不会被回调，只有等到所有资源加载完毕后加载完成函数才会被回调，但此时距离部分资源在Webivew中渲染可能有几秒钟，延长了加载态的时间。本实施例通过计算首屏时间确定原生加载态的隐藏时间，由于首屏时间小于页面资源全部加载完成的时间，因此能够避免原生加载态加载时间过长的问题，从而达到在内容刚渲染出来即展示给用户的效果，提高了页面渲染的效果。

在一个可选的实施方式中，在隐藏所述原生加载态之后，所述方法还包括：

遍历获取所述第一资源的标签，并在每个标签中添加目标事件；

查看所述目标事件的状态；

根据所述目标事件的状态判断所述第一资源是否下载完毕；

当根据所述目标事件的状态确定所述第一资源下载完毕，触发下载完毕指令并执行所述根据所述第一资源对所述H5页面进行渲染并显示。

其中，所述目标事件可以为document.onload事件。

电子设备可以以轮询的方式查看每个标签中的目标事件的状态。所述状态可以包括已完成和正在处理中。

在一个可选的实施方式中，所述根据所述目标事件的状态判断所述第一资源是否下载完毕包括：

判断每个目标事件的状态是否为预设状态；

当每个目标事件的状态为所述预设状态时，确定所述第一资源下载完毕；

当至少有一个目标事件的状态不为所述预设状态时，确定所述第一资源未下载完毕。

所有的onload事件状态均已完成，此时认为首屏已经加载完成。

S17，根据所述第一资源对所述H5页面进行渲染并显示。

根据第一资源进行页面渲染，在所述H5页面渲染完成后，在所述述H5页面上加载所述第一资源，以完整显示所述H5页面。

在一个可选的实施方式中，所述方法还包括：

响应于H5页面的切换指令，获取所述切换的H5页面所需的第二资源；

根据所述第一资源及所述第二资源确定目标资源并下载所述目标资源；

根据所述目标资源对所述切换的H5页面进行渲染并显示。

响应于H5页面的切换指令，获取切换的H5页面对应的第二HTML文件，对所述第二HTML文件进行解析，得到所述切换的H5页面所需的第二资源；

其中，所述目标资源为所述第一资源中与所述第二资源不同的资源。

本实施例中，在H5页面切换时，会发生资源更新，现有技术中，服务端会将更新后的、切换的H5页面的全部资源再次下发至电子设备。由于H5页面切换前后，大部分资源是相同的，仅有发生更新的部分资源不同，因此，仅对这部分不同的资源进行更新，不仅保证了资源更新的及时性，并且由于更新的资源属于增量资源，而非全量资源，因此能够尽可能少的进行资源加载，降低内存以及流量的浪费。

电子设备可以通过消息识别工具确定第二资源中的目标资源，即消息识别工具会比较本次接收到的第二资源与上一次接收到的第一资源，并筛选出第二资源中与第一资源不同的部分，作为目标资源。在所述述切换的H5页面上加载所述目标资源及所述第一资源中除了所述目标资源之外的资源，以完整显示所述述切换的H5页面。

本发明提供的页面加载方法，响应于页面访问指令，进入H5页面，并在一进入所述H5页面时，在所述H5页面显示原生加载态，由于H5页面放在Webview中，属于原生页面的一部分，因此能够有效的避免纯Webview加载态导致出现的白屏问题。在获取到H5页面对应的第一HTML文件之后，根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源，计算所述H5页面加载所述第一资源的首屏时间，根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态，同时根据所述第一资源对所述H5页面进行渲染并显示。由于本申请能够精确的计算出H5首屏时间，首屏时间小于页面资源全部加载完成的时间，因此能够避免原生加载态方案加载时间过长的问题，从而达到在内容刚渲染出来即展示给用户的效果，提高了页面渲染的效果。

实施例二

图2是本发明实施例二提供的页面加载装置的结构图。

在一些实施例中，所述页面加载装置20可以包括多个由计算机程序段所组成的功能模块。所述页面加载装置20中的各个程序段的计算机程序可以存储于电子设备的存储器中，并由至少一个处理器所执行，以执行(详见图1描述)页面加载的功能。

本实施例中，所述页面加载装置20根据其所执行的功能，可以被划分为多个功能模块。所述功能模块可以包括：进入模块201、显示模块202、获取模块203、下载模块204、计算模块205、隐藏模块206、触发模块207及渲染模块208。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。

所述进入模块201，用于响应于页面访问指令，进入H5页面。

电子设备接收用户发起的应用程序启动指令，所述应用程序启动指令用于启动应用程序，接收针对应用程序的目标网页的访问指令之后，进入并显示H5页面。不同的目标网页对应的H5页面不同。

其中，所述应用程序可以是装载于电子设备中的任意一个应用类APP，例如，办公类应用、阅读类应用、购物类应用、游戏类应用等等，在此不做限定。

本实施例中的页面是指HTML.5(H5)页面，电子设备中的应用程序通过网络视图(webview)的形式，嵌入了H5页面，由于H5页面在打开时需要经历较多的流程，白屏时间较长，导致用户感知到页面打开慢。WebView是APP中一个非常实用的组件，基于Webkit网页渲染引擎，可以通过加载HTML数据的方式便捷地展现软件的界面的终端组件。

所述显示模块202，用于在所述H5页面显示原生加载态。

现有技术是在H5页面显示Webview加载态，但是显示webview加载态，会导致出现白屏问题。白屏是在指定的界面区域只有单一颜色，例如在指定的内容区域只有黑色。

本实施例通过在H5页面显示原生加载态，由于H5页面放在Webview中，属于原生页面的一部分，因此能够有效的避免显示Webview加载态，从而避免出现白屏。

所述获取模块203，用于获取所述H5页面对应的第一HTML文件。

电子设备在加载H5页面时，首先获取页面统一资源定位符(Uniform ResourceLocator，URL)，然后向预设服务器发出超文本传输协议(HyperText Transfer Protocol，HTTP)请求，预设服务器返回超文本标记语言(HyperText Markup Language，HTML)文件。

所述下载模块204，用于根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源。

H5页面所需的第一资源是指需要显示在H5页面中的资源，所述第一资源可以分为css、js、png、svg、ico等资源类型，包括图片，文件等。

在一个可选的实施方式中，所述下载模块204根据所述第一HTML文件确定所述H5页面所需的第一资源包括：

对所述第一HTML文件进行解析，得到多个脚本语言节点；

根据所述多个脚本语言节点内容创建DOM节点树；

从所述DOM节点树的根节点开始遍历所述DOM树中的每一个DOM节点；

将遍历到的DOM节点内容确定为所述H5页面所需的第一资源。

具体可以先输入H5页面的超文本标记语言HTML源代码，然后对该超文本标记语言HTML源代码进行解析，并创建保存有H5页面每一个脚本语言节点内容的文档对象模型DOM节点树。

在创建DOM节点树之后，可以从DOM节点树的根节点开始检测，并遍历所述DOM节点树中的每一个脚本语言节点(DOM节点)。

还可以每一个DOM节点都会被执行检查，将每一个DOM节点蕴含文本信息、图片、音频和视频信息的节点分别存储在不同的节点组中：将文本信息类的节点存储在文本信息节点组中、将图片类的节点存储在图片节点组中、将音频类的节点存储在音频节点组中、将视频类的节点存储在视频节点组中，完成DOM树的重建。

在一个可选的实施方式中，所述下载模块204下载所述第一资源包括：

向预设服务器发起所述第一资源的获取请求，所述第一资源的获取请求用于获取所述第一资源的目标资源路径；

接收所述预设服务器针对所述第一资源的获取请求的反馈信息，所述反馈信息中携带所述目标资源路径；

下载所述目标资源路径对应的第一资源。

其中，上述预设服务器可为用户自行设置或者系统默认，该预设服务器可为云端服务器、组件服务器或者物理服务器等等，在此不作限定。

其中，该预设服务器可用于存储应用程序的资源包，该资源包中可包括以下至少一种：音频、视频、图片、文字等等，在此不作限定。资源包可指网页或者该网页对应的地址信息压缩包，由于有些网页内部包含一些大文件，因此，一般会将网页或者网页对应的地址信息压缩存储在上述预设服务器，以减少电子设备内部内存的损耗与占用。

电子设备将HTML转换成文档对象模型树(Document Object Model，DOM)的过程中如果发现DOM节点树中的某个节点引用了JavaScript(以下简称JS)，则向预设服务器发送JS请求，从服务器下载JS文件，浏览器根据JS文件渲染DOM树，直到DOM树上所有节点均被渲染完成，浏览器完成页面加载。

所述计算模块205，计算所述H5页面加载所述第一资源的首屏时间。

首屏时间是用户打开一个网页并能看到该网页第一屏内容的时间，表示用户可以正常浏览并使用该网页的第一屏内容。电子设备通过寻找首屏区域内的所有资源，计算资源加载完的时间得到首屏时间，根据首屏时间确定隐藏原生加载态的时间，在首屏资源加载完的同时隐藏原生加载态。

在一个可选的实施方式中，所述计算模块205计算所述H5页面加载所述第一资源的首屏时间包括：

获取接收到所述页面访问指令的第一时间点；

通过视窗属性值获取所述H5页面的可视区域，并从所述第一资源中获取位于所述可视区域内的目标元素；

获取所述目标元素的打开时间并根据所述打开时间确定第二时间点；

根据所述第二时间点及所述第一时间点计算首屏时间。

其中，第一时间点是指触发页面访问指令的时间点。可视区域是指H5页面展示第一屏内容的区域，视窗(Viewport)用于获取网页的可视区域，即页面能够被浏览的范围，由于网页是在浏览器中打开，实质上获取的就是浏览器窗口的可视区域；视窗属性值包括了相对页面左上角原点的宽度偏移量(width)和高度偏移量(height)。

将每个元素的位置信息分别与所述可视区域进行比对，判断各所述元素是否位于可视区域内；若所述元素位于可视区域内，则确定所述元素为可视区域内的目标元素，并获取该目标元素的打开时间；若所述元素不位于可视区域内，则确定所述元素为非可视区域内的目标元素。

所述目标元素包括多个元素，根据每个元素的打开时间，确定最晚打开时间，并将该最晚打开时间作为第二时间点。将第二时间点减去第一时间点得到的时间确定为首屏时间。

该可选的实施方式，通过获取可视区域以及元素的位置信息确定目标元素，进而通过目标元素的打开时间计算得到首屏时间，由此获取到了用户实际感受到的首屏时间，提高了首屏时间获取的准确性和可靠性。

所述隐藏模块206，用于根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态。

响应于定时器到期，H5通过jsbridge通知原生隐藏原生加载态。

现有技术要等到Webview加载完成才会隐藏加载态，当遇到复杂的页面，尤其是多图和大图页面时，只有部分资源在Webview中渲染出来时，加载完成函数(onPageFinished)还是不会被回调，只有等到所有资源加载完毕后加载完成函数才会被回调，但此时距离部分资源在Webivew中渲染可能有几秒钟，延长了加载态的时间。本实施例通过计算首屏时间确定原生加载态的隐藏时间，由于首屏时间小于页面资源全部加载完成的时间，因此能够避免原生加载态加载时间过长的问题，从而达到在内容刚渲染出来即展示给用户的效果，提高了页面渲染的效果。

在一个可选的实施方式中，在隐藏所述原生加载态之后，所述触发模块207，用于遍历获取所述第一资源的标签，并在每个标签中添加目标事件；查看所述目标事件的状态；根据所述目标事件的状态判断所述第一资源是否下载完毕；当根据所述目标事件的状态确定所述第一资源下载完毕，触发下载完毕指令并执行所述根据所述第一资源对所述H5页面进行渲染并显示。

其中，所述目标事件可以为document.onload事件。

电子设备可以以轮询的方式查看每个标签中的目标事件的状态。所述状态可以包括已完成和正在处理中。

在一个可选的实施方式中，所述根据所述目标事件的状态判断所述第一资源是否下载完毕包括：

判断每个目标事件的状态是否为预设状态；

当每个目标事件的状态为所述预设状态时，确定所述第一资源下载完毕；

当至少有一个目标事件的状态不为所述预设状态时，确定所述第一资源未下载完毕。

所有的onload事件状态均已完成，此时认为首屏已经加载完成。

所述渲染模块208，用于根据所述第一资源对所述H5页面进行渲染并显示。

根据第一资源进行页面渲染，在所述H5页面渲染完成后，在所述述H5页面上加载所述第一资源，以完整显示所述H5页面。

在一个可选的实施方式中，所述获取模块203，还用于响应于H5页面的切换指令，获取切换的H5页面对应的第二HTML文件；对所述第二HTML文件进行解析，得到所述切换的H5页面所需的第二资源。

所述下载模块204，还用于根据所述第一资源及所述第二资源确定目标资源，其中，所述目标资源为所述第一资源中与所述第二资源不同的资源；下载所述目标资源。

所述渲染模块208，还用于根据所述目标资源对所述切换的H5页面进行渲染并显示。

本实施例中，在H5页面切换时，会发生资源更新，现有技术中，服务端会将更新后的、切换的H5页面的全部资源再次下发至电子设备。由于H5页面切换前后，大部分资源是相同的，仅有发生更新的部分资源不同，因此，仅对这部分不同的资源进行更新，不仅保证了资源更新的及时性，并且由于更新的资源属于增量资源，而非全量资源，因此能够尽可能少的进行资源加载，降低内存以及流量的浪费。

电子设备可以通过消息识别工具确定第二资源中的目标资源，即消息识别工具会比较本次接收到的第二资源与上一次接收到的第一资源，并筛选出第二资源中与第一资源不同的部分，作为目标资源。在所述述切换的H5页面上加载所述目标资源及所述第一资源中除了所述目标资源之外的资源，以完整显示所述述切换的H5页面。

本发明提供的页面加载装置，响应于页面访问指令，进入H5页面，并在一进入所述H5页面时，在所述H5页面显示原生加载态，由于H5页面放在Webview中，属于原生页面的一部分，因此能够有效的避免纯Webview加载态导致出现的白屏问题。在获取到H5页面对应的第一HTML文件之后，根据所述第一HTML文件确定所述H5页面所需的第一资源，下载所述第一资源，计算所述H5页面加载所述第一资源的首屏时间，根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态，同时根据所述第一资源对所述H5页面进行渲染并显示。由于本申请能够精确的计算出H5首屏时间，首屏时间小于页面资源全部加载完成的时间，因此能够避免原生加载态方案加载时间过长的问题，从而达到在内容刚渲染出来即展示给用户的效果，提高了页面渲染的效果。

实施例三

本实施例提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述页面加载方法实施例中的步骤，例如图1所示的S11-S17：

S11，响应于页面访问指令，进入H5页面；

S12，在所述H5页面显示原生加载态；

S13，获取所述H5页面对应的第一HTML文件；

S14，根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源；

S15，计算所述H5页面加载所述第一资源的首屏时间；

S16，根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

S17，根据所述第一资源对所述H5页面进行渲染并显示。

或者，该计算机程序被处理器执行时实现上述页面加载装置实施例中各模块/单元的功能，例如图2中的单元201-208：

所述进入模块201，用于响应于页面访问指令，进入H5页面；

所述显示模块202，用于在所述H5页面显示原生加载态；

所述获取模块203，用于获取所述H5页面对应的第一HTML文件；

所述下载模块204，用于根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源；

所述计算模块205，用于计算所述H5页面加载所述第一资源的首屏时间；

所述隐藏模块206，用于根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

所述渲染模块208，用于根据所述第一资源对所述H5页面进行渲染并显示。

实施例四

参阅图3所示，为本发明实施例三提供的电子设备的结构示意图。在本发明较佳实施例中，所述电子设备3包括存储器31、至少一个处理器32、至少一条通信总线33及收发器34。

本领域技术人员应该了解，图3示出的电子设备的结构并不构成本发明实施例的限定，既可以是总线型结构，也可以是星形结构，所述电子设备3还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置。

在一些实施例中，所述电子设备3是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路、可编程门阵列、数字处理器及嵌入式设备等。所述电子设备3还可包括客户设备，所述客户设备包括但不限于任何一种可与客户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、数码相机等。

需要说明的是，所述电子设备3仅为举例，其他现有的或今后可能出现的电子产品如可适应于本发明，也应包含在本发明的保护范围以内，并以引用方式包含于此。

在一些实施例中，所述存储器31中存储有计算机程序，所述计算机程序被所述至少一个处理器32执行时实现如所述的页面加载方法中的全部或者部分步骤。所述存储器31包括只读存储器(Read-Only Memory，ROM)、可编程只读存储器(Programmable Read-OnlyMemory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、一次可编程只读存储器(One-time Programmable Read-Only Memory，OTPROM)、电子擦除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。

进一步地，所述计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

在一些实施例中，所述至少一个处理器32是所述电子设备3的控制核心(ControlUnit)，利用各种接口和线路连接整个电子设备3的各个部件，通过运行或执行存储在所述存储器31内的程序或者模块，以及调用存储在所述存储器31内的数据，以执行电子设备3的各种功能和处理数据。例如，所述至少一个处理器32执行所述存储器中存储的计算机程序时实现本发明实施例中所述的页面加载方法的全部或者部分步骤；或者实现页面加载装置的全部或者部分功能。所述至少一个处理器32可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。

在一些实施例中，所述至少一条通信总线33被设置为实现所述存储器31以及所述至少一个处理器32等之间的连接通信。

尽管未示出，所述电子设备3还可以包括给各个部件供电的电源(比如电池)，优选的，电源可以通过电源管理装置与所述至少一个处理器32逻辑相连，从而通过电源管理装置实现管理充电、放电、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备3还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，既可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或，单数不排除复数。说明书中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (7)

1.一种页面加载方法，其特征在于，所述方法包括：

响应于页面访问指令，进入H5页面；

在所述H5页面显示原生加载态；

获取所述H5页面对应的第一HTML文件；

根据所述第一HTML文件确定所述H5页面所需的第一资源，包括：对所述第一HTML文件进行解析，得到多个脚本语言节点；根据所述多个脚本语言节点内容创建DOM节点树；从所述DOM节点树的根节点开始遍历所述DOM节点树中的每一个DOM节点；将遍历到的DOM节点内容确定为所述H5页面所需的第一资源，并下载所述第一资源，包括：向预设服务器发起所述第一资源的获取请求，所述第一资源的获取请求用于获取所述第一资源的目标资源路径；接收所述预设服务器针对所述第一资源的获取请求的反馈信息，所述反馈信息中携带所述目标资源路径；下载所述目标资源路径对应的第一资源；

计算所述H5页面加载所述第一资源的首屏时间，包括获取接收到所述页面访问指令的第一时间点；通过视窗属性值获取所述H5页面的可视区域，并从所述第一资源中获取位于所述可视区域内的目标元素；获取所述目标元素的打开时间并根据所述打开时间确定第二时间点；根据所述第二时间点及所述第一时间点计算首屏时间；

根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

根据所述第一资源对所述H5页面进行渲染并显示；

响应于H5页面的切换指令，获取切换的H5页面所需的第二资源；

根据所述第一资源及所述第二资源确定目标资源并下载所述目标资源；

根据所述目标资源对所述切换的H5页面进行渲染并显示。

2.如权利要求1所述的页面加载方法，其特征在于，在隐藏所述原生加载态之后，所述方法还包括：

遍历获取所述第一资源的标签，并在每个标签中添加目标事件；

查看所述目标事件的状态；

根据所述目标事件的状态判断所述第一资源是否下载完毕；

当根据所述目标事件的状态确定所述第一资源下载完毕，触发所述下载完毕指令并执行所述根据所述第一资源对所述H5页面进行渲染并显示。

3.如权利要求2所述的页面加载方法，其特征在于，所述根据所述目标事件的状态判断所述第一资源是否下载完毕包括：

判断每个目标事件的状态是否为预设状态；

当每个目标事件的状态为所述预设状态时，确定所述第一资源下载完毕；

当至少有一个目标事件的状态不为所述预设状态时，确定所述第一资源未下载完毕。

4.如权利要求1至3中任意一项所述的页面加载方法，其特征在于，所述目标资源为所述第一资源中与所述第二资源不同的资源。

5.一种页面加载装置，用于实现如权利要求1至4中任意一项所述的页面加载方法，其特征在于，所述装置包括：

进入模块，用于响应于页面访问指令，进入H5页面；

显示模块，用于在所述H5页面显示原生加载态；

获取模块，用于获取所述H5页面对应的第一HTML文件；

下载模块，用于根据所述第一HTML文件确定所述H5页面所需的第一资源，并下载所述第一资源；

计算模块，用于计算所述H5页面加载所述第一资源的首屏时间；

隐藏模块，用于根据所述首屏时间设置定时器，响应于所述定时器到期，隐藏所述原生加载态；

渲染模块，用于根据所述第一资源对所述H5页面进行渲染并显示；

所述获取模块，还用于响应于H5页面的切换指令，获取切换的H5页面所需的第二资源；

所述下载模块，还用于根据所述第一资源及所述第二资源确定目标资源并下载所述目标资源；

所述渲染模块，还用于根据所述目标资源对所述切换的H5页面进行渲染并显示。

6.一种电子设备，其特征在于，所述电子设备包括处理器和存储器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1至4中任意一项所述页面加载方法。

7.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4中任意一项所述页面加载方法。