CN111796824A - 页面加载方法、装置、服务器及介质 - Google Patents

Abstract

本发明涉及开发技术，提供一种页面加载方法、装置、服务器及介质。该方法能够确定待展示页面，量化加载待展示页面所需的目标时间，当目标时间大于预设时间时，获取待展示页面的可视区域范围，并获取待展示页面的目标框架，根据可视区域范围划分待展示页面，得到多个展示部分及划分顺序，确定与每个展示部分对应的加载任务，得到多个加载任务，根据划分顺序依次执行多个加载任务，得到页面元素，将加载到的页面元素依次融入目标框架，得到加载后的页面，通过有序加载页面元素，能够保证待展示页面加载时的顺滑状态，有效提高了页面整体加载的速度。此外，本发明还涉及区块链技术，所述目标框架存储于区块链中。

Description

页面加载方法、装置、服务器及介质

技术领域

本发明涉及开发技术领域，尤其涉及一种页面加载方法、装置、服务器及介质。

背景技术

目前，页面的加载可以通过加载待展示页面中的页面元素来完成。当待展示页面中的页面元素较多时，需要执行的JS任务的任务数量也相对较多，在资源有限的情况下(例如：带宽)，页面加载所耗费的时间也增多。为了缩短页面加载的时间，目前通过异步处理方式完成多个JS任务的执行，然而，在异步处理方式中，多个JS任务同时抢占CPU，使多数JS任务被挂起，导致页面元素被无序加载，从而没有减少页面整体加载的时间，影响了用户的体验感。

发明内容

鉴于以上内容，有必要提供一种页面加载方法、装置、服务器及介质，不仅能够保证待展示页面加载时的顺滑状态，还能有效提高页面整体加载的速度。

一种页面加载方法，所述页面加载方法包括：

当接收到加载请求时，从所述加载请求中确定待展示页面；

量化加载所述待展示页面所需的目标时间；

当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架；

根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序；

确定与每个展示部分对应的加载任务，得到多个加载任务；

根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素；

将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

根据本发明优选实施例，所述量化加载所述待展示页面所需的目标时间包括：

获取预先在所述待展示页面中添加的锚点；

根据所述锚点确定所述待展示页面中每个页面结构对应的程序代码；

分析执行每个程序代码所需要的时间；

根据分析得到的时间确定所述目标时间。

根据本发明优选实施例，所述获取所述待展示页面的可视区域范围包括：

确定发出所述加载请求的终端，并获取所述终端的显示区域的大小；

监听所述待展示页面的窗口变化事件；

当监听到所述待展示页面对应的窗口发生变化时，获取并解析监听日志，得到目标比例，并根据所述显示区域的大小及所述目标比例确定所述可视区域范围；或者

当在配置时间内未监听到所述待展示页面对应的窗口发生变化时，将所述显示区域的大小确定为所述可视区域范围。

根据本发明优选实施例，所述目标框架存储于区块链中，所述获取所述待展示页面的目标框架包括：

确定配置缓存库中是否存储与所述待展示页面对应的待确定框架；

当所述配置缓存库中存储与所述待展示页面对应的待确定框架时，从所述配置缓存库中获取与所述待确定框架对应的散列值，作为待验证散列值；

基于网络爬虫技术获取与所述待展示页面对应的当前框架的散列值，作为当前散列值；

对比所述待验证散列值与所述当前散列值；

当所述待验证散列值与所述当前散列值相同时，将所述待确定框架确定为所述目标框架；

还包括将所述目标框架存储于区块链中。

根据本发明优选实施例，所述根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序包括：

获取所述待展示页面的起始索引及结束索引；

以所述起始索引为起点，按照所述可视区域范围依次切割所述待展示页面，直至当前切割线至所述结束索引的区域大小小于或者等于所述可视区域范围的大小，停止切割，得到所述多个展示部分，并以切割顺序作为所述划分顺序。

根据本发明优选实施例，所述根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素包括：

对于任意加载任务，调用线程池中的多个线程同时执行所述任意加载任务中的多个指令，并确定与所述任意加载任务对应的任意展示部分；

检测所述任意展示部分是否完成加载；

当检测到所述任意展示部分完成加载时，根据所述划分顺序确定所述任意加载任务的下一任务，并触发执行所述下一任务，直至所述下一任务为所述多个加载任务中的最后一个任务，得到所述多个展示部分的页面元素。

根据本发明优选实施例，所述将加载到的页面元素依次融入所述目标框架，得到加载后的页面包括：

监听所述待展示页面上的滚动事件；

当所述待展示页面上发生滚动时，获取滚动偏移量；

根据所述滚动偏移量确定当前可视区域范围；

获取所述当前可视区域范围的目标页面元素，及获取所述目标页面元素的坐标；

根据所述坐标确定所述目标页面元素在所述目标框架中所处的位置，并将所述目标页面元素填充至所述位置上，得到所述加载后的页面。

一种页面加载装置，所述页面加载装置包括：

确定单元，用于当接收到加载请求时，从所述加载请求中确定待展示页面；

量化单元，用于量化加载所述待展示页面所需的目标时间；

获取单元，用于当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架；

划分单元，用于根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序；

所述确定单元，还用于确定与每个展示部分对应的加载任务，得到多个加载任务；

执行单元，用于根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素；

融入单元，用于将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

根据本发明优选实施例，所述量化单元具体用于：

获取预先在所述待展示页面中添加的锚点；

根据所述锚点确定所述待展示页面中每个页面结构对应的程序代码；

分析执行每个程序代码所需要的时间；

根据分析得到的时间确定所述目标时间。

根据本发明优选实施例，所述获取单元获取所述待展示页面的可视区域范围包括：

确定发出所述加载请求的终端，并获取所述终端的显示区域的大小；

监听所述待展示页面的窗口变化事件；

当监听到所述待展示页面对应的窗口发生变化时，获取并解析监听日志，得到目标比例，并根据所述显示区域的大小及所述目标比例确定所述可视区域范围；或者

当在配置时间内未监听到所述待展示页面对应的窗口发生变化时，将所述显示区域的大小确定为所述可视区域范围。

根据本发明优选实施例，所述目标框架存储于区块链中，所述获取单元获取所述待展示页面的目标框架包括：

确定配置缓存库中是否存储与所述待展示页面对应的待确定框架；

当所述配置缓存库中存储与所述待展示页面对应的待确定框架时，从所述配置缓存库中获取与所述待确定框架对应的散列值，作为待验证散列值；

基于网络爬虫技术获取与所述待展示页面对应的当前框架的散列值，作为当前散列值；

对比所述待验证散列值与所述当前散列值；

当所述待验证散列值与所述当前散列值相同时，将所述待确定框架确定为所述目标框架；

还包括将所述目标框架存储于区块链中。

根据本发明优选实施例，所述划分单元具体用于：

获取所述待展示页面的起始索引及结束索引；

以所述起始索引为起点，按照所述可视区域范围依次切割所述待展示页面，直至当前切割线至所述结束索引的区域大小小于或者等于所述可视区域范围的大小，停止切割，得到所述多个展示部分，并以切割顺序作为所述划分顺序。

根据本发明优选实施例，所述执行单元具体用于：

对于任意加载任务，调用线程池中的多个线程同时执行所述任意加载任务中的多个指令，并确定与所述任意加载任务对应的任意展示部分；

检测所述任意展示部分是否完成加载；

当检测到所述任意展示部分完成加载时，根据所述划分顺序确定所述任意加载任务的下一任务，并触发执行所述下一任务，直至所述下一任务为所述多个加载任务中的最后一个任务，得到所述多个展示部分的页面元素。

根据本发明优选实施例，所述融入单元具体用于：

监听所述待展示页面上的滚动事件；

当所述待展示页面上发生滚动时，获取滚动偏移量；

根据所述滚动偏移量确定当前可视区域范围；

获取所述当前可视区域范围的目标页面元素，及获取所述目标页面元素的坐标；

根据所述坐标确定所述目标页面元素在所述目标框架中所处的位置，并将所述目标页面元素填充至所述位置上，得到所述加载后的页面。

一种服务器，所述服务器包括：

存储器，存储至少一个指令；及

处理器，执行所述存储器中存储的指令以实现所述页面加载方法。

一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个指令，所述至少一个指令被服务器中的处理器执行以实现所述页面加载方法。

由以上技术方案可以看出，当目标时间大于预设时间时，意味着需要加载的页面元素的数量较多，本发明在待展示页面的页面元素较多的情况下，仍然能够有序加载页面元素，同时，在一定时间内对单个加载任务的执行，能够提高加载任务的执行速度，进而缩短待展示页面加载的时间，将加载到的页面元素依次融入所述目标框架，得到加载后的页面，通过有序加载页面元素，能够保证待展示页面加载时的顺滑状态，有效提高了页面整体加载的速度。

附图说明

图1是本发明页面加载方法的较佳实施例的流程图。

图2是本发明页面加载装置的较佳实施例的功能模块图。

图3是本发明实现页面加载方法的较佳实施例的服务器的结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

如图1所示，是本发明页面加载方法的较佳实施例的流程图。根据不同的需求，该流程图中步骤的顺序可以改变，某些步骤可以省略。

所述页面加载方法应用于智慧政务场景中，从而推动智慧城市的建设。所述页面加载方法应用于一个或者多个服务器中，所述服务器是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述服务器可以是任何一种可与用户进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、个人数字助理(Personal Digital Assistant，PDA)、游戏机、交互式网络电视(Internet Protocol Television，IPTV)、智能式穿戴式设备等。

所述服务器还可以包括网络设备和/或用户设备。其中，所述网络设备包括，但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量主机或网络服务器构成的云。

所述服务器所处的网络包括但不限于互联网、广域网、城域网、局域网、虚拟专用网络(Virtual Private Network，VPN)等。

S10，当接收到加载请求时，从所述加载请求中确定待展示页面。

在本发明的至少一个实施例中，所述加载请求中所携带的信息包括，但不限于：所述待展示页面对应的网址，进一步地，所述待展示页面可以是页面内容不变的网页，也可以是页面内容不断更新的网页，比如，用于播报实时监控信息的页面，具体的网页在本发明不作限制。

在本发明的至少一个实施例中，所述服务器获取预设标签，进一步地，所述服务器从所述加载请求所携带的所有信息中获取与所述预设标签对应的信息，作为所述网址，根据所述网址定位至所述待展示页面。

通过所述预设标签与所述网址的映射关系，能够准确地定位到所述待展示页面。

S11，量化加载所述待展示页面所需的目标时间。

在本发明的至少一个实施例中，使用锚点可以在代码文件中设置标记，这些标记通常放在代码文件的特定主题处或顶部。通过创建锚点的链接能够快速将访问者带到指定位置。例如，*若要链接到当前代码文件中的名为“top”的锚点，键入#top。如：<a href＝"#top">点击能够连接到TOP</a>。

在本发明的至少一个实施例中，所述服务器量化加载所述待展示页面所需的目标时间包括：

所述服务器获取预先在所述待展示页面中添加的锚点，所述服务器根据所述锚点确定所述待展示页面中每个页面结构对应的程序代码，所述服务器分析执行每个程序代码所需要的时间，进一步地，所述服务器根据分析得到的时间确定所述目标时间。

具体地，所述服务器可以调用Systrace分析工具分析执行每个程序代码所需要的时间，其中，Systrace分析工具主要用于分析系统调用耗时问题。

例如：所述服务器获取到预先在待展示页面中添加的锚点有top、content及foot，根据所述top确定页面标题结构对应的程序代码A，根据所述content确定页面内容结构对应的程序代码B，及根据所述foot确定页脚结构对应的程序代码C，通过分析所述程序代码A，得到执行所述程序代码A所需要的时间为20S，通过分析所述程序代码B，得到执行所述程序代码B所需要的时间为35S，及通过分析所述程序代码C，得到执行所述程序代码C所需要的时间为5S，综上分析，能够确定目标时间为20S+35S+5S＝60S。

通过锚点可以准确确定出每个页面结构对应的程序代码，从而能够有效、快速地量化加载所述待展示页面所需的目标时间。

S12，当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架。

需要强调的是，为进一步保证上述目标框架的私密和安全性，上述目标框架还可以存储于一区块链的节点中。

在本发明的至少一个实施例中，所述预设时间可以由用户根据需求自定义配置，所述预设时间可以是1分钟，也可以是30秒，本发明对此不作限制。当所述目标时间大于所述预设时间时，将会影响用户的体验。

进一步地，所述可视区域范围是指用户能够直接观看到的区域范围。

在本发明的至少一个实施例中，所述服务器获取所述待展示页面的可视区域范围包括：

所述服务器确定发出所述加载请求的终端，并获取所述终端的显示区域的大小，所述服务器监听所述待展示页面的窗口变化事件，当监听到所述待展示页面对应的窗口发生变化时，所述服务器获取并解析监听日志，得到目标比例，并根据所述显示区域的大小及所述目标比例确定所述可视区域范围，或者，当在配置时间内未监听到所述待展示页面对应的窗口发生变化时，所述服务器将所述显示区域的大小确定为所述可视区域范围。

通过上述实施方式，能够在所述待展示页面的窗口发生变化时，及时执行对所述可视区域范围的更新，进而能够准确确定所述待展示页面的可视区域范围。

在其他实施例中，所述服务器可以直接使用JavaScript代码中的“document.body.client Width”获取所述待展示页面的可视区域的宽度，以及使用JavaScript代码中的“document.body.client Height”获取所述待展示页面的可视区域的高度，从而得到所述待展示页面的可视区域范围。

通过上述实施方式，能够快速确定所述待展示页面的可视区域范围。

在本发明的至少一个实施例中，所述目标框架是用于存储所述待展示页面中的多个页面元素的框架，不同的页面对应的框架也会有所不同。

在本发明的至少一个实施例中，所述服务器获取所述待展示页面的目标框架包括：

所述服务器确定配置缓存库中是否存储与所述待展示页面对应的待确定框架，当所述配置缓存库中存储与所述待展示页面对应的待确定框架时，所述服务器从所述配置缓存库中获取与所述待确定框架对应的散列值，作为待验证散列值，进一步地，所述服务器基于网络爬虫技术获取与所述待展示页面对应的当前框架的散列值，作为当前散列值，所述服务器对比所述待验证散列值与所述当前散列值，当所述待验证散列值与所述当前散列值相同时，所述服务器将所述待确定框架确定为所述目标框架。

其中，所述配置缓存库是所述服务器的本地数据库，所述配置缓存库中存储加载过的页面与页面框架的映射关系，以及存储页面框架与散列值的映射关系。

通过确定所述配置缓存库中是否存储与所述待展示页面对应的框架，进而通过确定所述配置缓存库中存储的框架是否为最新版本的框架，不仅能够提高非首次加载所述待展示页面的加载速度，还能够确保获取到的框架是与所述待展示页面对应的最新版本的框架。

在其他实施例中，当所述配置缓存库中没有存储与所述待展示页面对应的框架，或者所述待验证散列值与所述当前散列值不同时，所述服务器从互联网上加载与所述待展示页面对应的框架。

S13，根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序。

在本发明的至少一个实施例中，所述待展示页面是由多个展示部分组成的。所述划分顺序与所述述多个展示部分的展示顺序相同。

在本发明的至少一个实施例中，所述服务器根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序包括：

所述服务器获取所述待展示页面的起始索引及结束索引，进一步地，所述服务器以所述起始索引为起点，按照所述可视区域范围依次切割所述待展示页面，直至当前切割线至所述结束索引的区域大小小于或者等于所述可视区域范围的大小，停止切割，得到所述多个展示部分，并以切割顺序作为所述划分顺序。

通过对所述待展示页面进行划分，能够便于后续多个展示部分的分步加载，进而能够避免一次加载带来的卡顿问题(例如，一个页面包含的页面元素很多，如果等所有页面元素都加载完毕再显示，那么用户在浏览页面时等待的时间是比较长的)。

在本发明的至少一个实施例中，所述服务器可以通过设置所述多个展示部分所处的页面层级实现对所述多个展示部分的显示或隐藏控制，其中，所述页面层级用于描述所述多个展示部分的展示顺序，所述页面层级的顺序与所述划分顺序相同。进一步地，所述服务器可以在所述待展示页面上设置用于选择显示多个展示部分的滚动条，通过拖动滚动条选择显示的展示部分。当展示部分处于当前展示区域时，该展示部分所处的层级最高。

S14，确定与每个展示部分对应的加载任务，得到多个加载任务。

在本发明的至少一个实施例中，所述多个加载任务可以是由JavaScript代码组成的任务，每个加载任务可以包括多个方法指令。

S15，根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素。

在本发明的至少一个实施例中，所述页面元素可以包括，但不限于：图片、文字信息等。

在本发明的至少一个实施例中，所述服务器根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素包括：

所述服务器对于任意加载任务，调用线程池中的多个线程同时执行所述任意加载任务中的多个指令，并确定与所述任意加载任务对应的任意展示部分，进一步地，所述服务器检测所述任意展示部分是否完成加载，当检测到所述任意展示部分完成加载时，所述服务器根据所述划分顺序确定所述任意加载任务的下一任务，并触发执行所述下一任务，直至所述下一任务为所述多个加载任务中的最后一个任务，得到所述多个展示部分的页面元素。

具体地，所述服务器可以通过调用complete()脚本检测所述任意展示部分是否完成加载。

通过上述实施方式，能够在所述任意加载任务完成处理后，及时触发执行所述下一任务，避免所述待展示页面加载过程中多余时间的消耗。

S16，将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

在本发明的至少一个实施例中，所述服务器将加载到的页面元素依次融入所述目标框架，得到加载后的页面包括：

所述服务器监听所述待展示页面上的滚动事件，当所述待展示页面上发生滚动时，所述服务器获取滚动偏移量，所述服务器根据所述滚动偏移量确定当前可视区域范围，所述服务器获取所述当前可视区域范围的目标页面元素，及获取所述目标页面元素的坐标，所述服务器根据所述坐标确定所述目标页面元素在所述目标框架中所处的位置，并将所述目标页面元素填充至所述位置上，得到所述加载后的页面。

通过将页面元素逐步填充至所述待展示页面中，并逐步展示出来，从而能够有效提高页面加载的速度，进而能够确保用户在浏览大数据量的页面时能够顺畅浏览，有效保证了页面加载的顺滑状态。

由以上技术方案可以看出，当目标时间大于预设时间时，意味着需要加载的页面元素的数量较多，本发明在待展示页面的页面元素较多的情况下，仍然能够有序加载页面元素，同时，在一定时间内对单个加载任务的执行，能够提高加载任务的执行速度，进而缩短待展示页面加载的时间，将加载到的页面元素依次融入所述目标框架，得到加载后的页面，通过有序加载页面元素，能够保证待展示页面加载时的顺滑状态，有效提高了页面整体加载的速度。

如图2所示，是本发明页面加载装置的较佳实施例的功能模块图。所述页面加载装置11包括确定单元110、量化单元111、获取单元112、划分单元113、执行单元114及融入单元115。本发明所称的模块/单元是指一种能够被处理器13所执行，并且能够完成固定功能的一系列计算机程序段，其存储在存储器12中。在本实施例中，关于各模块/单元的功能将在后续的实施例中详述。

当接收到加载请求时，确定单元110从所述加载请求中确定待展示页面。

在本发明的至少一个实施例中，所述加载请求中所携带的信息包括，但不限于：所述待展示页面对应的网址，进一步地，所述待展示页面可以是页面内容不变的网页，也可以是页面内容不断更新的网页，比如，用于播报实时监控信息的页面，具体的网页在本发明不作限制。

在本发明的至少一个实施例中，所述确定单元110获取预设标签，进一步地，所述确定单元110从所述加载请求所携带的所有信息中获取与所述预设标签对应的信息，作为所述网址，所述确定单元110根据所述网址定位至所述待展示页面。

通过所述预设标签与所述网址的映射关系，能够准确地定位到所述待展示页面。

量化单元111量化加载所述待展示页面所需的目标时间。

在本发明的至少一个实施例中，使用锚点可以在代码文件中设置标记，这些标记通常放在代码文件的特定主题处或顶部。通过创建锚点的链接能够快速将访问者带到指定位置。

例如，*若要链接到当前代码文件中的名为“top”的锚点，键入#top。如：<a href＝"#top">点击能够连接到TOP</a>。

在本发明的至少一个实施例中，所述量化单元111量化加载所述待展示页面所需的目标时间包括：

所述量化单元111获取预先在所述待展示页面中添加的锚点，进一步地，所述量化单元111根据所述锚点确定所述待展示页面中每个页面结构对应的程序代码，更进一步地，所述量化单元111分析执行每个程序代码所需要的时间，进一步地，所述量化单元111根据分析得到的时间确定所述目标时间。

具体地，所述量化单元111可以调用Systrace分析工具分析执行每个程序代码所需要的时间，其中，所述Systrace分析工具主要用于分析系统调用耗时问题。

例如：所述服务器获取到预先在待展示页面中添加的锚点有top、content及foot，根据所述top确定页面标题结构对应的程序代码A，根据所述content确定页面内容结构对应的程序代码B，及根据所述foot确定页脚结构对应的程序代码C，通过分析所述程序代码A，得到执行所述程序代码A所需要的时间为20S，通过分析所述程序代码B，得到执行所述程序代码B所需要的时间为35S，及通过分析所述程序代码C，得到执行所述程序代码C所需要的时间为5S，综上分析，能够确定目标时间为20S+35S+5S＝60S。

通过锚点可以准确确定出每个页面结构对应的程序代码，从而能够有效、快速地量化加载所述待展示页面所需的目标时间。

当所述目标时间大于预设时间时，获取单元112获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架。

需要强调的是，为进一步保证上述目标框架的私密和安全性，上述目标框架还可以存储于一区块链的节点中。

在本发明的至少一个实施例中，所述预设时间可以由用户根据需求自定义配置，所述预设时间可以是1分钟，也可以是30秒，本发明对此不作限制。当所述目标时间大于所述预设时间时，将会影响用户的体验。

进一步地，所述可视区域范围是指用户能够直接观看到的区域范围。

在本发明的至少一个实施例中，所述获取单元112获取所述待展示页面的可视区域范围包括：

所述获取单元112确定发出所述加载请求的终端，并获取所述终端的显示区域的大小，所述获取单元112监听所述待展示页面的窗口变化事件，当监听到所述待展示页面对应的窗口发生变化时，所述获取单元112获取并解析监听日志，得到目标比例，并根据所述显示区域的大小及所述目标比例确定所述可视区域范围，或者，当在配置时间内未监听到所述待展示页面对应的窗口发生变化时，所述获取单元112将所述显示区域的大小确定为所述可视区域范围。

通过上述实施方式，能够在所述待展示页面的窗口发生变化时，及时执行对所述可视区域范围的更新，进而能够准确确定所述待展示页面的可视区域范围。

在其他实施例中，所述服务器可以直接使用JavaScript代码中的“document.body.client Width”获取所述待展示页面的可视区域的宽度，以及使用JavaScript代码中的“document.body.client Height”获取所述待展示页面的可视区域的高度，从而得到所述待展示页面的可视区域范围。

通过上述实施方式，能够快速确定所述待展示页面的可视区域范围。

在本发明的至少一个实施例中，所述目标框架是用于存储所述待展示页面中的多个页面元素的框架，不同的页面对应的框架也会有所不同。

在本发明的至少一个实施例中，所述获取单元112获取所述待展示页面的目标框架包括：

所述获取单元112确定配置缓存库中是否存储与所述待展示页面对应的待确定框架，当所述配置缓存库中存储与所述待展示页面对应的待确定框架时，所述获取单元112从所述配置缓存库中获取与所述待确定框架对应的散列值，作为待验证散列值，进一步地，所述获取单元112基于网络爬虫技术获取与所述待展示页面对应的当前框架的散列值，作为当前散列值，所述获取单元112对比所述待验证散列值与所述当前散列值，当所述待验证散列值与所述当前散列值相同时，所述获取单元112将所述待确定框架确定为所述目标框架。

其中，所述配置缓存库是所述服务器的本地数据库，所述配置缓存库中存储加载过的页面与页面框架的映射关系，以及存储页面框架与散列值的映射关系。

通过确定所述配置缓存库中是否存储与所述待展示页面对应的框架，进而通过确定所述配置缓存库中存储的框架是否为最新版本的框架，不仅能够提高非首次加载所述待展示页面的加载速度，还能够确保获取到的框架是与所述待展示页面对应的最新版本的框架。

在其他实施例中，当所述配置缓存库中没有存储与所述待展示页面对应的框架，或者所述待验证散列值与所述当前散列值不同时，所述获取单元112从互联网上加载与所述待展示页面对应的框架。

划分单元113根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序。

在本发明的至少一个实施例中，所述待展示页面是由多个展示部分组成的。所述划分顺序与所述述多个展示部分的展示顺序相同。

在本发明的至少一个实施例中，所述划分单元113根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序包括：

所述划分单元113获取所述待展示页面的起始索引及结束索引，进一步地，所述划分单元113以所述起始索引为起点，按照所述可视区域范围依次切割所述待展示页面，直至当前切割线至所述结束索引的区域大小小于或者等于所述可视区域范围的大小，停止切割，得到所述多个展示部分，并以切割顺序作为所述划分顺序。

通过对所述待展示页面进行划分，能够便于后续多个展示部分的分步加载，进而能够避免一次加载带来的卡顿问题(例如，一个页面包含的页面元素很多，如果等所有页面元素都加载完毕再显示，那么用户在浏览页面时等待的时间是比较长的)。

在本发明的至少一个实施例中，可以通过设置所述多个展示部分所处的页面层级实现对所述多个展示部分的显示或隐藏控制，其中，所述页面层级用于描述所述多个展示部分的展示顺序，所述页面层级的顺序与所述划分顺序相同。进一步地，可以在所述待展示页面上设置用于选择显示多个展示部分的滚动条，通过拖动滚动条选择显示的展示部分。当展示部分处于当前展示区域时，该展示部分所处的层级最高。

所述确定单元110确定与每个展示部分对应的加载任务，得到多个加载任务。

在本发明的至少一个实施例中，所述多个加载任务可以是由JavaScript代码组成的任务，每个加载任务可以包括多个方法指令。

执行单元114根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素。

在本发明的至少一个实施例中，所述页面元素可以包括，但不限于：图片、文字信息等。

在本发明的至少一个实施例中，所述执行单元114根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素包括：

所述执行单元114对于任意加载任务，调用线程池中的多个线程同时执行所述任意加载任务中的多个指令，并确定与所述任意加载任务对应的任意展示部分，进一步地，所述执行单元114检测所述任意展示部分是否完成加载，当检测到所述任意展示部分完成加载时，所述执行单元114根据所述划分顺序确定所述任意加载任务的下一任务，并触发执行所述下一任务，直至所述下一任务为所述多个加载任务中的最后一个任务，得到所述多个展示部分的页面元素。

具体地，所述执行单元114可以通过调用complete()脚本检测所述任意展示部分是否完成加载。

通过上述实施方式，能够在所述任意加载任务完成处理后，及时触发执行所述下一任务，避免所述待展示页面加载过程中多余时间的消耗。

融入单元115将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

在本发明的至少一个实施例中，所述融入单元115将加载到的页面元素依次融入所述目标框架，得到加载后的页面包括：

所述融入单元115监听所述待展示页面上的滚动事件，当所述待展示页面上发生滚动时，所述融入单元115获取滚动偏移量，所述融入单元115根据所述滚动偏移量确定当前可视区域范围，所述融入单元115获取所述当前可视区域范围的目标页面元素，及获取所述目标页面元素的坐标，所述融入单元115根据所述坐标确定所述目标页面元素在所述目标框架中所处的位置，并将所述目标页面元素填充至所述位置上，得到所述加载后的页面。

通过将页面元素逐步填充至所述待展示页面中，并逐步展示出来，从而能够有效提高页面加载的速度，进而能够确保用户在浏览大数据量的页面时能够顺畅浏览，有效保证了页面加载的顺滑状态。

由以上技术方案可以看出，当目标时间大于预设时间时，意味着需要加载的页面元素的数量较多，本发明在待展示页面的页面元素较多的情况下，仍然能够有序加载页面元素，同时，在一定时间内对单个加载任务的执行，能够提高加载任务的执行速度，进而缩短待展示页面加载的时间，将加载到的页面元素依次融入所述目标框架，得到加载后的页面，通过有序加载页面元素，能够保证待展示页面加载时的顺滑状态，有效提高了页面整体加载的速度。

如图3所示，是本发明实现页面加载方法的较佳实施例的服务器的结构示意图。

在本发明的一个实施例中，所述服务器1包括，但不限于，存储器12、处理器13，以及存储在所述存储器12中并可在所述处理器13上运行的计算机程序，例如页面加载程序。

本领域技术人员可以理解，所述示意图仅仅是服务器1的示例，并不构成对服务器1的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述服务器1还可以包括输入输出设备、网络接入设备、总线等。

所述处理器13可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器13是所述服务器1的运算核心和控制中心，利用各种接口和线路连接整个服务器1的各个部分，及执行所述服务器1的操作系统以及安装的各类应用程序、程序代码等。

所述处理器13执行所述服务器1的操作系统以及安装的各类应用程序。所述处理器13执行所述应用程序以实现上述各个页面加载方法实施例中的步骤，例如图1所示的步骤。

示例性的，所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器12中，并由所述处理器13执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述服务器1中的执行过程。例如，所述计算机程序可以被分割成确定单元110、量化单元111、获取单元112、划分单元113、执行单元114及融入单元115。

所述存储器12可用于存储所述计算机程序和/或模块，所述处理器13通过运行或执行存储在所述存储器12内的计算机程序和/或模块，以及调用存储在存储器12内的数据，实现所述服务器1的各种功能。所述存储器12可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据服务器的使用所创建的数据等。此外，存储器12可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。

所述存储器12可以是服务器1的外部存储器和/或内部存储器。进一步地，所述存储器12可以是具有实物形式的存储器，如内存条、TF卡(Trans-flash Card)等等。

所述服务器1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。

其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。

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

结合图1，所述服务器1中的所述存储器12存储多个指令以实现一种页面加载方法，所述处理器13可执行所述多个指令从而实现：当接收到加载请求时，从所述加载请求中确定待展示页面；量化加载所述待展示页面所需的目标时间；当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架；根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序；确定与每个展示部分对应的加载任务，得到多个加载任务；根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素；将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

具体地，所述处理器13对上述指令的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。

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

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

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

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。

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

Claims (10)

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

当接收到加载请求时，从所述加载请求中确定待展示页面；

量化加载所述待展示页面所需的目标时间；

当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架；

根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序；

确定与每个展示部分对应的加载任务，得到多个加载任务；

根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素；

将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

2.如权利要求1所述的页面加载方法，其特征在于，所述量化加载所述待展示页面所需的目标时间包括：

获取预先在所述待展示页面中添加的锚点；

根据所述锚点确定所述待展示页面中每个页面结构对应的程序代码；

分析执行每个程序代码所需要的时间；

根据分析得到的时间确定所述目标时间。

3.如权利要求1所述的页面加载方法，其特征在于，所述获取所述待展示页面的可视区域范围包括：

确定发出所述加载请求的终端，并获取所述终端的显示区域的大小；

监听所述待展示页面的窗口变化事件；

当监听到所述待展示页面对应的窗口发生变化时，获取并解析监听日志，得到目标比例，并根据所述显示区域的大小及所述目标比例确定所述可视区域范围；或者

当在配置时间内未监听到所述待展示页面对应的窗口发生变化时，将所述显示区域的大小确定为所述可视区域范围。

4.如权利要求1所述的页面加载方法，其特征在于，所述目标框架存储于区块链中，所述获取所述待展示页面的目标框架包括：

确定配置缓存库中是否存储与所述待展示页面对应的待确定框架；

当所述配置缓存库中存储与所述待展示页面对应的待确定框架时，从所述配置缓存库中获取与所述待确定框架对应的散列值，作为待验证散列值；

基于网络爬虫技术获取与所述待展示页面对应的当前框架的散列值，作为当前散列值；

对比所述待验证散列值与所述当前散列值；

当所述待验证散列值与所述当前散列值相同时，将所述待确定框架确定为所述目标框架；

还包括将所述目标框架存储于区块链中。

5.如权利要求1所述的页面加载方法，其特征在于，所述根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序包括：

获取所述待展示页面的起始索引及结束索引；

以所述起始索引为起点，按照所述可视区域范围依次切割所述待展示页面，直至当前切割线至所述结束索引的区域大小小于或者等于所述可视区域范围的大小，停止切割，得到所述多个展示部分，并以切割顺序作为所述划分顺序。

6.如权利要求1所述的页面加载方法，其特征在于，所述根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素包括：

对于任意加载任务，调用线程池中的多个线程同时执行所述任意加载任务中的多个指令，并确定与所述任意加载任务对应的任意展示部分；

检测所述任意展示部分是否完成加载；

当检测到所述任意展示部分完成加载时，根据所述划分顺序确定所述任意加载任务的下一任务，并触发执行所述下一任务，直至所述下一任务为所述多个加载任务中的最后一个任务，得到所述多个展示部分的页面元素。

7.如权利要求1所述的页面加载方法，其特征在于，所述将加载到的页面元素依次融入所述目标框架，得到加载后的页面包括：

监听所述待展示页面上的滚动事件；

当所述待展示页面上发生滚动时，获取滚动偏移量；

根据所述滚动偏移量确定当前可视区域范围；

获取所述当前可视区域范围的目标页面元素，及获取所述目标页面元素的坐标；

根据所述坐标确定所述目标页面元素在所述目标框架中所处的位置，并将所述目标页面元素填充至所述位置上，得到所述加载后的页面。

8.一种页面加载装置，其特征在于，所述页面加载装置包括：

确定单元，用于当接收到加载请求时，从所述加载请求中确定待展示页面；

量化单元，用于量化加载所述待展示页面所需的目标时间；

获取单元，用于当所述目标时间大于预设时间时，获取所述待展示页面的可视区域范围，并获取所述待展示页面的目标框架；

划分单元，用于根据所述可视区域范围划分所述待展示页面，得到多个展示部分及所述多个展示部分的划分顺序；

所述确定单元，还用于确定与每个展示部分对应的加载任务，得到多个加载任务；

执行单元，用于根据所述划分顺序依次执行所述多个加载任务，得到所述多个展示部分的页面元素；

融入单元，用于将加载到的页面元素依次融入所述目标框架，得到加载后的页面。

9.一种服务器，其特征在于，所述服务器包括：

存储器，存储至少一个指令；及

处理器，执行所述存储器中存储的指令以实现如权利要求1至7中任意一项所述的页面加载方法。

10.一种计算机可读存储介质，其特征在于：所述计算机可读存储介质中存储有至少一个指令，所述至少一个指令被服务器中的处理器执行以实现如权利要求1至7中任意一项所述的页面加载方法。

Images