网页性能分析方法、终端设备及计算机可读存储介质技术

一种网页性能分析方法、终端设备及计算机可读存储介质，涉及计算机技术领域。其中，网页性能分析方法包括：渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；判断本次渲染是否造成网页显示的卡顿；若造成网页显示的卡顿，则根据各项目标性能指标的数据，得到各项目标性能指标对应的评分值并输出；获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。上述方法、终端设备及计算机可读存储介质可解决无法在网页渲染过程中对网页性能进行动态分析的问题。

Page Performance Analysis Method, Terminal Equipment and Computer Readable Storage Media

The utility model relates to a method for Web page performance analysis, a terminal device and a computer readable storage medium, which relates to the field of computer technology. Among them, the performance analysis methods of web pages include: rendering a frame of web pages to obtain the target performance index data generated during the rendering process; judging whether the rendering results in the page display of Katon; if the page display of Katon, according to the target performance index data, get the corresponding score value of each target performance index and output; The Karton reason corresponding to the target performance index of the preset score is output. The above methods, terminal devices and computer readable storage media can solve the problem that dynamic analysis of web performance can not be carried out in the process of web rendering.

【技术实现步骤摘要】
网页性能分析方法、终端设备及计算机可读存储介质
本专利技术涉及计算机
，尤其涉及一种网页性能分析方法、终端设备及计算机可读存储介质。
技术介绍
网页显示是智能手机、平板电脑以及台式计算机等终端设备的重要功能之一，网页显示是否卡顿对于用户体验有着至关重要的影响。Google(谷歌)的lighthouse工具具有提供生成网页性能报告的功能，方便程序员基于其提供的网页性能报告对网页显示是否卡的进行分析。但是lighthouse工具主要分析的是网页在加载过程中的性能，而对网页在渲染过程中的性能则无法进行动态分析。
技术实现思路
有鉴于此，本专利技术实施例提供一种网页性能分析方法、终端设备及计算机可读存储介质，可解决无法在网页渲染过程中对网页性能进行动态分析的问题。本专利技术实施例第一方面提供了一种网页性能分析方法，包括：渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；判断本次渲染是否造成网页显示的卡顿；若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出；获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。本专利技术实施例第二方面提供了一种终端设备，包括：渲染模块，用于渲染一帧网页；监控模块，用于获取本次渲染过程中产生的各项目标性能指标的数据，以及判断本次渲染是否造成网页显示的卡顿；分析模块，用于若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，以及获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。本专利技术实施例第三方面提供了一种终端设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现上述本专利技术实施例第一方面提供的网页性能分析方法。本专利技术实施例第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现上述本专利技术实施例第一方面提供的网页性能分析方法。本专利技术实施例，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。附图说明图1为本专利技术一实施例提供的网页性能分析方法的实现流程示意图；图2为本专利技术另一实施例提供的网页性能分析方法的实现流程示意图；图3为本专利技术另一实施例提供的网页性能分析方法中在计算机终端显示分析报告的示意图；图4为本专利技术另一实施例提供的网页性能分析方法一应用例的实现示意图；图5为本专利技术一实施例提供的终端设备的结构示意图；图6为本专利技术另一实施例提供的终端设备的结构示意图；图7为本专利技术一实施例提供的终端设备的硬件结构示意图。具体实施方式为更进一步阐述本专利技术为实现预定专利技术目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本专利技术的具体实施方式、结构、特征及其功效，详细说明如后。请参阅图1，图1为本专利技术一实施例提供的网页性能分析方法的实现流程示意图。本实施例提供的网页性能分析方法可应用于需要进行网页展示的终端设备，如：智能手机、平板电脑、笔记本电脑等可在移动中使用的电子数据设备以及其他非可在移动中使用的电子数据设备。如图1所示，该方法主要包括以下步骤：S101、渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；终端设备中预设有浏览器，浏览器的主要功能是将用户选择的网页资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。目前大多数的显示器都有一个刷新频率。刷新频率是指电子束对屏幕上的图像重复扫描的次数，刷新频率越高，所显示的图象(画面)稳定性就越好。为了适应显示器的刷新频率，让显示的页面能给用户非常流畅的感觉，需要按照一定的频率对网页进行重复绘制，否则就会产生卡顿。其中，一次完整的网页绘制过程，即为一帧。“帧”表示将要呈现的网页的画面内容完整显示到单个帧所必须做的工作。通常来说，渲染一帧网页所要做的工作主要包括：运行JavaScript、处理输入事件、更新DOM(DocumentObjectModel，文档对象模型)和更改样式、计算页面上的布局(layout)、各层分别进行绘制(paint)以及合成各层渲染结果等等。具体的，目标性能指标可以是渲染一帧网页的整个过程中所有环节的时间或属性的数据。或者，目标性能指标也可以是渲染一帧网页的整个过程中部分指定环节的时间或属性的数据，具体可以但不限于包括：渲染本帧网页的总耗时，以及，其他可用于评判网页性能的指标，如：输入事件处理时间、网页渲染时间、文档对象模型(DOM)元素排版时间、网页层数和网页定时器数量中的任意一个或多个的组合。其中网页渲染时间具体可指网页内容的绘制时间。S102、判断本次渲染是否造成网页显示的卡顿；可选的，可根据本次渲染的总耗时来判断本次渲染是否造成网页显示的卡顿。例如：目前大多数的显示器的刷新频率是60Hz(赫兹)，那么页面的绘制频率能达到60帧每秒是最好的，因为软件帧和硬件的刷新频率一致的话，页面能给人非常流畅的感觉，否则就会感觉到很卡，这样大概有16.6ms(1000/60)来完成每一帧的呈现，如果本次渲染的总耗时超过这个时长，即可认为造成网页显示的卡顿。可以理解的，16.6ms仅仅是一个示例，在实际应用中不限于此。S103、若造成网页显示的卡顿，则根据各项目标性能指标的数据，得到各项目标性能指标对应的评分值并输出；具体的，若本次渲染造成网页显示的卡顿，则根据各项目标性能指标的数据，逐一对各项目标性能指标进行评分，获取各项目标性能指标对应的评分值并输出。若一项目标性能指标的数据只有一个数据值，则基于该数据值进行评分。若一项目标性能指标的数据包括多个数据值，则基于多个数据值的平均值或多个数据值中的最大值进行评分。通常来说，数据值越大，评分值越低。S104、获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。评分值越低，说明对应的目标性能指标对应的卡顿原因越有可能是本次渲染导致的卡顿的原因，因此获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，开发者可以根据输出的原因方便地定位到网页代码存在的问题，进而对网页进行优化设置，以提高用户体验。S105、若未造成网页显示的卡顿，则不对各项目标性能指标的数据进行评分。若未造成网页显示的卡顿，说明网页中不存在显著的缺陷，因此可不对各项目标性能指标的数据进行评分。或者，也可以对各项目标性能指标的数据进行评分，但只保存评分，并不执行后续获取卡顿原因的操作。需要说明的是，步骤S101至S105是一个循环的过程，在预设的分析周期的期间内，重复执行步骤S101至S105，以得到该期间内造成网页显示的卡顿的每一次渲染过程中，各项目标性能指标对应的评分值以及评分值小于预设分值的目标性能指标对应的卡顿原因。进一步的，还可根据得到的评分值及卡顿原因生成分析报告并输出，以便用户基于输出的分析报告找出该网页中存在的缺陷，并进而对该网页进行优化。本专利技术实施例提供的网页性能分析本文档来自技高网...

【技术保护点】
1.一种网页性能分析方法，应用于终端设备，其特征在于，所述方法包括：渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；判断本次渲染是否造成网页显示的卡顿；若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出；获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

【技术特征摘要】
1.一种网页性能分析方法，应用于终端设备，其特征在于，所述方法包括：渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；判断本次渲染是否造成网页显示的卡顿；若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出；获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。2.如权利要求1所述的方法，其特征在于，所述终端设备中预设有所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系；则，所述若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，包括：若造成网页显示的卡顿，则从所述第一对应关系中，查找所述各项目标性能指标的数据中值最大的数据各自对应的数据范围；根据查找到的数据范围，确认所述各项目标性能指标的评分值并输出。3.如权利要求2所述的方法，其特征在于，所述方法还包括：采集预设时长内用户访问最多的预设数量个网址；在多台不同机型的终端设备上分别对所述预设数量个网址各自对应的网页进行渲染，并获取渲染过程中产生的所述各项目标性能指标的样本数据；按照从小到大的顺序对所述样本数据进行排序，并取排序后的所述样本数据整体分布的若干个分位数数据的值及最大值；根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、所述若干个分位数数据的值、所述最大值以及预设的多个评分值，生成所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。4.如权利要求2所述的方法，其特征在于，所述从所述第一对应关系中，查找所述各项目标性能指标的数据中值最大的数据各自对应的数据范围之前，包括：判断所述第一对应关系中多个所述数据范围的阈值数据是否过期；若所述阈值数据过期，则向服务器请求更新所述阈值数据；基于更新后的所述阈值数据，执行所述从所述第一对应关系中，查找所述各项目标性能指标的数据各自对应的数据范围的步骤。5.如权利要求1所述的方法，其特征在于，所述方法还包括：在所述终端设备中指定多项所述目标性能指标；生成不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系；则，所述获取本次渲染过程中产生的各项目标性能指标的数据，包括：获取本次渲染过程中产生的所述第二对应关系中的各项目标性能指标的数据；所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，包括：查找所述第二对应关系，得到所述评分值小于预设分值的目标性能指标对应的卡顿原因并输出。6.如权利要求1所述的方法，其特征在于，所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，包括：在预设的不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系中，对所述评分值小于预设分值的目标性能指标对应的卡顿原因进行查找；若查找到对应的卡顿原因，则输出对应的卡顿原因；若未查找到对应的卡顿原因，则将输出卡顿原因为未知；所述方法还包括：获取用户输入的卡顿原因为未知的目标性能指标的卡顿原因；将所述用户输入的卡顿原因更新在所述第二对应关系中，并与所述卡顿原因为未知的目标性能指标相关联。7.如权利要求1至6中的任一项所述的方法，其特征在于，在浏览器的内核中添加监控模块和分析模块；通过所述监控模块执行所述获取本次渲染过程中产生的各项目标性能指标的数据，以及所述判断本次渲染是否造成网页显示的卡顿的步骤；通过所述分析模块执行所述根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，以及所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出的步骤；所述监控模块在本次渲染造成网页显示的卡顿时，将所述各项目标性能指标的数据发送给所述分析模块；所述分析模块将得到的评分值及获取的卡顿原因输出给所述监控模块。8.如权利要求7所述的方法，其特征在于，所述终端设备为移动终端，所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出之后，还包括：通过所述监控模块生成分析报告，所述分析报告包含所述评分值小于预设分值的目标性能指标的评分值及所述目标性能指标对应的卡顿原因；通过所述浏览器的内核调试模块将所述分析报告输出到计算机终端的调试工具中进行显示。9.如权利要求1至6中的任一项所述的方法，其特征在于，所述目标性能指标包括：渲染本帧网页的总耗时，以及，输入事件...

【专利技术属性】
技术研发人员：刘博杰，郑清江，
申请(专利权)人：腾讯科技武汉有限公司，
类型：发明
国别省市：湖北,42