页面组件的运行监测方法、装置、设备和存储介质与流程

本申请涉及计算机技术领域，尤其涉及页面组件监测和云计算技术领域，具体涉及一种页面组件的运行监测方法、装置、设备和存储介质。

背景技术：

san是一个mvvm(model-view-viewmodel)组件框架。它体积小巧(11k)，兼容性好(ie6)，性能卓越，是一个可靠、可依赖的实现响应式用户界面的解决方案。通常，san中定义的数据会被封装，使得当数据发生有效变更时通知san组件(页面组件)，页面组件依赖模板编译阶段生成的节点关系树，确定需要变更的最小视图，进而完成视图的异步更新，保证了视图更新的高效性。然而，页面组件运行过程中会出现异常，因此亟需一种监测页面组件运行过程的方案。

技术实现要素：

本申请提供了一种页面组件的运行监测方法、装置、设备和存储介质，提供了一种对页面组件的运行监测方案，从而页面组件运行过程中发生异常时，能够还原发生异常时的场景及用户操作行为，为定位问题、解决问题提供了条件，提高了异常处理效率。

第一方面，本申请实施例提供了一种页面组件的运行监测方法，包括：

对页面组件的多个生命周期函数进行调用监测；

每当监测到调用，则对调用的生命周期函数，确定调用时刻；

根据所述页面组件的所述多个生命周期函数的调用时刻，监测所述页面组件的运行。

第二方面，本申请实施例提供了一种页面组件的运行监测装置，包括：

第一监测模块，用于对页面组件的多个生命周期函数进行调用监测；

确定模块，用于每当监测到调用，则对调用的生命周期函数，确定调用时刻；

第二监测模块，用于根据所述页面组件的所述多个生命周期函数的调用时刻，监测所述页面组件的运行。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如本申请实施例中任一项所述的页面组件的运行监测方法。

第四方面，本申请实施例提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如本申请实施例中任一项所述的页面组件的运行监测方法。

本申请实施例能够提高异常处理效率。

应当理解，本部分所描述的内容并非旨在标识本申请的实施例的关键或重要特征，也不用于限制本申请的范围。本申请的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是本申请实施例提供的一种页面组件的运行监测方法的流程示意图；

图2是根据本申请实施例提供的另一种页面组件的运行监测方法的流程示意图；

图3是根据本申请实施例提供的一种生成运行监测数据的流程示意图；

图4是根据本申请实施例提供的一种页面组件的整个运行过程的示意图；

图5是根据本申请实施例提供的一种页面组件的运行监测装置的结构示意图；

图6是用来实现本申请实施例的页面组件的运行监测方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

下面具体参照附图描述本申请实施例提供的一种页面组件的运行监测方法、装置、设备和存储介质，首先参照附图1描述本申请实施例提供的一种页面组件的运行监测方法。图1是本申请实施例提供的一种页面组件的运行监测方法的流程示意图，参见图1，该方法包括以下步骤：

s101，对页面组件的多个生命周期函数进行调用监测。

其中，本实施例提供的页面组件的运行监测方法，可以由本申请实施例提供的页面组件的运行监测装置执行，该装置可以配置于电子设备中，以对页面组件的运行过程进行监测。

在本发明实施例中，页面组件是指san框架中的san组件。san组件的多个生命周期函数可包括：compiled函数、inited函数、created函数、attached函数、detached函数、disposed函数和updated函数，总共7个生命周期函数。其中，compiled表示组件视图模板编译完成；inited表示组件实例初始化完成；created表示组件元素创建完成；attached表示组件已被附加到页面中；updated表示组件数据更新；detached表示组件从页面中移除；disposed表示组件卸载完成。例如，当组件编译完成后会调用compiled函数；组件挂载到页面中会调用attached函数；组件从页面卸载会调用disposed函数。

可选的，可通过预设的生命周期函数监测器，对页面组件的多个生命周期函数进行调用监测；或者，监测页面组件的多个生命周期函数是否被使用，对页面组件的多个生命周期函数进行调用监测等，此处对其不作具体限定。

s102，每当监测到调用，则对调用的生命周期函数，确定调用时刻。

可选的，页面组件中多个生命周期函数可随时被调用，且被调用对应存在一时刻，因此当检测到任意生命周期函数被调用时，可确定调用的生命周期函数的调用时刻。

作为一种可选的实现方式，可确定生命周期函数被调用时的调用时刻，可通过使用浏览器提供的应用程序接口(performanceapi)来记录调用生命周期函数调用时刻。

例如，当监测到生命周期函数compiled函数和attached函数调用时，可基于浏览器提供的performanceapi，分别记录调用生命周期函数调用时刻。

进一步的，为了方便确定生命周期函数的调用时刻，本申请实施例基于浏览器提供的应用接口记录调用生命周期函数的调用时刻时，还可使用标记函数标记生命周期函数的调用时刻。在本实施例中，标记函数可为performance.mark()。

也就是说，本实施例中对调用的生命周期函数，确定调用时刻，包括：调用浏览器提供的应用程序接口，采用所述应用程序接口内的标记函数标记对所述生命周期函数的调用时刻，以基于标记函数能够快速且准确的确定生命周期的调用时刻。

s103，根据所述页面组件的所述多个生命周期函数的调用时刻，监测所述页面组件的运行。

可选的，确定出页面组件中多个生命周期函数的调用时刻之后，本实施例可通过使用javascript语言的新标准(es6)提供的装饰器(decorator)重写页面组件生命周期函数，在每个生命周期函数调用时都会记录生命周期函数调用时刻，进而根据生命周期的调用时刻，分析页面组件的运行性能，进而确定页面组件运行过程中是否出现异常。

本申请实施例的技术方案，通过对页面组件的多个生命周期函数进行调用监测，每当监测到调用，则对调用的生命周期函数，确定调用时刻，然后根据页面组件的多个生命周期函数的调用时刻，监测页面组件的运行。从而基于页面组件的运行情况，确定页面组件运行过程中是否发生异常，从而在页面组件运行过程中发生异常时，能够还原发生异常时的场景及用户操作行为，为定位问题、解决问题提供了条件，提高了异常处理效率。

图2是根据本申请实施例提供的另一种页面组件的运行监测方法的流程示意图。本实施例是在上述实施例的基础上提出的一种可选方案。如图2所示，该方法包括以下步骤：

s201，对页面组件的多个生命周期函数进行调用监测。

s202，每当监测到调用，则对调用的生命周期函数，确定调用时刻。

s203，当监测到对所述卸载函数的调用，则根据已监测到的各所述生命周期函数的调用时刻，生成运行监测数据。

其中，多个生命周期函数中包括用于对所述页面组件进行卸载的卸载函数。例如，detached函数。

通常，卸载函数被调用时，一般是指页面组件所有的性能数据已经全部统计完毕，此时可生成页面组件的运行监测数据。为此当监测到页面组件的多个生命周期函数中的卸载函数(detached函数)的调用操作时，本实施例可将之前监测到的所有生命周期函数的调用时刻，生成该页面组件的运行监测数据，从而为后续确定页面组件运行性能提供条件。

作为一种可选的实现方式，本申请可通过图3，生成运行监测数据。

如图3所示，该方法包括以下步骤：

s301，根据已监测到的各所述生命周期函数的调用时刻，确定设定两生命周期函数之间的调用时刻间隔。

其中，设定两生命周期函数可以是页面组件的多个生命周期中任意两个生命周期函数。在本实施例中，设定两生命周期函数为多组，其中一组设定两生命周期函数分别用于将所述页面组件加载到页面中，以及对所述页面组件的视图模板编译。

为了便于理解本方案，下面基于图4对页面组件的整个运行过程进行说明，具体的当触发新建页面组件请求(new)时，首先确定当前有没有组件模板的代码(has'el'option)，如果有，则parsfromel分析事件视图模板的代码，即对组件模板代表进行编译，得到编译结果(initdata)；如果没有，则直接基于编辑(compile)，以完成组件示例初始化。之后，通过callattach触发在页面中加载页面组件，基于create组件元素创建函数完成组件元素创建，再基于attach将组件附加到页面中函数，将创建的组件元素附件到页面中。然后，通过calldetach触发从页面移除页面组件请求，以基于detach将组件从页面中移除函数，将页面组件从页面中移除。最后，通过calldispose触发从页面卸载页面组件请求，以基于detach将页面组件从页面中移除，并基于dispose将移除的页面组件从页面中卸载。

也就是说，基于图4可知，本实施例中，设定两生命周期函数可包括以下几种情况：情况一，compiled函数和inited函数为设定两生命周期函数；情况二，inited函数和created函数为设定两生命周期函数；情况三，created函数和attached函数为设定两生命周期函数；情况四，attached函数和detached函数为设定两生命周期函数；情况五，detached函数和disposed函数为设定两生命周期函数。

可选的，可通过监测器监测页面组件中的卸载函数是否被调用，如果监测到卸载函数的调用，则根据已监测到的各个生命周期函数的调用时刻，确定设定两生命周期函数之间的调用时刻。具体实现时，可通过调用浏览器提供的应用程序接口，采用应该程序接口内的统计函数对设定两生命周期函数的调用时刻进行统计，以得到设定两生命周期函数之间的调用时刻间隔。从而实现自动化确定设定两生面周期函数之间的调用时间间隔。

其中，应用程序接口可为performanceapi。应用程序接口内的统计函数可为：performance.measure()。

例如，设定两生命周期函数分别为attached函数和compiled函数，则采用应该程序接口内的统计函数，根据attached函数和compiled函数各自的调用时刻，可确定页面组件挂在到页面中的调用时刻间隔。

又例如，设定两生命周期函数分别为compiled函数和inited函数，则采用应用程序接口内的统计函数，根据compiled函数和inited函数各自的调用时刻，可确定页面组件视图模板编译到页面组件元素创建完成的调用时刻间隔。

s302，将所述设定两生命周期函数之间的调用时刻间隔，作为所述运行监测数据。

可选的，确定出页面组件中设定两生命周期函数之间的调用时刻间隔后，本实施例可将设定两生命周期函数之间的调用时刻间隔，作为页面组件的运行监测数据。

s204，向服务器端发送所述运行监测数据。

可选的，为了统计页面组件的运行性能，本实施例根据已监测到的各生命周期函数的调用时刻，生成运行监测数据之后，可将页面组件的运行监测数据发送给服务器端，以使服务器端基于页面组件的运行监测数据，确定页面组件的运行性能。

本申请实施例的技术方案，通过对页面组件的多个生命周期函数进行调用监测，每当监测到调用，则对调用的生命周期函数，确定调用时刻，当监测到卸载函数的调用，则根据已监测到的各生命周期函数的调用时刻，生成运行监测数据，并向服务器端发送运行监测数据。由此，使得服务器端基于运行监测数据，分析页面组件的运行性能，并当分析出页面组件运行过程中发生异常时，能够还原发生异常时的场景及用户操作行为，为定位问题、解决问题提供了条件，提高了异常处理效率。

图5是根据本申请实施例提供的一种页面组件的运行监测装置的结构示意图。参见图5，本申请实施例公开了页面组件的运行监测装置500，该装置500可以配置于电子设备中，该装置500包括：第一监测模块510、确定模块520和第二监测模块530；

其中，第一监测模块510，用于对页面组件的多个生命周期函数进行调用监测。

确定模块520，用于每当监测到调用，则对调用的生命周期函数，确定调用时刻。

第二监测模块530，用于根据所述页面组件的所述多个生命周期函数的调用时刻，监测所述页面组件的运行。

可选的，所述多个生命周期函数中包括用于对所述页面组件进行卸载的卸载函数；所述第一监测模块510，包括：

监测数据生成单元，用于当监测到对所述卸载函数的调用，则根据已监测到的各所述生命周期函数的调用时刻，生成运行监测数据；

监测数据发送模块，用于向服务器端发送所述运行监测数据。

可选的，所述监测数据生成单元，具体用于：

根据已监测到的各所述生命周期函数的调用时刻，确定设定两生命周期函数之间的调用时刻间隔；

将所述设定两生命周期函数之间的调用时刻间隔，作为所述运行监测数据。

可选的，所述监测数据生成单元，进一步用于：

调用浏览器提供的应用程序接口，采用所述应用程序接口内的统计函数对所述设定两生命周期函数的调用时刻进行统计，以得到所述设定两生命周期函数之间的调用时刻间隔。

可选的，其中，所述设定两生命周期函数为多组，其中一组所述设定两生命周期函数分别用于将所述页面组件加载到页面中，以及对所述页面组件的视图模板编译。

可选的，其中，所述确定模块520，具体用于：

调用浏览器提供的应用程序接口，采用所述应用程序接口内的标记函数标记对所述生命周期函数的调用时刻。

需要说明的是，前述对页面组件的运行监测方法实施例的解释说明也适用于该实施例的页面组件的运行监测装置，其实现原理类似，此处不再赘述。

本申请实施例的技术方案，通过对页面组件的多个生命周期函数进行调用监测，每当监测到调用，则对调用的生命周期函数，确定调用时刻，然后根据页面组件的多个生命周期函数的调用时刻，监测页面组件的运行。从而基于页面组件的运行情况，确定页面组件运行过程中是否发生异常，从而在页面组件运行过程中发生异常时，能够还原发生异常时的场景及用户操作行为，为定位问题、解决问题提供了条件，提高了异常处理效率。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图6所示，是根据本申请实施例的页面组件的运行监测方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图6所示，该电子设备包括：一个或多个处理器601、存储器602，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示gui的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图6中以一个处理器601为例。

存储器602即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的页面组件的运行监测方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面组件的运行监测方法。

存储器602作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面组件的运行监测方法对应的程序指令/模块(例如，第一监测模块510、确定模块520和第二监测模块530)。处理器601通过运行存储在存储器602中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的页面组件的运行监测方法。

存储器602可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据页面组件的运行监测方法的电子设备的使用所创建的数据等。此外，存储器602可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器602可选包括相对于处理器601远程设置的存储器，这些远程存储器可以通过网络连接至音视频同步播放的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

页面组件的运行监测方法的电子设备还可以包括：输入装置603和输出装置604。处理器601、存储器602、输入装置603和输出装置604可以通过总线或者其他方式连接，图6中以通过总线连接为例。

输入装置603可接收输入的数字或字符信息，以及产生与网页音频直播的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置604可以包括显示设备、辅助照明装置(例如，led)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(lcd)、发光二极管(led)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用asic(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(pld))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)、互联网和区块链网络。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

本申请实施例的技术方案，通过对页面组件的多个生命周期函数进行调用监测，每当监测到调用，则对调用的生命周期函数，确定调用时刻，然后根据页面组件的多个生命周期函数的调用时刻，监测页面组件的运行。从而基于页面组件的运行情况，确定页面组件运行过程中是否发生异常，从而在页面组件运行过程中发生异常时，能够还原发生异常时的场景及用户操作行为，为定位问题、解决问题提供了条件，提高了异常处理效率。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。