网页性能评价方法、装置、设备及存储介质与流程

专利2026-02-04  11


本申请涉及数据处理,尤其涉及一种网页性能评价方法、装置、设备及存储介质。


背景技术:

1、lcp(largest contentful paint,最大内容绘制)最早是由谷歌提出的一种用来评价网页性能的方法,目前已经集成到了浏览器中,对于多页面的前端应用可以取得很好的效果,但是当前前端领域网页大多采用了spa(单页面应用)的形式,浏览器默认提供的网页性能评价方法在路由切换时不再进行统计,导致失去了评价效果。

2、目前还有一些网页性能评价方法是在页面中的关键位置进行打点标记的方式来对页面进行评价,该方法同样能够有效对页面进行评价,但是存在人工标注而产生的巨大工作量的问题,不具有很强的适应性,实现方式受团队和前端开发框架的影响比较大。


技术实现思路

1、本申请的主要目的在于提供一种网页性能评价方法、装置、设备及存储介质,旨在不受前端开发框架的影响,同时无需人工进行标注和介入,从而降低网页性能评价成本,并增强应用场景的适用性。

2、为实现上述目的,本申请提出一种网页性能评价方法,所述的方法包括:

3、获取目标网页中的若干个新增页面元素;

4、基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值;

5、基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价。

6、在一实施例中,所述获取目标网页中的若干个新增页面元素,包括:

7、监听所述目标网页是否出现网页变动;

8、若是,则获取网页变动产生的回调结果;

9、基于所述回调结果,确定所述目标网页中的若干个新增页面元素。

10、在一实施例中,所述基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值,包括:

11、判断所述目标网页是否加载完成;

12、若是,则获取页面加载时间,并根据预设算法对所述页面加载时间内的各所述新增页面元素进行计算,得到各所述新增页面元素对应的元素得分;

13、对各所述新增页面元素对应的元素得分进行统计分析,确定所述目标页面对应的页面最大内容渲染值。

14、在一实施例中,所述预设算法包括深度优先搜索算法;

15、所述根据预设算法对所述页面加载时间内的各所述新增页面元素进行计算,得到各所述新增页面元素对应的元素得分,包括:

16、根据所述深度优先搜索算法,对所述页面加载时间内的各所述新增页面元素进行深度优先遍历,确定各所述新增页面元素对应的信息量大小以及当前层级;

17、对所述信息量大小以及所述当前层级进行计算,得到各所述新增页面元素对应的元素得分。

18、在一实施例中,所述判断所述目标网页是否加载完成,包括:

19、获取所述目标网页对应的资源及接口调用情况;

20、若所述资源及接口调用情况为在预设监听时间内无变动,则确定所述目标网页加载完成;和/或,

21、检测所述目标网页是否发生用户交互行为;

22、若是,则确定所述目标网页加载完成。

23、在一实施例中,所述基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价,包括:

24、将所述页面最大内容渲染值与预设网页性能评分等级进行匹配,确定所述目标网页的网页性能评分等级;

25、获取所述网页性能评分等级对应的等级评价;

26、将所述网页性能评分等级与所述等级评价进行关联组合,生成所述目标网页的网页性能评价。

27、在一实施例中,所述基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价之后,还包括:

28、若所述网页性能评价为负面评价,则获取性能负面原因;

29、基于所述性能负面原因,生成网页优化报告;

30、将所述网页优化报告推送至管理人员,以供所述管理人员进行查看。

31、此外,为实现上述目的,本申请还提出一种网页性能评价装置,所述网页性能评价装置包括:

32、获取模块,用于获取目标网页中的若干个新增页面元素;

33、计算模块,用于基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值;

34、确定模块,用于基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价。

35、此外,为实现上述目的,本申请还提出一种网页性能评价设备,所述设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序配置为实现如上文所述的网页性能评价方法的步骤。

36、此外,为实现上述目的,本申请还提出一种存储介质,所述存储介质为计算机可读存储介质,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如上文所述的网页性能评价方法的步骤。

37、此外,为实现上述目的,本申请还提供一种计算机程序产品,所述计算机程序产品包括计算机程序,所述计算机程序被处理器执行时实现如上文所述的网页性能评价方法的步骤。

38、本申请提供了一种网页性能评价方法、装置、设备及存储介质,所述网页性能评价方法通过获取目标网页中的若干个新增页面元素,进而基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值,从而基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价,进而实现在单页面(spa)场景下对网页的性能进行评价,进而不受前端开发框架的影响,同时无需人工进行标注和介入,从而降低网页性能评价成本,并增强应用场景的适用性。



技术特征:

1.一种网页性能评价方法,其特征在于,包括:

2.如权利要求1所述的网页性能评价方法,其特征在于,所述获取目标网页中的若干个新增页面元素,包括:

3.如权利要求1所述的网页性能评价方法,其特征在于,所述基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值,包括:

4.如权利要求3所述的网页性能评价方法,其特征在于,所述预设算法包括深度优先搜索算法;

5.如权利要求3所述的网页性能评价方法,其特征在于,所述判断所述目标网页是否加载完成,包括:

6.如权利要求1所述的网页性能评价方法,其特征在于,所述基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价,包括:

7.如权利要求1所述的网页性能评价方法,其特征在于,所述基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价之后,还包括:

8.一种网页性能评价装置,其特征在于,包括:

9.一种网页性能评价设备,其特征在于,所述网页性能评价设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序配置为实现如权利要求1至7中任一项所述的网页性能评价方法的步骤。

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


技术总结
本申请公开了一种网页性能评价方法、装置、设备及存储介质,涉及数据处理技术领域,所述网页性能评价方法包括:获取目标网页中的若干个新增页面元素;基于各所述新增页面元素,计算所述目标页面对应的页面最大内容渲染值;基于所述页面最大内容渲染值,确定所述目标网页的网页性能评价。本申请通过对各新增页面元素进行计算,进而根据计算得到的页面最大内容渲染值确定目标网页的网页性能评价,从而实现在单页面(SPA)场景下对网页的性能进行评价,进而不受前端开发框架的影响,同时无需人工进行标注和介入,从而降低网页性能评价成本,并增强应用场景的适用性。

技术研发人员:潘海成,王健,彭洁
受保护的技术使用者:招商银行股份有限公司
技术研发日:
技术公布日:2024/12/17
转载请注明原文地址:https://xbbs.6miu.com/read-29376.html