CN112965756B - 页面资源加载量的监测方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于页面资源加载量的监测方法、装置、电子设备及存储介质，该方法包括：在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。本公开提高了对SPA页面的页面资源加载量统计的准确性。

Description

页面资源加载量的监测方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面资源加载量的监测方法、装置、电子设备及存储介质。

背景技术

前端即万维网(web)应用前台部分，运行在PC(Personal Computer，个人计算机)端、移动端等浏览器上展现给用户浏览的网页，随着前端技术的不断发展，万维网(web)应用程序复杂度越来越高，随之而来的是前端网页加载资源的数据量也越来越大，对前端的性能产生了一定的影响。

相关技术中，通过监听网页的下载事件(如onload事件)来计算页面资源加载的总数据量，但是这种方式并不适应于目前主流的SPA(Single Page Application，单页web应用)页面，单页应用SPA是web应用的一种形态，其通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。SPA页面需要等到JavaScript脚本程序执行来渲染，而在onload事件触发时SPA页面还没有渲染完成，从而导致以网页的onload事件触发统计得到的页面资源加载量不够准确。

发明内容

本公开提供一种页面资源加载量的监测方法、装置、电子设备及存储介质，以至少解决相关技术中页面资源加载量的统计结果不准确的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面资源加载量的监测方法，包括：

在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；

对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；

若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；

在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

作为一个可能的实施方式，所述在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，包括：

在所述网络空闲状态下，调用预置回调函数；

在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量；所述当前页面加载的页面资源包括预设资源类型的页面资源；

计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

作为一个可能的实施方式，所述在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表，包括：

在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型；

若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

作为一个可能的实施方式，所述方法还包括：

接收资源服务器响应于所述资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

作为一个可能的实施方式，所述方法还包括：

启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求。

作为一个可能的实施方式，在启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求之前，所述方法还包括：

判断当前浏览器是否支持所述服务工作线程；

若当前浏览器支持所述服务工作线程，则执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求的步骤。

作为一个可能的实施方式，所述方法还包括：

若当前浏览器不支持所述服务工作线程度，则监测所述当前页面的首次滚动事件；

在监测到所述首次滚动事件时，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

根据本公开实施例的第二方面，提供一种页面资源加载量的监测装置，包括：

资源获取请求监测单元，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；

资源获取请求删除单元，被配置为执行对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；

网络空闲状态确定单元，被配置为执行若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；

第一加载量计算单元，被配置为执行在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

作为一个可能的实施方式，所述第一加载量计算单元，包括：

回调函数调用单元，被配置为执行在所述网络空闲状态下，调用预置回调函数；

数据量获取单元，被配置为执行在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量；所述当前页面加载的页面资源包括预设资源类型的页面资源；

计算子单元，被配置为执行计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

作为一个可能的实施方式，所述资源获取请求监测单元，包括：

第一获取单元，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型；

存入单元，被配置为执行若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

作为一个可能的实施方式，所述装置还包括：

接收单元，被配置为执行接收资源服务器响应于所述资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

作为一个可能的实施方式，所述装置还包括：

服务工作线程启动单元，被配置为执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求。

作为一个可能的实施方式，所述装置还包括：

判断单元，被配置为执行判断当前浏览器是否支持所述服务工作线程；若当前浏览器支持所述服务工作线程，则执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求的步骤。

作为一个可能的实施方式，所述装置还包括：

首次滚动事件监测单元，被配置为执行若当前浏览器不支持所述服务工作线程度，则监测所述当前页面的首次滚动事件；

第二加载量计算单元，被配置为执行在监测到所述首次滚动事件时，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述第一方面中的页面资源加载量的监测方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述第一方面中的页面资源加载量的监测方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述第一方面中的页面资源加载量的监测方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

通过在监测到当前页面对应的页面资源的资源获取请求时，将该资源获取请求存入请求列表，并对于该请求列表中的每个资源获取请求，若监测到针对该资源获取请求的响应消息，则将该资源获取请求从请求列表中删除，若删除该资源获取请求后的请求列表为空且在当前时刻之后的预设时间段内未监测到当前页面对应的新的资源获取请求，则确定进入网络空闲状态，进而在网络空闲状态下计算当前页面加载的页面资源的总数据量得到当前页面的页面资源加载量，从而在恰当的时机来准确的统计页面资源加载量，提高了对SPA页面的页面资源加载量统计的准确性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种应用环境的示意图；

图2是根据一示例性实施例示出的一种页面资源加载量的监测方法的架构示意图；

图3是根据一示例性实施例示出的一种页面资源加载量的监测方法的流程图；

图4是根据一示例性实施例示出的在网络空闲状态下计算当前页面加载的页面资源的总数据量的一种流程图；

图5是根据一示例性实施例示出的另一种页面资源加载量的监测方法的流程图；

图6是根据一示例性实施例示出的一种页面资源加载量的监测装置的框图。

图7是根据一示例性实施例示出的一种电子设备的框图(移动终端的一般结构)。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

请参阅图1，其所示是根据一示例性实施例示出的一种页面资源加载量的监测方法的应用环境的示意图，如图1所示，该应用环境可以包括终端110、网页服务器120和资源服务器130。

终端110可以是智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。终端110可以通过有线或者无线网络与网页服务器120以及资源服务器130连接通信。

终端110中安装并运行有客户端，该客户端可以是支持web标准的浏览器，该客户端能够以web页面的形式向用户提供相关服务。示例性的，该web页面可以是SPA页面，SPA即单页web应用是一种特殊的web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面。SPA将所有的活动局限于一个web页面中，仅在该web页面初始化时加载相应的HTML(HyperText Markup Language，超级文本标记语言)、JavaScript脚本程序文件、CSS(Cascading Style Sheets，样式信息)，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML，从而实现用户界面与用户的交互。

网页服务器120可以是客户端中web页面对应的服务器也即部署web应用的服务器，该网页服务器120可以为客户端提供后台服务。资源服务器130可以用于存储客户端中web页面对应的页面资源，该页面资源可以包括图片、视频、音频、JavaScript脚本程序文件、CSS样式文件等等。其中，资源服务器130的域名信息可以与网页服务器120的域名信息可以相同或者不同，当资源服务器130的域名信息与网页服务器120的域名信息不同时，可以实现客户端的跨域资源获取。

本公开实施例的上述网页服务器120和资源服务器130均可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

图2是根据一示例性实施例示出的一种页面资源加载量的监测方法的架构示意图，如图2所示，该架构可以包括请求监控模块(Request Monitor)210、空闲观察模块(Observer)220和资源计算模块230。

请求监控模块210主要负责对页面中页面资源的资源获取请求的监测，以及在网络空闲时通知空闲观察模块220。

具体的，请求监控模块210包括服务工作线程Service Worker和请求列表requestSet。服务工作线程Service Worker是一种由Javascript编写的浏览器端代理脚本，位于浏览器端和服务端之间，是浏览器端在后台独立运行于网页的的后台任务。其中，浏览器端可以是独立的网页浏览器，也可以是嵌入到客户端中的浏览器模块。ServiceWorker是事件驱动的，能够提供不需要与web页面交互的功能，例如：监测请求、修改请求和处理网络请求的功能，Service Worker可以在页面发起http请求时，通过拦截事件fetchEvent中的资源拦截事件实现对监测到的请求的捕获。另外，Service Worker还可以监测到资源获取请求完成。

本公开的实施例中，Service Worker用于监测并捕获页面中页面资源的资源获取请求，在捕获到页面资源的资源获取请求时，请求监控模块210将该被捕获到的资源获取请求存入请求列表requestSet中，请求列表requestSet可以是一个数组格式的变量，用于存储正在进行中的网络请求，具体的，该请求列表requestSet用于存储被Service Worker捕获到的资源获取请求。

对于该请求列表requestSet中的每个资源获取请求，在Service Worker监测到请求完成时，请求监控模块210会判断请求列表requestSet是否为空即当前是否有正在进行中的资源获取请求，并在判断的结果是请求列表requestSet为空时，请求监控模块210启动一个计时器进行计时，若当前页面在预设时间段内没有新的资源获取请求，则请求监控模块210可以确定当前网络空闲，可以通过Service Worker发布一个事件消息给空闲观察模块220，该事件消息用于指示进入网络空闲状态。

示例性的，请求监控模块210可以通过事件监听方法EventListener()来实现将被捕获到的资源获取请求存入请求列表requestSet中，该EventListener()可以通过拦截事件fetch Event中的资源拦截事件实现对监测到的请求的捕获。

示例性的，请求监控模块210可以通过停止监听方法Unlisten()来实现在资源获取请求完成时将该资源获取请求从请求列表requestSet中删除。

空闲观察模块220主要负责添加及保存网络空闲时需要执行的回调函数Callback，在接收到请求监控模块210发送过来的用于指示网络空闲的消息时执行该回调函数Callback。具体的，空闲观察模块220中可以实现一个网络空闲回调方法networkIdleCallback()，该网络空闲回调方法的功能在于可以使用一个回调函数Callback作为参数，通过运行该网络空闲回调方法可以在网络空闲时执行该回调函数，基于此，可以将计算当前页面的页面资源加载量的相关程序写在该回调函数中，使得在网络空闲时执行对当前页面的页面资源加载量的统计。回调函数Callback可以被保存到回调函数列表callbackList中，示例性的，该回调函数列表callbackList可以数组的形式呈现。当空闲观察模块220接收到来自请求监控模块210传递过来的用于指示网络空闲的消息时，可以取出回调函数列表callbackList中的回调函数Callback执行页面资源加载量的计算。

资源计算模块230主要负责计算要监测的页面资源的总加载数据量，具体的可以利用浏览器提供的性能数据接口函数Performance API，通过该性能数据接口函数可以获取到当前页面中与性能相关的信息。在本公开的实施例中，具体可以使用基于资源类型的性能入口接口函数Performance.getEntriesByType和资源计时接口函数PerformanceResourceTiming获取加载的各页面资源的数据量。

示例性的，资源计算模块230在计算得到页面资源加载量后可以将该监测数据进行上报。

本公开的实施例以网络空闲来定义统计页面资源加载量的时间点，提高了对于SPA页面的页面资源加载量统计的准确性。

下面结合图1和图2来介绍本公开实施例的页面资源加载量的监测方法。

图3是根据一示例性实施例示出的一种页面资源加载量的监测方法的流程图，如图3所示，以页面资源加载量的监测方法应用于图1所示的终端中为例，包括以下步骤。

在步骤S31中，在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表。

其中，当前页面为终端的用户通过客户端访问的web页面，该客户端可以是单页web应用，页面资源可以包括图片、视频、音频、JavaScript脚本程序文件、CSS样式文件等等。请求列表用于存储当前页面对应的正在进行中的资源获取请求。

示例性的，可以通过服务工作线程Service Worker来准确监测页面对应的页面资源的资源获取请求，服务工作线程Service Worker不仅可以监测到当前页面产生的资源获取请求，还可以监测到各资源获取请求是否完成。Service Worker独立于当前页面，是运行在客户端后台进程中的程序，通过服务工作线程Service Worker可以提高对于资源获取请求监测的准确性，进而有利于提高后续对于网络空闲状态确定的准确性。

基于此，在步骤S31实施之前，该方法还可以包括：

响应于用户在客户端发起的针对当前页面的访问操作，启动服务工作线程，通过该服务工作线程监测对于页面资源的资源获取请求。

示例性的，对于资源获取请求的监测可以通过事件监听方法EventListener()来实现，具体的，该EventListener()可以通过拦截事件fetch Event中的资源拦截事件实现对监测到的请求的捕获。

在步骤S32中，对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除。

具体的，对于请求列表中的每个资源获取请求，若服务工作线程Service Worker监测到针对该资源获取请求的响应消息，则表明该资源获取请求已经执行完成，此时可以将该已经完成的资源获取请求从请求列表中删除。其中，针对该资源获取请求的响应消息可以是指示获取到相应页面资源的响应消息，也可以是指示未获取到相应页面资源的响应消息，本公开实施例对响应消息的内容不作具体限定。

示例性的，删除请求列表中的资源获取请求可以通过停止监听方法Unlisten()来实现，该停止监听方法Unlisten()可以在资源获取请求完成时将该资源获取请求从请求列表中删除。

在步骤S33中，判断删除所述资源获取请求后的请求列表是否为空，若为空，则执行步骤S34。

本公开的实施例中，每删除请求列表中的一个资源获取请求之后，判断该请求列表是否为空，若不为空，则表明当前还有未完成的资源获取请求，此时可以继续执行步骤S32；若为空，则表明当前已经没有未完成的资源获取请求，此时可以执行步骤S34。

在步骤S34中，判断在当前时刻之后的预设时间段内是否监测到当前页面对应的新的资源获取请求，若未监测到当前页面对应的新的资源获取请求，则执行步骤S35。

其中，当前时刻是指判断出请求列表为空的时刻。示例性的，在删除某个已完成的资源获取请求之后，若请求列表为空，则可以启动一个计时器，若在计时器达到设定时间点之前的时间段内仍未监测到当前页面产生的新的资源获取请求，则可以执行步骤S35；反之，若监测到当前页面对应的新的资源获取请求，则继续执行步骤S31，将该被监测到的当前页面对应的资源获取请求存入请求列表中。

在步骤S35中，确定进入网络空闲状态。

在步骤S36中，在网络空闲状态下，计算当前页面加载的页面资源的总数据量，得到当前页面的页面资源加载量。

本公开的实施例以网络空闲状态作为触发统计页面资源加载量的时间点，可以提高对于SPA页面的页面资源加载量统计的准确性。

具体的实施中，可以利用网络空闲回调方法networkIdleCallback()将上述计算当前页面加载的页面资源的总数据量的逻辑插入到步骤S35之后。网络空闲回调方法networkIdleCallback()可以在浏览器的空闲状态下调用回调函数，其可以接收ServiceWorkers发布的事件消息，并能够在所有支持Service Workers的浏览器中工作，不仅对于浏览器的兼容性非常好，而且比较稳定。

网络空闲回调方法networkIdleCallback()的功能在于可以使用一个回调函数作为参数，通过运行网络空闲回调方法networkIdleCallback()可以将回调函数插入到步骤S35之后，使得在进入网络空闲状态后执行该回调函数。因此，可以利用网络空闲回调方法networkIdleCallback()的特性，将计算当前页面加载的页面资源的总数据量的逻辑写在该回调函数中，通过将该回调函数插入到步骤S35之后，使得在进入网络空闲状态后执行该回调函数。基于此，上述步骤S36在实施时可以包括图4中的以下步骤：

在步骤S41中，在所述网络空闲状态下，调用预置回调函数。

在步骤S42中，在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量。

在步骤S43中，计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

其中，浏览器的应用程序接口函数可以是浏览器提供的性能数据接口函数Performance接口函数，Performance接口函数为浏览器提供的应用程序接口，用来测量网页和Web应用程序的性能。具体的，本公开的实施例中性能数据接口函数可以包括基于资源类型的性能入口接口函数Performance.getEntriesByType("resources")和资源计时接口函数PerformanceResourceTiming，通过基于资源类型的性能入口接口函数Performance.getEntriesByType("resources")可以获取到当前页面的静态资源(即页面资源)列表，然后遍历该静态资源列表，在遍历的过程中通过资源计时接口函数PerformanceResourceTiming可以获取到每个遍历到的静态资源(例如脚本程序文件、图片)的性能指标，提取该性能指标中指示解压体积大小的字段信息即可得到该静态资源的数据量，通过计算各静态资源的数据量的和值即可得到当前页面加载的页面资源的总数据量。其中，资源计时接口函数PerformanceResourceTiming有三个属性用来获取一个页面资源的数据大小，其中，转移大小属性transferSize可以返回所获得的页面资源大小。

本公开的实施例通过在网络空闲状态下调用预置回调函数，并在该预置回调函数中通过调用浏览器的应用程序接口函数来获取当前页面加载的各页面资源的数据量，进而计算得到加载的总数据量，增强了对于浏览器的兼容性以及对于页面资源加载量的监测稳定性。

实际应用中，在得到当前页面的页面资源加载量之后，还可以将该当前页面的页面资源加载量发送给前端监控平台，从而可以使得前端监控平台及时获得各web页面的页面资源加载量，以根据该监控结果进行web页面的性能评估和优化。

需要说明的是，步骤S42在通过调用浏览器的应用程序接口函数获取当前页面加载的页面资源的数据量时，该当前页面加载的页面资源包括预设资源类型的页面资源，该预设资源类型可以是当前页面中所有资源类型的页面资源，也可以是选定的某一种或者几种资源类型的页面资源。

考虑到流媒体资源的网络请求的持续性特征，对于音频和视频这类资源类型来说，其对应的资源获取请求可能长时间频繁进行，从而导致长时间内无法进入网络空闲状态，也即将导致在长时间内无法得到对当前页面的页面资源加载量的监测结果，不利于提高监测效率。

基于此，作为一个可能的实施方式，在统计当前页面的页面资源加载量的时候可以将音频和视频这类流媒体资源类型的页面资源排除在外，也即上述的预设资源类型为不包括流媒体资源类型的资源类型。具体的实施中，可以通过基于资源类型的性能入口接口函数Performance.getEntriesByType将统计的页面资源限定为不包括流媒体资源类型的预设资源类型。那么，相应的，前述步骤S31在实施时可以包括以下步骤：

(1)在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型。

(2)若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

示例性的，可以通过将前述事件监听方法EventListener()中的事件限定为预设资源类型的事件来实现仅将预设资源类型的资源获取请求存入请求列表，从而在确定计算页面资源加载量的时间点即网络空闲状态时仅考虑预设资源类型的资源获取请求。

通过上述方法可以将请求列表中的资源获取请求限定为对预设资源类型的页面资源的资源获取请求，该预设资源类型可以是除音频、视频等流媒体资源类型之外的资源类型，如可以是图片、异步接口等资源类型，从而可以避免流媒体资源类型的资源获取请求引起的长时间内无法进入网络空闲状态，进而导致在长时间内无法得到对当前页面的页面资源加载量的监测结果，有利于提高监测效率和监测的灵活性。

实际应用中，由于浏览器提供的应用程序接口函数如性能数据接口函数对于跨域页面资源的数据量的获取有限制，跨域的页面资源获取到的数据量始终为0，从而导致统计的页面资源加载量的结果不准确。其中，跨域页面资源是指存储页面资源的资源服务器的域名信息与加载该页面资源的页面所对应的网页服务器的域名信息不一致的情况。

为了避免跨域资源导致的页面资源加载量统计结果的不准确，在一个可能的实施方式中，可以通过在资源服务器端设置控制参数来完成跨域资源共享，该控制参数在资源服务器响应浏览器的资源获取请求时，会以消息头header的形式通过响应消息带回浏览器端。其中，控制参数可以包括用于指定网页服务器的域名信息的预设字段，该预设字段例如可以表示为Timing-Allow-Origin，通过配置Timing-Allow-Origin字段可以指定哪些域可以访问该资源服务器。示例性的，对于资源服务器的域名信息与web页面对应的网页服务器的域名信息不一致时，在该资源服务器设置的预设字段可以为Timing-Allow-Origin：<origin>，其中，<origin>为加载该资源服务器中页面资源的web页面所对应的网页服务器的域名信息。

基于此，本公开实施例的页面资源加载量的监测方法还可以包括：接收资源服务器响应于当前页面对应的页面资源的资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

本公开的实施例通过在响应消息的消息头中加入用于指示当前页面对应的网页服务器域名信息的预设字段解决了后续在调用浏览器的应用程序接口函数时由于跨域资源导致的统计结果不准确的问题。

图5是根据一示例性实施例示出的另一种页面资源加载量的监测方法的流程图，如图5所示，该方法可以包括：

在步骤S51中，判断当前浏览器是否支持服务工作线程。

具体的，若判断的结果是当前浏览器支持服务工作线程Service Worker，则可以执行步骤S52至步骤S56；反之，若判断的结果是当前浏览器不支持服务工作线程ServiceWorker，则可以执行步骤S57；

在步骤S52中，启动服务工作线程，通过该服务工作线程监测对于页面资源的资源获取请求；

在步骤S53中，在监测到当前页面对应的页面资源的资源获取请求时，将该资源获取请求存入请求列表。

在步骤S54中，对于请求列表中的每个资源获取请求，若监测到该资源获取请求完成，则将该资源获取请求从上述请求列表中删除。

在步骤S55中，若删除该资源获取请求后的请求列表为空，且在当前时刻之后的预设时间段内未监测到当前页面对应的新的资源获取请求，则确定进入网络空闲状态。

在步骤S56中，在网络空闲状态下，计算当前页面加载的页面资源的总数据量，得到当前页面的页面资源加载量。

其中，上述步骤S52至步骤S56的具体实施方式可以参见本公开实施例的前述图3至图4的方法实施例中的相关部分，在此不再赘述。

在步骤S57中，监测当前页面的首次滚动事件。

示例性的，页面的滚动事件即scroll事件的监测可以通过浏览器的滚动插件iscroll来实现，该滚动插件中的滚动函数onscroll函数可以监听页面的滚动事件，当滚动函数onscroll函数监测到当前页面的首次滚动事件时可以执行以下步骤S58。

在步骤S58中，在监测到首次滚动事件时，计算当前页面加载的页面资源的总数据量，得到当前页面的页面资源加载量。

示例性的，可以通过调用浏览器提供的性能数据接口函数获取当前页面加载的各页面资源的数据量，并计算当前页面加载的各页面资源的数据量的和值作为总数据量，进而得到当前页面的页面资源加载量。其中，性能数据接口函数可以包括基于资源类型的性能入口接口函数Performance.getEntriesByType和资源计时接口函数PerformanceResourceTiming，通过基于资源类型的性能入口接口函数Performance.getEntriesByType可以获取到当前页面的静态资源(即页面资源)列表，然后遍历该静态资源列表，在遍历的过程中通过资源计时接口函数PerformanceResourceTiming可以获取到每个遍历到的静态资源(例如脚本程序文件、图片)的性能指标，提取该性能指标中指示解压体积大小的字段信息即可得到该静态资源的数据量，通过计算各静态资源的数据量的和值即可得到当前页面加载的页面资源的总数据量。

考虑到实际应用中，在当前页面的内容不够长时是无法滚动页面的，基于此，在监测当前页面的首次滚动事件之前，可以获取当前页面的页面内容高度，判断该页面内容高度是否超过预设内容高度，在页面内容高度超过预设内容高度的情形下，执行步骤57监测当前页面的首次滚动事件。其中，预设内容高度为可以实现页面滚动的最小页面内容高度。

本公开的实施例在浏览器支持Service Worker时以网络空闲状态作为触发计算当前页面的页面资源加载量的时间点，在浏览器不支持Service Worker时以首次scroll事件作为触发计算当前页面的页面资源加载量的时间点，从而在提高页面资源加载量统计的准确性的同时还提高了对于页面资源加载量统计的灵活性。

图6是根据一示例性实施例示出的一种页面资源加载量的监测装置的框图。参照图6，该装置600包括资源获取请求监测单元610，资源获取请求删除单元620，网络空闲状态确定单元630和第一加载量计算单元640。

该资源获取请求监测单元610，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；

该资源获取请求删除单元620，被配置为执行对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；

该网络空闲状态确定单元630，被配置为执行若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；

该第一加载量计算单元640，被配置为执行在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

作为一个可能的实施方式，该第一加载量计算单元640，包括：

回调函数调用单元，被配置为执行在所述网络空闲状态下，调用预置回调函数；

数据量获取单元，被配置为执行在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量；所述当前页面加载的页面资源包括预设资源类型的页面资源；

计算子单元，被配置为执行计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

作为一个可能的实施方式，该资源获取请求监测单元610，包括：

第一获取单元，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型；

存入单元，被配置为执行若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

作为一个可能的实施方式，该装置600还包括：

接收单元，被配置为执行接收资源服务器响应于所述资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

作为一个可能的实施方式，该装置600还包括：

服务工作线程启动单元，被配置为执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求。

作为一个可能的实施方式，该装置600还包括：

判断单元，被配置为执行判断当前浏览器是否支持所述服务工作线程；若当前浏览器支持所述服务工作线程，则执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求的步骤。

作为一个可能的实施方式，该装置600还包括：

首次滚动事件监测单元，被配置为执行若当前浏览器不支持所述服务工作线程度，则监测所述当前页面的首次滚动事件；

第二加载量计算单元，被配置为执行在监测到所述首次滚动事件时，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

本公开实施例提供的页面资源加载量的监测装置通过在监测到当前页面对应的页面资源的资源获取请求时，将该资源获取请求存入请求列表，并对于该请求列表中的每个资源获取请求，若监测到针对该资源获取请求的响应消息，则将该资源获取请求从请求列表中删除，若删除该资源获取请求后的请求列表为空且在当前时刻之后的预设时间段内未监测到当前页面对应的新的资源获取请求，则确定进入网络空闲状态，进而在网络空闲状态下计算当前页面加载的页面资源的总数据量得到当前页面的页面资源加载量，从而在恰当的时机来准确的统计页面资源加载量，提高了对SPA页面的页面资源加载量统计的准确性。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本发明实施例提供了一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现本公开实施例中的页面资源加载量的监测方法。

存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器的软件程序以及模块，从而执行各种功能应用以及页面资源加载量的监测。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、功能所需的应用程序等；存储数据区可存储根据所述设备的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器还可以包括存储器控制器，以提供处理器对存储器的访问。

本公开实施例所提供的方法实施例可以在计算机终端、服务器或者类似的运算装置中执行。以电子设备是终端上为例，图7是本发明实施例提供的运行一种页面资源加载量的监测方法的终端的硬件结构框图，具体来讲：

该终端700可以包括RF(Radio Frequency，射频)电路710、包括有一个或一个以上计算机可读存储介质的存储器720、输入单元730、显示单元740、传感器750、音频电路760、WiFi(wireless fidelity，无线保真)模块770、包括有一个或者一个以上处理核心的处理器780、以及电源70等部件。本领域技术人员可以理解，图7中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路710可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器780处理；另外，将涉及上行的数据发送给基站。通常，RF电路710包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier，低噪声放大器)、双工器等。此外，RF电路710还可以通过无线通信与网络和其他终端通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(CodeDivision Multiple Access，码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service，短消息服务)等。

存储器720可用于存储软件程序以及模块，处理器780通过运行存储在存储器720的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器720可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、功能所需的应用程序等；存储数据区可存储根据所述终端的使用所创建的数据等。此外，存储器720可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器720还可以包括存储器控制器，以提供处理器780和输入单元730对存储器720的访问。

输入单元730可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元730可包括触敏表面731以及其他输入设备732。触敏表面731，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面731上或在触敏表面731附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面731可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器780，并能接收处理器780发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面731。除了触敏表面731，输入单元730还可以包括其他输入设备732。具体地，其他输入设备732可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元740可用于显示由用户输入的信息或提供给用户的信息以及所述终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元740可包括显示面板741，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板741。进一步的，触敏表面731可覆盖显示面板741，当触敏表面731检测到在其上或附近的触摸操作后，传送给处理器780以确定触摸事件的类型，随后处理器780根据触摸事件的类型在显示面板741上提供相应的视觉输出。其中，触敏表面731与显示面板741可以两个独立的部件来实现输入和输入功能，但是在某些实施例中，也可以将触敏表面731与显示面板741集成而实现输入和输出功能。

终端700还可包括至少一种传感器750，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板741的亮度，接近传感器可在所述终端移动到耳边时，关闭显示面板741和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别终端姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于所述终端还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路760、扬声器761，传声器762可提供用户与所述终端之间的音频接口。音频电路760可将接收到的音频数据转换后的电信号，传输到扬声器761，由扬声器761转换为声音信号输出；另一方面，传声器762将收集的声音信号转换为电信号，由音频电路760接收后转换为音频数据，再将音频数据输出处理器780处理后，经RF电路710以发送给比如另一终端，或者将音频数据输出至存储器720以便进一步处理。音频电路760还可能包括耳塞插孔，以提供外设耳机与所述终端的通信。

WiFi属于短距离无线传输技术，所述终端通过WiFi模块770可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图7示出了WiFi模块770，但是可以理解的是，其并不属于所述终端的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器780是所述终端的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器720内的软件程序和/或模块，以及调用存储在存储器720内的数据，执行所述终端的各种功能和处理数据，从而对终端进行整体监控。可选的，处理器780可包括一个或多个处理核心；优选的，处理器780可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器780中。

该终端700还包括给各个部件供电的电源70(比如电池)，优选的，电源可以通过电源管理系统与处理器780逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源70还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，该终端700还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端700还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行。上述一个或者一个以上程序包含用于执行上述方法实施例提供的页面资源加载量的监测方法的指令。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器720，上述指令可由电子设备700的处理器780执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现本公开实施例中的页面资源加载量的监测方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (17)

1.一种页面资源加载量的监测方法，其特征在于，包括：

在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；

对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；

若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；

在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

2.根据权利要求1所述的页面资源加载量的监测方法，其特征在于，所述在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，包括：

在所述网络空闲状态下，调用预置回调函数；

在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量；所述当前页面加载的页面资源包括预设资源类型的页面资源；

计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

3.根据权利要求2所述的页面资源加载量的监测方法，其特征在于，所述在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表，包括：

在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型；

若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

4.根据权利要求1所述的页面资源加载量的监测方法，其特征在于，所述方法还包括：

接收资源服务器响应于所述资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

5.根据权利要求1所述的页面资源加载量的监测方法，其特征在于，所述方法还包括：

启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求。

6.根据权利要求5所述的页面资源加载量的监测方法，其特征在于，在启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求之前，所述方法还包括：

判断当前浏览器是否支持所述服务工作线程；

若当前浏览器支持所述服务工作线程，则执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求的步骤。

7.根据权利要求6所述的页面资源加载量的监测方法，其特征在于，所述方法还包括：

若当前浏览器不支持所述服务工作线程度，则监测所述当前页面的首次滚动事件；

在监测到所述首次滚动事件时，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

8.一种页面资源加载量的监测装置，其特征在于，包括：

资源获取请求监测单元，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，将所述资源获取请求存入请求列表；

资源获取请求删除单元，被配置为执行对于所述请求列表中的每个所述资源获取请求，若监测到针对所述资源获取请求的响应消息，则将所述资源获取请求从所述请求列表中删除；

网络空闲状态确定单元，被配置为执行若删除所述资源获取请求后的所述请求列表为空，且在当前时刻之后的预设时间段内未监测到所述当前页面对应的新的资源获取请求，则确定进入网络空闲状态；

第一加载量计算单元，被配置为执行在所述网络空闲状态下，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

9.根据权利要求8所述的页面资源加载量的监测装置，其特征在于，所述第一加载量计算单元，包括：

回调函数调用单元，被配置为执行在所述网络空闲状态下，调用预置回调函数；

数据量获取单元，被配置为执行在所述预置回调函数中，通过调用浏览器的应用程序接口函数获取所述当前页面加载的各页面资源的数据量；所述当前页面加载的页面资源包括预设资源类型的页面资源；

计算子单元，被配置为执行计算所述当前页面加载的各页面资源的数据量的和值，作为所述总数据量。

10.根据权利要求9所述的页面资源加载量的监测装置，其特征在于，所述资源获取请求监测单元，包括：

第一获取单元，被配置为执行在监测到当前页面对应的页面资源的资源获取请求时，获取所述资源获取请求对应的页面资源的资源类型；

存入单元，被配置为执行若所述资源类型为所述预设资源类型，则将所述资源获取请求存入请求列表。

11.根据权利要求8所述的页面资源加载量的监测装置，其特征在于，所述装置还包括：

接收单元，被配置为执行接收资源服务器响应于所述资源获取请求返回的响应消息；所述资源服务器与所述当前页面对应的网页服务器具有不同的域名信息，所述响应消息的消息头中包括用于指定所述网页服务器的域名信息的预设字段。

12.根据权利要求8所述的页面资源加载量的监测装置，其特征在于，所述装置还包括：

服务工作线程启动单元，被配置为执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求。

13.根据权利要求12所述的页面资源加载量的监测装置，其特征在于，所述装置还包括：

判断单元，被配置为执行判断当前浏览器是否支持所述服务工作线程；若当前浏览器支持所述服务工作线程，则执行启动服务工作线程，通过所述服务工作线程监测对于页面资源的资源获取请求的步骤。

14.根据权利要求13所述的页面资源加载量的监测装置，其特征在于，所述装置还包括：

首次滚动事件监测单元，被配置为执行若当前浏览器不支持所述服务工作线程度，则监测所述当前页面的首次滚动事件；

第二加载量计算单元，被配置为执行在监测到所述首次滚动事件时，计算所述当前页面加载的页面资源的总数据量，得到所述当前页面的页面资源加载量。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的页面资源加载量的监测方法。

16.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至7中任一项所述的页面资源加载量的监测方法。

17.一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现权利要求1至7中任一项所述的页面资源加载量的监测方法。