一种网页页面的FMP的确定方法、装置、设备及介质

技术领域

本发明涉及网页性能检测领域，特别涉及一种网页页面的FMP的确定方法、装置、设备及计算机可读存储介质。

背景技术

随着Web应用越来越复杂，DOMContentLoaded Event和OnLoad Event已经越来越难以准确定义网页页面的打开速度，目前在实际项目中，前端开发者通过计算网页页面的FMP(First Meaningful Paint，首次有效绘制时间)，利用FMP来衡量网页页面打开的速度，进而判断网页页面的页面性能。

在现有技术中，计算FMP的方式一般是通过在目标网页文件的首尾添加script植入时间函数得到两个时间点，再利用两个时间点进行作差得到一个时长，这个时长也就是渲染目标网页文件的网页页面所有节点所需的时间；或者是通过官方提供的window.performance获取渲染目标网页文件的首个节点的startTime以及通过loadEventStart和loadEventEnd事件获取事件触发和结束的时间节点，得到所有节点初始化后的时长。可见，现有技术中计算FMP的方式，计算的是加载完成目标网页文件的整个网页页面的时间，而不是首屏可视范围内的网页页面的渲染时间；即现有技术中计算出FMP的时间的方式并不准确，进而依据该FMP进行页面性能判断的结果并不准确。

因此，如何提高计算出FMP的准确度，进而提高依据FMP进行页面性能判断的准确度，是本领域技术人员目前需要解决的技术问题。

发明内容

有鉴于此，本发明的目的在于提供一种网页页面的FMP的确定方法，能够提高计算出FMP的准确度，进而提高依据FMP进行页面性能判断的准确度；本发明的另一目的是提供一种网页页面的FMP的确定装置、设备及计算机可读存储介质，均具有上述有益效果。

为解决上述技术问题，本发明提供一种网页页面的FMP的确定方法，包括：

根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素；

在根据所述目标网页文件生成对应的DOM树的过程中，计算出各所述目标页面元素的累计渲染时长；

根据所述累计渲染时长确定出所述网页页面的FMP。

优选地，所述页面元素包括父区块和子区块；对应的，所述根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素的过程，具体包括：

若所述目标网页文件在所述首屏可视范围内展示的所述网页页面的所述子区块的总面积小于所述父区块的总面积，则将所述父区块设置为所述目标页面元素；

若所述目标网页文件在所述首屏可视范围内展示的所述网页页面的所述子区块的总面积大于所述父区块的总面积，且所述子区块不是所述父区块的后代区块，则将所述父区块和所述子区块设置为所述目标页面元素；

若所述目标网页文件在所述首屏可视范围内展示的所述网页页面的所述子区块的总面积大于所述父区块的总面积，且所述子区块为所述父区块的后代区块，则将所述子区块设置为所述目标页面元素。

优选地，所述在根据所述目标网页文件生成对应的DOM树的过程中，计算出各所述目标页面元素的累计渲染时长的过程，具体包括：

在根据所述目标网页文件生成对应的DOM树的过程中，通过MutationObserver事件触发监听所述DOM树的变化，在将所述页面元素放入所述DOM树中时触发监听，在所述页面元素加载完成时取消监听，得出所述累计渲染时长。

优选地，所述根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素的过程，具体包括：

根据所述目标网页文件在所述首屏可视范围内展示的网页页面的各所述页面元素确定出有效页面元素；

根据各所述有效页面元素的所述位置关系，确定出所述目标页面元素。

优选地，在所述根据所述累计渲染时长确定出所述网页页面的FMP之后，进一步包括：

在所述首屏可视范围内显示所述FMP。

优选地，在所述根据所述累计渲染时长确定出所述网页页面的FMP之后，进一步包括：

根据所述FMP确定出所述网页页面的页面性能。

优选地，在所述根据所述FMP确定出所述网页页面的页面性能之后，进一步包括：

在确定出所述页面性能异常时，发出对应的提示信息。

为解决上述技术问题，本发明还提供一种网页页面的FMP的确定装置，包括：

第一确定模块，用于根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素；

计算模块，用于在根据所述目标网页文件生成对应的DOM树的过程中，计算出各所述目标页面元素的累计渲染时长；

第二确定模块，用于根据所述累计渲染时长确定出所述网页页面的FMP。

为解决上述技术问题，本发明还提供一种网页页面的FMP的确定设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现上述任一种网页页面的FMP的确定方法的步骤。

为解决上述技术问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一种网页页面的FMP的确定方法的步骤。

本发明提供的一种网页页面的FMP确定的方法，通过根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素；在根据所述目标网页文件生成对应的DOM树的过程中，计算出各所述目标页面元素的累计渲染时长；根据所述累计渲染时长确定出所述网页页面的FMP；可见，本方法通过计算出首屏可视范围内展示的网页页面的目标页面元素的累计渲染时长确定出网页页面的FMP，相较于现有技术中计算目标网页文件的全部网页页面的渲染时间，本方法能够提高计算出FMP的准确度，进而提高依据FMP进行页面性能判断的准确度。

为解决上述技术问题，本发明还提供了一种网页页面的FMP的确定装置、设备及计算机可读存储介质，均具有上述有益效果。

附图说明

为了更清楚地说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本发明实施例提供的一种网页页面的FMP的确定方法的流程图；

图2为本发明实施例提供的一种网页页面的FMP的确定装置的结构图；

图3为本发明实施例提供的一种网页页面的FMP的确定设备的结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例的核心是提供一种网页页面的FMP的确定方法，能够提高计算出FMP的准确度，进而提高依据FMP进行页面性能判断的准确度；本发明的另一核心是提供一种网页页面的FMP的确定装置、设备及计算机可读存储介质，均具有上述有益效果。

为了使本领域技术人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。

图1为本发明实施例提供的一种网页页面的FMP的确定方法的流程图。如图1所示，一种网页页面的FMP的确定方法包括：

S10：根据目标网页在首屏可视范围内的各页面元素的位置关系，确定出目标页面元素。

本实施例中，目标网页文件指的是设置有需要在屏幕上展示的网页内容的文件，通常是HTML格式，文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等。在实际操作中，在打开目标网页文件时，将以网页页面的形式展示目标网页文件的网页内容；若目标网页文件的网页内容较多，首屏可视范围内无法显示目标网页文件的全部网页内容，需要通过分屏的方式来展示目标网页文件的网页内容，使得目标网页文件对应多个网页页面。

网页页面中的任何节点起初都是一个区块，即页面元素；如标题、头像、轮播图等网页内容都分别对应为不同的页面元素；首屏可视范围内的各页面元素指的是在打开目标网页文件时出现在首页内的各页面元素；本步骤是根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系确定出用于计算首屏可视范围内的网页页面的FMP的目标页面元素。

S20：在根据目标网页文件生成对应的DOM树的过程中，计算出各目标页面元素的累计渲染时长；

S30：根据累计渲染时长确定出网页页面的FMP。

具体的，DOM树是指通过DOM(Document Object Model，文档对象化模型)将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法；在本实施例中，在将目标网页文件转换为对应的DOM树的过程中，将各页面元素放入DOM树的各叶子节点中的过程即为页面渲染的过程。

在本步骤中，是在确定出目标页面元素之后，将进一步根据对各目标页面元素进行渲染所需的时长进行累计，得出网页页面中目标页面元素的累计渲染时长。换句话说，累计渲染时长是将首屏可视范围内的网页页面的各页面元素渲染完成所需的最长时间。例如，假设在网页页面中共确定出两个目标页面元素，且是对在对第一个目标页面元素渲染完成之后才对第二个目标页面元素进行渲染，两个目标页面元素所需的渲染时长分别为1ms和2ms，那么累计渲染时长为3ms；若两个目标页面元素可以同时进行渲染，且两个目标页面元素所需的渲染时长分别为1ms和2ms，那么取目标页面元素中较长的渲染时间作为累计渲染时长，即累计渲染时长为2ms。

在确定出累计渲染时长后，则根据累计渲染时长确定出网页额页面的FMP，将确定出的累计渲染时长设置为首屏可视范围内展示的网页页面的FMP。

本发明实施例提供的一种网页页面的FMP确定的方法，通过根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素；在根据目标网页文件生成对应的DOM树的过程中，计算出各目标页面元素的累计渲染时长；根据累计渲染时长确定出网页页面的FMP；可见，本方法通过计算出首屏可视范围内展示的网页页面的目标页面元素的累计渲染时长确定出网页页面的FMP，相较于现有技术中计算目标网页文件的全部网页页面的渲染时间，本方法能够提高计算出FMP的准确度，进而提高依据FMP进行页面性能判断的准确度。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例中，页面元素包括父区块和子区块；对应的，根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素的过程，具体包括：

若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积小于父区块的总面积，则将父区块设置为目标页面元素；

若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块不是父区块的后代区块，则将父区块和子区块设置为目标页面元素；

若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块为父区块的后代区块，则将子区块设置为目标页面元素。

需要说明的是，在本步骤中，是考虑到页面元素包括父区块和子区块的情况；其中，父区块和子区块指的是在网页页面中位置关系有重叠的页面元素。例如，假设网页页面中包括轮播图和轮播图的左下角显示当前图像序号与总图像数量关系的标识信息，则轮播图为父区块，标识信息为子区块；上述对父区块和子区块的描述只是一个举例说明，不作为具体的限定。

在本实施例中，主要考虑到三种场景，并根据三种场景分别确定出对应的目标页面元素：

场景一：若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积小于父区块的总面积，则将父区块设置为目标页面元素。

在这个场景中，目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积小于父区块的总面积，即各子区块都在父区块内，因此若将父区块渲染完成，则表示当前网页页面渲染完成，因此将父区块设置为目标页面元素。

场景二：若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块不是父区块的后代区块，则将父区块和子区块设置为目标页面元素。

在这个场景中，目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块不是父区块的后代区块，因此需要根据最后渲染完成的页面元素所需的渲染时长确定出累计渲染时长，因此将父区块和子区块设置为目标页面元素。

场景三：若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块为父区块的后代区块，则将子区块设置为目标页面元素。

在这个场景中，目标网页文件在首屏可视范围内展示的网页页面的子区块都是父区块的后代区块，在子区块的总面积大于父区块的总面积的情况下，若子区块渲染完成，则表示当前网页页面渲染完成，因此将子区块设置为目标页面元素。

可见，本实施例根据页面元素的具体位置状态对应确定出对应的目标页面元素，从而能进一步提高确定出网页页面的FMP的便捷性和准确度。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例中，

在根据目标网页文件生成对应的DOM树的过程中，计算出各目标页面元素的累计渲染时长的过程，具体包括：

在根据目标网页文件生成对应的DOM树的过程中，通过MutationObserver事件触发监听DOM树的变化，在将页面元素放入DOM树中时触发监听，在页面元素加载完成时取消监听，得出累计渲染时长。

具体的，在本实施例中，具体是利用MutationObserver监视对DOM树所做的更改；在根据目标网页文件生成对应的DOM树的过程中，通过MutationObserver事件触发监听DOM树的变化；在将页面元素放入DOM树中时触发监听，在页面元素加载完成后取消监听，根据触发监听和取消监听之间的时长确定出累计渲染时长。

可见，本实施例通过利用MutationObserver事件得出累计渲染时长，操作方式便捷。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例中，

根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素的过程，具体包括：

根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素确定出有效页面元素；

根据各有效页面元素的位置关系，确定出目标页面元素。

具体的，有效页面元素指的是显示于首屏可视范围内展示的网页页面中的页面元素；在本实施例中，具体是先根据目标网页文件在首屏可视范围内展示的网页页面中各页面元素确定出有效页面元素，再从有效页面元素中确定出目标页面元素。

可以理解的是，由于确定目标页面元素的计算过程更加复杂，因此按照本实施例的方法，先确定出有效页面元素，再从有效页面元素中确定目标页面元素，能够提高确定出目标页面元素的效率。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例在根据累计渲染时长确定出网页页面的FMP之后，进一步包括：

在首屏可视范围内显示FMP。

具体的，在本实施例中，是在根据累计渲染时长确定出网页页面的FMP之后，利用预设的显示装置显示当前确定出的FMP。本实施例中，对显示FMP的具体形式不做限定，另外需要说明的是，在本实施例中，对显示装置的具体类型也不做限定，例如可以是液晶显示屏或者触摸屏。在本实施例中，优选地在用于显示目标网页文件的网页页面的显示装置上显示当前确定出的FMP，即在显示装置的首屏可视范围内显示FMP。

可见，本实施例通过进一步在首屏可视范围内显示FMP，因此能够便于用户更直观地查看当前的网页页面的打开速度，从而进一步提升用户的使用体验。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例在根据累计渲染时长确定出网页页面的FMP之后，进一步包括：

根据FMP确定出网页页面的页面性能。

具体的，在本实施例中，是在确定出网页页面的FMP之后，进一步按照预先设定的判断规则确定出网页页面的页面性能。例如，假设当前确定出的FMP小于第一阈值，则表示网页页面的打开速度较快，网页页面的性能较好；假设当前确定出的FMP大于第一阈值且小于第二阈值，则表示网页页面的打开速度一般，网页页面的性能一般；假设当前确定出的FMP大于第二阈值，则表示网页页面的打开速度较慢，网页页面的性能较差。当然，在实际操作中，还可以按照其他的判断规则根据FMP确定出网页页面的页面性能。

可见，本实施例通过进一步根据FMP确定出网页页面的页面性能，能够进一步提升用户的使用体验。

在上述实施例的基础上，本实施例对技术方案作了进一步的说明和优化，具体的，本实施例在根据FMP确定出网页页面的页面性能之后，进一步包括：

在确定出页面性能异常时，发出对应的提示信息。

具体的，在本实施例中，是在根据FMP确定出网页页面对应的页面性能之后，若确定出网页页面的页面性能异常，则进一步触发提示装置发出对应的提示信息。需要说明的是，提示装置可以具体是蜂鸣器和/或指示灯，通过触发蜂鸣器/指示灯等提示装置发出对应的提示信息，如蜂鸣音/闪烁灯等，以直观地提示用户当前已经得出网页页面的FMP且确定出当前网页页面的页面性能异常，从而能够进一步提升用户的使用体验。

上文对于本发明提供的一种网页页面的FMP的确定方法的实施例进行了详细的描述，本发明还提供了一种与该方法对应的网页页面的FMP的确定装置、设备及计算机可读存储介质，由于装置、设备及计算机可读存储介质部分的实施例与方法部分的实施例相互照应，因此装置、设备及计算机可读存储介质部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。

图2为本发明实施例提供的一种网页页面的FMP的确定装置的结构图，如图2所示，一种网页页面的FMP的确定装置包括：

第一确定模块21，用于根据目标网页文件在首屏可视范围内展示的网页页面的各页面元素的位置关系，确定出目标页面元素；

计算模块22，用于在根据目标网页文件生成对应的DOM树的过程中，计算出各目标页面元素的累计渲染时长；

第二确定模块23，用于根据累计渲染时长确定出网页页面的FMP。

本发明实施例提供的网页页面的FMP的确定装置，具有上述网页页面的FMP的确定方法的有益效果。

作为优选的实施方式，第一确定模块具体包括：

第一确定子模块，用于若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积小于父区块的总面积，则将父区块设置为目标页面元素；

第二确定子模块，用于若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块不是父区块的后代区块，则将父区块和子区块设置为目标页面元素；

第三确定子模块，用于若目标网页文件在首屏可视范围内展示的网页页面的子区块的总面积大于父区块的总面积，且子区块为父区块的后代区块，则将子区块设置为目标页面元素。

作为优选的实施方式，计算模块具体包括：

计算子模块，用于在根据目标网页文件生成对应的DOM树的过程中，通过MutationObserver事件触发监听DOM树的变化，在将页面元素放入DOM树中时触发监听，在页面元素加载完成时取消监听，得出累计渲染时长。

作为优选的实施方式，另一种网页页面的FMP的确定装置进一步包括：

显示模块，用于在首屏可视范围内显示FMP。

作为优选的实施方式，另一种网页页面的FMP的确定装置进一步包括：

第三确定模块，用于根据FMP确定出网页页面的页面性能。

作为优选的实施方式，另一种网页页面的FMP的确定装置进一步包括：

提示模块，用于在确定出页面性能异常时，发出对应的提示信息。

图3为本发明实施例提供的一种网页页面的FMP的确定设备的结构图，如图3所示，一种网页页面的FMP的确定设备包括：

存储器31，用于存储计算机程序；

处理器32，用于执行计算机程序时实现如上述网页页面的FMP的确定方法的步骤。

本发明实施例提供的网页页面的FMP的确定设备，具有上述网页页面的FMP的确定方法的有益效果。

为解决上述技术问题，本发明还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述网页页面的FMP的确定方法的步骤。

本发明实施例提供的计算机可读存储介质，具有上述网页页面的FMP的确定方法的有益效果。

以上对本发明所提供的网页页面的FMP的确定方法、装置、设备及计算机可读存储介质进行了详细介绍。本文中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。