CN109840195B - 网页性能分析方法、终端设备及计算机可读存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页性能分析方法、终端设备及计算机可读存储介质。

背景技术

网页显示是智能手机、平板电脑以及台式计算机等终端设备的重要功能之一，网页显示是否卡顿对于用户体验有着至关重要的影响。Google(谷歌)的lighthouse工具具有提供生成网页性能报告的功能，方便程序员基于其提供的网页性能报告对网页显示是否卡的进行分析。但是lighthouse工具主要分析的是网页在加载过程中的性能，而对网页在渲染过程中的性能则无法进行动态分析。

发明内容

有鉴于此，本发明实施例提供一种网页性能分析方法、终端设备及计算机可读存储介质，可解决无法在网页渲染过程中对网页性能进行动态分析的问题。

本发明实施例第一方面提供了一种网页性能分析方法，包括：渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；判断本次渲染是否造成网页显示的卡顿；若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出；获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

本发明实施例第二方面提供了一种终端设备，包括：渲染模块，用于渲染一帧网页；监控模块，用于获取本次渲染过程中产生的各项目标性能指标的数据，以及判断本次渲染是否造成网页显示的卡顿；分析模块，用于若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，以及获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

本发明实施例第三方面提供了一种终端设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现上述本发明实施例第一方面提供的网页性能分析方法。

本发明实施例第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现上述本发明实施例第一方面提供的网页性能分析方法。

本发明实施例，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。

附图说明

图1为本发明一实施例提供的网页性能分析方法的实现流程示意图；

图2为本发明另一实施例提供的网页性能分析方法的实现流程示意图；

图3为本发明另一实施例提供的网页性能分析方法中在计算机终端显示分析报告的示意图；

图4为本发明另一实施例提供的网页性能分析方法一应用例的实现示意图；

图5为本发明一实施例提供的终端设备的结构示意图；

图6为本发明另一实施例提供的终端设备的结构示意图；

图7为本发明一实施例提供的终端设备的硬件结构示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明的具体实施方式、结构、特征及其功效，详细说明如后。

请参阅图1，图1为本发明一实施例提供的网页性能分析方法的实现流程示意图。本实施例提供的网页性能分析方法可应用于需要进行网页展示的终端设备，如：智能手机、平板电脑、笔记本电脑等可在移动中使用的电子数据设备以及其他非可在移动中使用的电子数据设备。如图1所示，该方法主要包括以下步骤：

S101、渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据；

终端设备中预设有浏览器，浏览器的主要功能是将用户选择的网页资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。目前大多数的显示器都有一个刷新频率。刷新频率是指电子束对屏幕上的图像重复扫描的次数，刷新频率越高，所显示的图象(画面)稳定性就越好。

为了适应显示器的刷新频率，让显示的页面能给用户非常流畅的感觉，需要按照一定的频率对网页进行重复绘制，否则就会产生卡顿。其中，一次完整的网页绘制过程，即为一帧。“帧”表示将要呈现的网页的画面内容完整显示到单个帧所必须做的工作。通常来说，渲染一帧网页所要做的工作主要包括：运行JavaScript、处理输入事件、更新DOM(Document Object Model，文档对象模型)和更改样式、计算页面上的布局(layout)、各层分别进行绘制(paint)以及合成各层渲染结果等等。

具体的，目标性能指标可以是渲染一帧网页的整个过程中所有环节的时间或属性的数据。或者，目标性能指标也可以是渲染一帧网页的整个过程中部分指定环节的时间或属性的数据，具体可以但不限于包括：渲染本帧网页的总耗时，以及，其他可用于评判网页性能的指标，如：输入事件处理时间、网页渲染时间、文档对象模型(DOM)元素排版时间、网页层数和网页定时器数量中的任意一个或多个的组合。其中网页渲染时间具体可指网页内容的绘制时间。

S102、判断本次渲染是否造成网页显示的卡顿；

可选的，可根据本次渲染的总耗时来判断本次渲染是否造成网页显示的卡顿。例如：目前大多数的显示器的刷新频率是60Hz(赫兹)，那么页面的绘制频率能达到60帧每秒是最好的，因为软件帧和硬件的刷新频率一致的话，页面能给人非常流畅的感觉，否则就会感觉到很卡，这样大概有16.6ms(1000/60)来完成每一帧的呈现，如果本次渲染的总耗时超过这个时长，即可认为造成网页显示的卡顿。可以理解的，16.6ms仅仅是一个示例，在实际应用中不限于此。

S103、若造成网页显示的卡顿，则根据各项目标性能指标的数据，得到各项目标性能指标对应的评分值并输出；

具体的，若本次渲染造成网页显示的卡顿，则根据各项目标性能指标的数据，逐一对各项目标性能指标进行评分，获取各项目标性能指标对应的评分值并输出。若一项目标性能指标的数据只有一个数据值，则基于该数据值进行评分。若一项目标性能指标的数据包括多个数据值，则基于多个数据值的平均值或多个数据值中的最大值进行评分。通常来说，数据值越大，评分值越低。

S104、获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

评分值越低，说明对应的目标性能指标对应的卡顿原因越有可能是本次渲染导致的卡顿的原因，因此获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，开发者可以根据输出的原因方便地定位到网页代码存在的问题，进而对网页进行优化设置，以提高用户体验。

S105、若未造成网页显示的卡顿，则不对各项目标性能指标的数据进行评分。

若未造成网页显示的卡顿，说明网页中不存在显著的缺陷，因此可不对各项目标性能指标的数据进行评分。或者，也可以对各项目标性能指标的数据进行评分，但只保存评分，并不执行后续获取卡顿原因的操作。

需要说明的是，步骤S101至S105是一个循环的过程，在预设的分析周期的期间内，重复执行步骤S101至S105，以得到该期间内造成网页显示的卡顿的每一次渲染过程中，各项目标性能指标对应的评分值以及评分值小于预设分值的目标性能指标对应的卡顿原因。进一步的，还可根据得到的评分值及卡顿原因生成分析报告并输出，以便用户基于输出的分析报告找出该网页中存在的缺陷，并进而对该网页进行优化。

本发明实施例提供的网页性能分析方法，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。

请参阅图2，图2为本发明另一实施例提供的网页性能分析方法的实现流程示意图。本实施例提供的网页性能分析方法可应用于需要进行网页展示的终端设备，如：智能手机、平板电脑、笔记本电脑等可在移动中使用的电子数据设备以及其他非可在移动中使用的电子数据设备。如图2所示，该方法主要包括以下步骤：

S201、渲染一帧网页；

终端设备中预设有浏览器，浏览器的主要功能是将用户选择的网页资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。目前大多数的显示器都有一个刷新频率。刷新频率是指电子束对屏幕上的图像重复扫描的次数，刷新频率越高，所显示的图象(画面)稳定性就越好。

为了适应显示器的刷新频率，让显示的页面能给用户非常流畅的感觉，需要按照一定的频率对网页进行重复绘制，否则就会产生卡顿。其中，一次完整的网页绘制过程，即为一帧。“帧”表示将要呈现的网页的画面内容完整显示到单个帧所必须做的工作。通常来说，渲染一帧网页所要做的工作主要包括：运行JavaScript、处理输入事件、更新DOM和更改样式、计算页面上的布局、各层分别进行绘制以及合成各层渲染结果等等。

具体的，通过浏览器的内核调度器通知渲染模块开始渲染一帧网页。内核调度器会根据预设的渲染间隔，调度渲染模块逐帧渲染网页。

S202、获取本次渲染过程中产生的各项目标性能指标的数据；

目标性能指标可以但不限于包括：渲染本帧网页的总耗时(Frame)，以及，其他可用于评判网页性能的指标，如：输入事件处理时间(Event)、网页渲染时间(Paint)、DOM元素排版时间(Layout)、网页层数(Layer Count)和网页定时器数量(Timer)中的任意一个或多个的组合。其中网页渲染时间具体可指网页内容的绘制时间。

可选的，在执行步骤S201：渲染一帧网页之前，可在终端设备中指定多项目标性能指标，并生成不同的卡顿原因与指定的多项目标性能指标之间的第二对应关系。选取该第二对应关系中的所有目标性能指标，作为本步骤中的目标性能指标，即在步骤S202中，获取本次渲染过程中产生的第二对应关系中的各项目标性能指标的数据。

可选的，在浏览器的内核中添加监控模块。通过监控模块在渲染模块开始渲染时，监控本次渲染的开始消息并记录开始时间。然后，通过监控模块获取本次渲染过程中产生的各项目标性能指标的数据。具体的，渲染模块进行渲染工作，同时将需要监控的各项目标性能指标的数据发送给监控模块记录。渲染模块完成渲染一帧，将结束渲染的消息通知给监控模块，并通知监控模块记录结束时间。监控模块根据记录的开始时间和结束时间，得到渲染本帧网页的总耗时。

S203、判断渲染本帧网页的总耗时是否大于预设耗时；

判断渲染本帧网页的总耗时是否大于预设耗时，即判断本次渲染是否造成网页显示的卡顿。可选的，可通过浏览器的内核中添加的监控模块判断渲染本帧网页的总耗时是否大于预设耗时，若渲染本帧网页的总耗时大于预设耗时，则执行步骤S205，确认本次渲染造成网页显示的卡顿。若渲染本帧网页的总耗时不大于预设耗时，则执行步骤S206，确认本次渲染未造成网页显示的卡顿。

可选的，预设耗时为1/60秒。可以理解的预设耗时与显示器的刷新频率有关，在执行步骤S203之前，可先获取显示器的刷新频率，根据获取的刷新频率确定预设耗时为：1/刷新频率，如刷新频率为60Hz，则预设耗时为1/60秒，刷新频率为90，则预设耗时为1/90，以此类推。

S204、确认本次渲染未造成网页显示的卡顿；

若渲染本帧网页的总耗时不大于预设耗时，则确认本次渲染未造成网页显示的卡顿。

可选的，可通过浏览器的内核中添加的监控模块在渲染本帧网页的总耗时不大于预设耗时时，确认本次渲染未造成网页显示的卡顿。

S205、确认本次渲染造成网页显示的卡顿，从预设的各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系中，查找各项目标性能指标的数据中值最大的数据各自对应的数据范围；

S206、根据查找到的数据范围，确认各项目标性能指标的评分值并输出；

若渲染本帧网页的总耗时大于预设耗时，则确认本次渲染造成网页显示的卡顿。可选的，在浏览器的内核中添加分析模块，监控模块在确认本次渲染造成网页显示的卡顿时，将各项目标性能指标的数据发送给分析模块。然后，通过分析模块执行根据各项目标性能指标的数据，得到各项目标性能指标对应的评分值并输出给监控模块。

可选的，可先在终端设备中生成各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。具体的，生成过程可包括以下步骤：

1、采集预设时长内用户访问最多的预设数量个网址；

2、在多台不同机型的终端设备上分别对预设数量个网址各自对应的网页进行渲染，并获取渲染过程中产生的各项目标性能指标的样本数据；

3、按照从小到大的顺序对样本数据进行排序，并取排序后的样本数据整体分布的若干个分位数数据的值及最大值；

4、根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、该若干个分位数数据的值、该最大值以及预设的多个评分值，生成各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。

其中，若干个分位数数据指排序后的样本数据中若干个位于不同百分比位置的数据。

以500个网址，评分值为1-5，阈值数据维度为4，目标性能指标为本帧网页的总耗时以及网页层数为例。每一项目标性能指标都对应5个数据范围，5个数据范围分别与评分值1-5对应。首先通过服务器采集预设时长内用户访问最多的500个网址，然后控制在2台不同机型的手机上分别对这500个网址各自对应的网页进行逐帧渲染，并获取每一帧的渲染过程中产生的各项目标性能指标的样本数据。然后，按照从小到大的顺序分别对每一项性能指标的样本数据进行排序，并取排序后的样本数据整体分布的四分之一分位数、中位数、四分之三分位数的值以及最大值。其中，假设目标性能指标渲染本帧网页的总耗时有1000个样本数据，则四分之一分位数、中位数、四分之三分位数，即，排在第250位、第500位以及第750位的数据。然后，根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、第250位、第500位以及第750位的数据的值、样本数据的最大值(第1000位数据的值)以及预设的多个评分值，生成各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。以目标性能指标渲染本帧网页的总耗时为例，第一对应关系中渲染本帧网页的总耗时的部分可如下表1所示，其他目标性能指标依此类推。

表1 渲染本帧网页的总耗时对应的多个数据范围与多个分值的对应关系表

可选的，上述第一对应关系生成过程也可由服务器完成，服务器将生成的第一对应关系发送给终端设备。服务器定期对第一对应关系进行更新，并将更新后的第一对应关系推送给终端设备。

若上述第一对应关系由服务器完成并负责更新，则进一步地，终端设备在从第一对应关系中，查找各项目标性能指标的数据中值最大的数据各自对应的数据范围之前，还可判断本地存储的各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系中多个数据范围的阈值数据是否过期(例如，是否超过7天)，若判断结果为阈值数据过期，则向服务器请求更新阈值数据，并基于更新后的阈值数据，得到各项目标性能指标对应的评分值。

可选的，在浏览器的内核中添加的分析模块。在通过监控模块确认本次渲染造成网页显示的卡顿时，监控模块将各项目标性能指标的数据发送给分析模块，通过分析模块根据各项目标性能指标的数据，得到各项目标性能指标对应的评分值。具体的，分析模块从预设的各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系中，查找各项目标性能指标的数据中值最大的数据各自对应的数据范围，然后根据查找到的数据范围，确认各项目标性能指标的评分值。分析模块得到各项目标性能指标对应的评分值后，将得到的评分值输出给监控模块。可以理解的，若一项目标性能指标的数据只有一个值，则该值即为该目标性能指标的数据中值最大的数据。如：渲染本帧网页的总耗时。

S207、查找不同的卡顿原因与指定的多项目标性能指标之间的第二对应关系，得到评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

可以理解的，评分值越小，说明对应的目标性能指标对应的卡顿原因越可能是本次渲染导致卡顿的主因。因此，只查找评分值小于预设分值(例如，小于3分)的目标性能指标对应的卡顿原因，可以帮助用户更快地定位网页中存在的问题。其中，卡顿原因举例来说，对于网页层数这一性能指标来说，若对应的评分值小于3，则对应的当前帧的卡顿原因可能是层数太多，因此需要计算的相对位置太多，内存消耗太大，从而导致卡顿。

在一应用例中，上述第二对应关系中的目标性能指标，即步骤202中要获取的数据对应的目标性能指标。因此，从第二对应关系中，必然可以得到对应的卡顿原因。也就是说，在生成第二对应关系时，必须了解所有目标性能指标对应的卡顿原因。基于卡顿原因，确定目标性能指标并生成二者之间的对应关系。

在另一应用例中，步骤202中要获取的数据对应的目标性能指标不限于上述第二关系中的目标性能指标。也就是说，在生成第二关系时，不需要了解所有目标性能指标对应的卡顿原因。因此，存在无法找到对应的卡顿原因的。此时，在预设的不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系中，对该评分值小于预设分值的目标性能指标对应的卡顿原因进行查找。若查找到对应的卡顿原因，则输出对应的卡顿原因。若未查找到对应的卡顿原因，则将输出卡顿原因为未知，以便技术人员根据“未知”的卡顿原因去查找对应的卡顿原因，从而发现网页中隐蔽的缺陷。

进一步的，获取用户输入的卡顿原因为未知的目标性能指标的卡顿原因，将该用户输入的卡顿原因更新在该第二对应关系中，并与该卡顿原因为未知的目标性能指标相关联，从而实现对第二对应关系的及时更新。

可以理解的，在第二对应关系中设置目标性能指标的用户与更新第二对应关系中的卡顿原因的用户可以不是同一人。例如，可根据浏览器用户的输入操作，在第二对应关系中增加该浏览器用户输入的新的目标性能指标。该新的目标性能指标在第二对应关系中没有对应的卡顿原因。若在网页性能分析的过程中，该新的目标性能指标的评分值低于预设分值，则输出对应的卡顿原因为“未知”。专业技术人员在见到分析结果后，通过“未知”了解到需要对该新的目标性能指标对应的卡顿原因进行分析。于是在专业技术人员得到分析结果后，可根据专业技术人员的输入操作，将其输入的分析结果更新在第二对应关系中，并与该输入操作指向的新的目标性能指标相关联。

可选的，本步骤可由上述分析模块实现。

进一步的，若终端设备为移动终端，则在分析模块获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出给监控模块之后，还可通过监控模块生成分析报告，该分析报告包含评分值小于预设分值的目标性能指标的评分值及目标性能指标对应的卡顿原因。然后，通过浏览器的内核调试模块将分析报告输出到计算机终端的调试工具中进行显示。需要说明的是，计算机终端的调试工具需要与移动终端的浏览器的内核相兼容。例如：均为Chrome内核。

在一实际应用例中，在智能手机的Chrome浏览器的内核中添加监控模块和分析模块。当需要输出分析报告时，开启浏览器调试工具中的DevTools工具切换至Console面板，通过该面板显示监控模块生成的分析报告中的内容信息。

在另一实际应用例中，如图3所示，监控模块将生成的分析报告发送给计算机终端的调试工具，用户可通过在计算机终端中预装的Chrome内核的浏览器的地址栏输入Chrome://inspect，打开DevTools切换至Console面板，通过该面板显示监控模块生成的分析报告中的内容信息。

需要说明的是，上述步骤S201至步骤S207是循环往复的过程，即，在预设的分析周期内，在渲染每一帧网页时，均需要对渲染的一帧网页的性能进行分析。可以在渲染一帧网页后，进行分析操作，待输出分析结果后再进行下一帧网页的渲染操作。较佳的，渲染过程和分析过程分别进行，即，按照预设的时间间隔进行渲染操作，渲染过程不受分析过程的影响。

为进一步说明本实施例提供的网页性能分析方法，结合图4，在一实际应用例中，可通过以下步骤1-7实现网页性能分析。

1、浏览器内核的调度器通知渲染模块开始渲染一帧。监控模块监控开始消息并记录开始时间。

2、渲染模块进行渲染工作，同时将需要监控的各项目标性能指标的数据(即待分析性能数据)发送给监控模块记录。

3、渲染模块完成渲染一帧，通知监控模块结束消息并记录结束时间。

4、监控模块判断此帧是否造成卡顿，即渲染一帧的总耗时是否大于1/60秒。如果造成卡顿，则将已记录的性能数据发送给分析模块进行评估。

5、分析模块向服务器请求评估标准，如各个数据范围与多个评分值之间的对应关系，然后基于请求的评估标准，对各项目标性能指标分别给出评分(如，1-5分，5分最好)。

6、分析模块将性能评分以及评分低于3分的性能指标对应的卡顿原因输出给监控模块。

7、监控模块将评分以及卡顿原因形成报告，通过浏览器内核的调试模块输出到PC端(计算机端)的调试工具中显示。

本发明实施例提供的网页性能分析方法，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。

图5为本发明一实施例提供的终端设备的结构示意图。本实施例提供的终端设备是上述图1所示实施例中的网页性能分析方法的执行主体。如图5所示，本实施例提供的终端设备主要包括：

渲染模块401，用于渲染一帧网页；

监控模块402，用于获取本次渲染过程中产生的各项目标性能指标的数据，以及判断本次渲染是否造成网页显示的卡顿；

分析模块403，用于若造成网页显示的卡顿，则根据该各项目标性能指标的数据，得到该各项目标性能指标对应的评分值并输出，以及获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

本实施例中各功能模块实现各自功能的具体过程，请参见上述图1所示实施例中描述的具体内容，此处不再赘述。

本发明实施例中，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据该各项目标性能指标的数据，得到该各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。

图6为本发明另一实施例提供的终端设备的结构示意图。本实施例提供的终端设备是上述图1和图2所示实施例中的网页性能分析方法的执行主体。如图6所示，与图5所示终端设备不同的是，本实施例提供的终端设备：

进一步的，该终端设备中预设有该各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系；

分析模块403，具体用于若造成网页显示的卡顿，则从该第一对应关系中，查找该各项目标性能指标的数据中值最大的数据各自对应的数据范围，并根据查找到的数据范围，确认该各项目标性能指标的评分值并输出。

进一步的，该终端设备还包括：

采集模块501，用于采集预设时长内用户访问最多的预设数量个网址；

样本数据获取模块502，用于在多台不同机型的终端设备上分别对该预设数量个网址各自对应的网页进行渲染，并获取渲染过程中产生的该各项目标性能指标的样本数据；

排序模块503，用于按照从小到大的顺序对该样本数据进行排序，并取排序后的该样本数据整体分布的若干个分位数数据的值及最大值；

生成模块504，用于根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、该若干个分位数数据的值、该最大值以及预设的多个评分值，生成该各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。

可选的，若上述第一对应关系由服务器生成，则生成模块504从服务器获取上述第一对应关系并保存在终端设备本地。

进一步的，该终端设备还包括：

更新模块505，用于判断该第一对应关系中多个该数据范围的阈值数据是否过期，若该阈值数据过期，则向服务器请求更新该阈值数据；

分析模块403，还用于基于更新后的该阈值数据，从该第一对应关系中，查找该各项目标性能指标的数据各自对应的数据范围。

进一步的，生成模块504，还用于在该终端设备中指定多项该目标性能指标，以及生成不同的卡顿原因与指定的多项该目标性能指标之间的第二对应关系；

监控模块402，具体用于获取本次渲染过程中产生的该第二对应关系中的各项目标性能指标的数据；

分析模块403，具体用于查找该第二对应关系，得到该评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

进一步的，分析模块403，还具体用于在该第二对应关系中，对该评分值小于预设分值的目标性能指标对应的卡顿原因进行查找，若查找到对应的卡顿原因，则输出对应的卡顿原因，以及若未查找到对应的卡顿原因，则将输出卡顿原因为未知；

更新模块505，还用于获取用户输入的卡顿原因为未知的目标性能指标的卡顿原因，将该用户输入的卡顿原因更新在该第二对应关系中，并与该卡顿原因为未知的目标性能指标相关联。

进一步的，监控模块402和分析模块403配置在浏览器的内核中；

监控模块402，还用于在本次渲染造成网页显示的卡顿时，将该各项目标性能指标的数据发送给分析模块403；

分析模块403，还用于将得到的评分值及获取的卡顿原因输出给监控模块402；

监控模块402，还用于生成分析报告，通过该浏览器的内核调试模块将该分析报告输出到计算机终端的调试工具中进行显示，该分析报告包含该评分值小于预设分值的目标性能指标的评分值及该目标性能指标对应的卡顿原因。

进一步的，该目标性能指标包括：渲染本帧网页的总耗时，以及，输入事件处理时间、网页渲染时间、文档对象模型元素排版时间、网页层数和网页定时器数量中的任意一个或多个的组合；

监控模块402，还用于判断该总耗时是否大于预设耗时，若该总耗时大于该预设耗时，则确认本次渲染造成网页显示的卡顿。

本实施例中各功能模块实现各自功能的具体过程，请参见上述图1至图5所示实施例中描述的具体内容，此处不再赘述。

本发明实施例中，通过在渲染一帧网页的过程中，获取本次渲染过程中产生的各项目标性能指标的数据，并在本次渲染造成网页显示的卡顿时，根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值，然后获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，实现了基于渲染过程的网页性能分析，方便用户直观地知道网页渲染卡顿的原因，并可动态监控网页是否存在卡顿问题。

请参阅图7，图7为本发明一实施例提供的终端设备的硬件结构图。

本实施例中所描述的终端设备，包括：

存储器51、处理器52及存储在存储器51上并可在处理器52上运行的计算机程序，处理器52执行该计算机程序时，实现前述图1至图4所示实施例中描述的网页性能分析方法。

进一步地，该终端设备还包括：

至少一个输入设备53以及至少一个输出设备54。

上述存储器51、处理器52、输入设备53和输出设备54通过总线55连接。

其中，输入设备53具体可为摄像头、触控面板、物理按键或者鼠标等等。输出设备54具体可为显示屏。

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

进一步地，本发明实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是设置于上述各实施例中的终端设备中，该计算机可读存储介质可以是前述图7所示实施例中的存储器。该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现前述图1至图4所示实施例中描述的网页性能分析方法。进一步地，该计算机可存储介质还可以是U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者装置中还存在另外的相同要素。

本领域技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (14)

1.一种网页性能分析方法，应用于终端设备，其特征在于，所述方法包括：

渲染一帧网页，获取本次渲染过程中产生的各项目标性能指标的数据，所述目标性能指标包括渲染本帧网页的总耗时，以及，输入事件处理时间、网页渲染时间、文档对象模型元素排版时间、网页层数和网页定时器数量中的任意一个或多个的组合；

判断本次渲染是否造成网页显示的卡顿；

若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出；

获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出；

其中，所述终端设备中预设有所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系；

则，所述若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，包括：

若造成网页显示的卡顿，则从所述第一对应关系中，查找所述各项目标性能指标的数据中值最大的数据各自对应的数据范围；

根据查找到的数据范围，确认所述各项目标性能指标的评分值并输出。

2.如权利要求1所述的方法，其特征在于，所述方法还包括：

采集预设时长内用户访问最多的预设数量个网址；

在多台不同机型的终端设备上分别对所述预设数量个网址各自对应的网页进行渲染，并获取渲染过程中产生的所述各项目标性能指标的样本数据；

按照从小到大的顺序对所述样本数据进行排序，并取排序后的所述样本数据整体分布的若干个分位数数据的值及最大值；

根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、所述若干个分位数数据的值、所述最大值以及预设的多个评分值，生成所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系。

3.如权利要求1所述的方法，其特征在于，所述从所述第一对应关系中，查找所述各项目标性能指标的数据中值最大的数据各自对应的数据范围之前，包括：

判断所述第一对应关系中多个所述数据范围的阈值数据是否过期；

若所述阈值数据过期，则向服务器请求更新所述阈值数据；

基于更新后的所述阈值数据，执行所述从所述第一对应关系中，查找所述各项目标性能指标的数据各自对应的数据范围的步骤。

4.如权利要求1所述的方法，其特征在于，所述方法还包括：

在所述终端设备中指定多项所述目标性能指标；

生成不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系；

则，所述获取本次渲染过程中产生的各项目标性能指标的数据，包括：

获取本次渲染过程中产生的所述第二对应关系中的各项目标性能指标的数据；

所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，包括：

查找所述第二对应关系，得到所述评分值小于预设分值的目标性能指标对应的卡顿原因并输出。

5.如权利要求1所述的方法，其特征在于，所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出，包括：

在预设的不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系中，对所述评分值小于预设分值的目标性能指标对应的卡顿原因进行查找；

若查找到对应的卡顿原因，则输出对应的卡顿原因；

若未查找到对应的卡顿原因，则将输出卡顿原因为未知；

所述方法还包括：

获取用户输入的卡顿原因为未知的目标性能指标的卡顿原因；

将所述用户输入的卡顿原因更新在所述第二对应关系中，并与所述卡顿原因为未知的目标性能指标相关联。

6.如权利要求1至5中的任一项所述的方法，其特征在于，在浏览器的内核中添加监控模块和分析模块；

通过所述监控模块执行所述获取本次渲染过程中产生的各项目标性能指标的数据，以及所述判断本次渲染是否造成网页显示的卡顿的步骤；

通过所述分析模块执行所述根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，以及所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出的步骤；

所述监控模块在本次渲染造成网页显示的卡顿时，将所述各项目标性能指标的数据发送给所述分析模块；

所述分析模块将得到的评分值及获取的卡顿原因输出给所述监控模块。

7.如权利要求6所述的方法，其特征在于，所述终端设备为移动终端，所述获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出之后，还包括：

通过所述监控模块生成分析报告，所述分析报告包含所述评分值小于预设分值的目标性能指标的评分值及所述目标性能指标对应的卡顿原因；

通过所述浏览器的内核调试模块将所述分析报告输出到计算机终端的调试工具中进行显示。

8.如权利要求1至5中的任一项所述的方法，其特征在于，

所述判断本次渲染是否造成网页显示的卡顿，包括：

判断所述总耗时是否大于预设耗时；

若所述总耗时大于所述预设耗时，则确认本次渲染造成网页显示的卡顿。

9.一种终端设备，其特征在于，包括：

渲染模块，用于渲染一帧网页；

监控模块，用于获取本次渲染过程中产生的各项目标性能指标的数据，以及判断本次渲染是否造成网页显示的卡顿，其中，所述目标性能指标包括渲染本帧网页的总耗时，以及，输入事件处理时间、网页渲染时间、文档对象模型元素排版时间、网页层数和网页定时器数量中的任意一个或多个的组合，所述终端设备中预设有所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系；

分析模块，用于若造成网页显示的卡顿，则根据所述各项目标性能指标的数据，得到所述各项目标性能指标对应的评分值并输出，以及获取评分值小于预设分值的目标性能指标对应的卡顿原因并输出；以及用于

若造成网页显示的卡顿，则从所述第一对应关系中，查找所述各项目标性能指标的数据中值最大的数据各自对应的数据范围，并根据查找到的数据范围，确认所述各项目标性能指标的评分值并输出。

10.如权利要求9所述的终端设备，其特征在于，

所述终端设备还包括：

采集模块，用于采集预设时长内用户访问最多的预设数量个网址；

样本数据获取模块，用于在多台不同机型的终端设备上分别对所述预设数量个网址各自对应的网页进行渲染，并获取渲染过程中产生的所述各项目标性能指标的样本数据；

排序模块，用于按照从小到大的顺序对所述样本数据进行排序，并取排序后的所述样本数据整体分布的若干个分位数数据的值及最大值；

生成模块，用于根据预设的最小评分值对应的数据范围的最小阈值、预设的最大评分值对应的数据范围的最大阈值、所述若干个分位数数据的值、所述最大值以及预设的多个评分值，生成所述各项目标性能指标的多个数据范围及多个评分值之间的第一对应关系；

更新模块，用于判断所述第一对应关系中多个所述数据范围的阈值数据是否过期，若所述阈值数据过期，则向服务器请求更新所述阈值数据；

所述分析模块，还用于基于更新后的所述阈值数据，从所述第一对应关系中，查找所述各项目标性能指标的数据各自对应的数据范围。

11.如权利要求10所述的终端设备，其特征在于，

所述生成模块，还用于在所述终端设备中指定多项所述目标性能指标，以及生成不同的卡顿原因与指定的多项所述目标性能指标之间的第二对应关系；

所述监控模块，具体用于获取本次渲染过程中产生的所述第二对应关系中的各项目标性能指标的数据；

所述分析模块，具体用于查找所述第二对应关系，得到所述评分值小于预设分值的目标性能指标对应的卡顿原因并输出；

所述分析模块，还具体用于在所述第二对应关系中，对所述评分值小于预设分值的目标性能指标对应的卡顿原因进行查找，若查找到对应的卡顿原因，则输出对应的卡顿原因，以及若未查找到对应的卡顿原因，则将输出卡顿原因为未知；

所述更新模块，还用于获取用户输入的卡顿原因为未知的目标性能指标的卡顿原因，将所述用户输入的卡顿原因更新在所述第二对应关系中，并与所述卡顿原因为未知的目标性能指标相关联。

12.如权利要求9至11中的任一项所述的终端设备，其特征在于，所述监控模块和所述分析模块配置在浏览器的内核中；

所述监控模块，还用于在本次渲染造成网页显示的卡顿时，将所述各项目标性能指标的数据发送给所述分析模块；

所述分析模块，还用于将得到的评分值及获取的卡顿原因输出给所述监控模块；

所述监控模块，还用于生成分析报告，通过所述浏览器的内核调试模块将所述分析报告输出到计算机终端的调试工具中进行显示，所述分析报告包含所述评分值小于预设分值的目标性能指标的评分值及所述目标性能指标对应的卡顿原因；

所述监控模块，还用于判断所述总耗时是否大于预设耗时，若所述总耗时大于所述预设耗时，则确认本次渲染造成网页显示的卡顿。

13.一种终端设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，实现如权利要求1至8中的任一项所述的网页性能分析方法。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现如权利要求1至8中的任一项所述的网页性能分析方法。

Images