CN112416726A

CN112416726A - 一种web应用静态资源加载性能的分析方法及装置

Info

Publication number: CN112416726A
Application number: CN202011308432.0A
Authority: CN
Inventors: 韩敏; 吴迪; 万振华; 王颉; 董燕; 李华
Original assignee: State Grid Siji Network Security Beijing Co ltd; State Grid Siji Testing Technology Beijing Co ltd; State Grid Information and Telecommunication Co Ltd; Shenzhen Kaiyuan Internet Security Technology Co Ltd
Current assignee: State Grid Siji Network Security Beijing Co ltd; State Grid Siji Testing Technology Beijing Co ltd; State Grid Information and Telecommunication Co Ltd; Shenzhen Kaiyuan Internet Security Technology Co Ltd
Priority date: 2020-11-20
Filing date: 2020-11-20
Publication date: 2021-02-26

Abstract

本发明提供了一种WEB应用静态资源加载性能的分析方法及装置，所述方法包括：在WEB应用页面头部插入性能数据收集脚本；判断浏览器是否支持PerformanceObserver；若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据；对收集到的resource性能数据进行处理，得到标准可读的性能指标；根据得到的性能指标对WEB应用静态资源的加载性能进行分析。本发明提供的分析方法该方法使用简单方便，并且对原有程序的侵入性小，能对静态资源的加载进行持续跟进。

Description

一种WEB应用静态资源加载性能的分析方法及装置

技术领域

本发明涉及WEB应用领域，尤其是指一种WEB应用静态资源加载性能的分析方法及装置。

背景技术

互联网的发展一直很迅猛，从个人电脑到手机，WEB应用的发展也越来越迅猛，用户对于WEB应用的需求也持续旺盛。对于企业来说吸引和留住浏览者，并把他们转化为潜在的用户是非常有必要的。这其中WEB应用的加载性能问题是重中之重。

研究表明页面加载时间是影响用户忠诚度的主要因素，而对静态资源的加载分析是分析页面加载性能问题的一个重要痛点。一般的客户端静态资源加载的性能分析都是在客户端代码中插入具体的执行到某处时间戳的逻辑，获取的信息有限，且对源代码有侵入性，不够友好，缺乏持续跟进的方式。

发明内容

针对现有技术的不足，本发明提供了一种WEB应用静态资源加载性能的分析方法及装置，旨在解决现有性能分析方法获取的信息有限，对源代码有侵入性以及缺乏持续跟进的方式的问题。

为了解决上述技术问题，本发明采用了如下技术方案：

第一方面，提供了一种WEB应用静态资源加载性能的分析方法，包括：

在WEB应用页面头部插入性能数据收集脚本；

判断浏览器是否支持PerformanceObserver；

若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据；

对收集到的resource性能数据进行处理，得到标准可读的性能指标；

根据得到的性能指标对WEB应用静态资源的加载性能进行分析。

第二方面，提供了一种WEB应用静态资源加载性能的分析装置，包括：

插入模块，用于在WEB应用页面头部插入性能数据收集脚本；

判断模块，用于判断浏览器是否支持PerformanceObserver，若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据；

处理模块，用于对收集到的resource性能数据进行处理，得到标准可读的性能指标；

分析模块，用于根据得到的性能指标对WEB应用静态资源的加载性能进行分析。

本发明的有益效果在于：

通过在WEB应用页面头部插入性能数据收集脚本，当浏览器支持PerformanceObserver时构建PerformanceObserver对象，对该对象进行监听以获取resource性能数据，对resource性能数据进行处理得到标准可读的性能指标，再根据获取到的性能指标对WEB应用静态资源的加载性能进行分析。该方法使用简单方便，并且对原有程序的侵入性小，能对静态资源的加载进行持续跟进。

附图说明

下面结合附图详述本发明的具体结构

图1为本发明第一实施例提供的WEB应用静态资源加载性能的分析方法的流程框图；

图2为本发明第二实施例提供的WEB应用静态资源加载性能的分析方法的流程框图；

图3为本发明第三实施例提供的WEB应用静态资源加载性能的分析方法的流程框图；

图4为本发明第四实施例提供的WEB应用静态资源加载性能的分析装置的模块连接图；

图5为本发明第五实施例提供的电子设备的结构示意图。

具体实施方式

为详细说明本发明的技术内容、构造特征、所实现目的及效果，以下结合实施方式并配合附图详予说明。

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

请参考图1，图1为本发明第一实施例提供的WEB应用静态资源加载性能的分析方法的流程框图。如图1所示，一种WEB应用静态资源加载性能的分析方法，包括：

步骤S101，在WEB应用页面头部插入性能数据收集脚本。

具体地，所述性能数据收集脚本为js脚本，通过将其直接插入WEB应用的index.html中使用，简单、方便且耦合度底，可以对该脚本进行自由化定制。

步骤S102，判断浏览器是否支持PerformanceObserver。

步骤S103，若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据。

步骤S104，对收集到的resource性能数据进行处理，得到标准可读的性能指标。

步骤S105，根据得到的性能指标对WEB应用静态资源的加载性能进行分析。

本发明的有益效果在于：

请参考图2，图2为本发明第二实施例提供的WEB应用静态资源加载性能的分析方法的流程框图。

进一步地，步骤S104具体包括：

步骤S201，构建如下函数：

function filterTime(a,b){

return a>0&&b>0&&a-b>＝0？a-b:undefined；

}。

步骤S202，将收集到的resource性能数据的结束时间和开始时间依次填入a，b中，输出该resource性能数据的加载时间或undefined。

请参考图3，图3为本发明第三实施例提供的WEB应用静态资源加载性能的分析方法的流程框图。如图3所示，一种WEB应用静态资源加载性能的分析方法，包括：

步骤S301，在WEB应用页面头部插入性能数据收集脚本。

步骤S302，判断浏览器是否支持PerformanceObserver。

步骤S303，若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据。

步骤S304，若不支持则监听浏览器的onload事件，调用performance并获取其中的resource性能数据。

需要说明的是，PerformanceObserver的功能更强大且支持订阅推送数据，但对于老旧的浏览器performance的兼容性更强，也能获取到其中的resource性能数据。

步骤S305，对收集到的resource性能数据进行处理，得到标准可读的性能指标。

步骤S306，根据得到的性能指标对WEB应用静态资源的加载性能进行分析。

在上述实施例中，所述性能指标包括：资源的url、资源的类型、资源重定向时间、DNS解析时间、TCP建连时间、网络总耗时、加载执行时间及请求发送到接收时间。

具体地，在所述性能数据收集脚本中通过输出resourceTime.initiatorType得到资源的类型，输出resourceTime.name得到资源的url，parseInt(resourceTime.duration)得到资源的渲染时间，输出filterTime(resourceTime.redirectEnd,resourceTime.redirectStart)得到资源重定向时间，输出filterTime(resourceTime.domainLookupEnd,resourceTime.domainLookupStart)得到DNS解析时间，输出filterTime(resourceTime.connectEnd,resourceTime.connectStart)得到TCP建连时间，输出filterTime(resourceTime.connectEnd,resourceTime.startTime)得到网络总耗时，输出filterTime(resourceTime.responseStart,resourceTime.requestStart)得到请求发送的时间，输出filterTime(resourceTime.responseEnd,resourceTime.responseStart)得到接收的时间，输出filterTime(resourceTime.responseEnd,resourceTime.requestStart)得到请求发送到接收时间，输出filterTime(resourceTime.responseStart,resourceTime.requestStart)得到从开始请求发送到开始接收首字节的时间。其中，resourceTime表示每个静态资源从PerformanceObserver或perfromance中获取到的性能信息。

请参考图4，图4为本发明第四实施例提供的WEB应用静态资源加载性能的分析装置的模块连接图。如图4所示，本发明第二方面还提供了一种WEB应用静态资源加载性能的分析装置，包括：

插入模块10，用于在WEB应用页面头部插入性能数据收集脚本；

判断模块20，用于判断浏览器是否支持PerformanceObserver，若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据；

处理模块30，用于对收集到的resource性能数据进行处理，得到标准可读的性能指标；

分析模块40，用于根据得到的性能指标对WEB应用静态资源的加载性能进行分析。

进一步地，所述处理模块30具体用于：

构建如下函数：

function filterTime(a,b){

return a>0&&b>0&&a-b>＝0？a-b:undefined；

}；

将收集到的resource性能数据的结束时间和开始时间依次填入a，b中，输出该resource性能数据的加载时间或undefined。

进一步地，所述判断模块20还用于：

若浏览器不支持PerformanceObserver，则监听浏览器的onload事件，调用performance并获取其中的resource性能数据。

请参考图5，图5为本发明第五实施例提供的电子设备的结构示意图。如图5所示，一种电子设备，包括：

存储器301、处理器302、总线303及存储在存储器301上并可在处理器302上运行的计算机程序，存储器301和处理器302通过总线303连接。处理器302执行该计算机程序时，实现前述实施例中的WEB应用静态资源加载性能的分析方法。其中，处理器的数量可以是一个或多个。

存储器301可以是高速随机存取记忆体(RAM，Random Access Memory)存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器301用于存储可执行程序代码，处理器302与存储器301耦合。

进一步的，本发明实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是设置于上述各实施例中的WEB应用静态资源加载性能的分析装置中，该计算机可读存储介质可以是前述图5所示实施例中的存储器。

该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现前述实施例中的WEB应用静态资源加载性能的分析方法。进一步的，该计算机可存储介质还可以是U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

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

集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个可读存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的可读存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种WEB应用静态资源加载性能的分析方法，其特征在于，包括：

在WEB应用页面头部插入性能数据收集脚本；

判断浏览器是否支持PerformanceObserver；

2.如权利要求1所述的WEB应用静态资源加载性能的分析方法，其特征在于，所述对收集到的resource性能数据进行处理，得到标准可读的性能指标具体包括：

构建如下函数：

function filterTime(a,b){

return a>0&&b>0&&a-b>＝0？a-b:undefined；

}；

3.如权利要求1所述的WEB应用静态资源加载性能的分析方法，其特征在于，在所述若支持则构建PerformanceObserver对象，对该对象进行监听得到resource性能数据之后，还包括：

若不支持则监听浏览器的onload事件，调用performance并获取其中的resource性能数据。

4.如权利要求1至3任一项所述的WEB应用静态资源加载性能的分析方法，其特征在于，所述性能指标包括：资源的url、资源的类型、资源重定向时间、DNS解析时间、TCP建连时间、网络总耗时、加载执行时间及请求发送到接收时间。

5.一种WEB应用静态资源加载性能的分析装置，其特征在于，包括：

插入模块，用于在WEB应用页面头部插入性能数据收集脚本；

6.如权利要求5所述的WEB应用静态资源加载性能的分析装置，其特征在于，所述处理模块具体用于：

构建如下函数：

function filterTime(a,b){

return a>0&&b>0&&a-b>＝0？a-b:undefined；

}；

7.如权利要求5所述的WEB应用静态资源加载性能的分析装置，其特征在于，所述判断模块还用于：

8.如权利要求5至7任一项所述的WEB应用静态资源加载性能的分析装置，其特征在于，所述性能指标包括：资源的url、资源的类型、资源重定向时间、DNS解析时间、TCP建连时间、网络总耗时、加载执行时间及请求发送到接收时间。

9.一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，实现权利要求1至4任意一项所述方法中的步骤。

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