Monitoring method and device for H5 page loading, electronic equipment and storage medium

Abstract

The embodiment of the invention provides an H5 page loading monitoring method and device, electronic equipment and a storage medium, and the H5 page loading monitoring method comprises the steps that a headless browser is started; in the process of accessing the target H5 page by using the headless browser, capturing loading data for loading resources in the target H5 page; and monitoring the loading process of the target H5 page based on the loading data. According to the H5 page loading monitoring method and device, the electronic equipment and the storage medium provided by the embodiment of the invention, a user is simulated to access the page through the headless browser, so that in the process of accessing the target H5 page by utilizing the headless browser, the loading data for loading the resources in the target H5 page are captured, and the loading efficiency of the resources in the target H5 page is improved. And the loading process of the target H5 page is monitored based on the loading data, so that the loading process of the H5 page can be monitored before user experience, and the loading process of the H5 page can be monitored in time.

Description

Technical Field

[0001] The present invention relates to the field of Internet application technology, and in particular to a method, device, electronic device and storage medium for monitoring H5 page loading. Background Art

[0002] In modern web development, the fifth generation HyperText Markup Language 5 (HTML5) page, also known as H5 page, is widely used in various fields such as e-commerce, social media, online education, etc. In actual application, page loading is the main process of users using H5 pages, so it is necessary to monitor H5 page loading. Summary of the invention

[0003] The purpose of the embodiments of the present invention is to provide a method, device, electronic device and storage medium for monitoring H5 page loading, so as to monitor the loading process of H5 page before the user experiences it, and monitor the loading process of H5 page in a timely manner. The specific technical solution is as follows:

[0004] In a first aspect, a method for monitoring H5 page loading is provided, comprising:

[0005] Start a headless browser;

[0006] In the process of accessing the target H5 page by using the headless browser, capturing the loading data of the resources in the target H5 page;

[0007] The loading process of the target H5 page is monitored based on the loading data.

[0008] Optionally, starting the headless browser includes:

[0009] Periodically call Puppeteer to start a headless browser.

[0010] Optionally, in the process of accessing the target H5 page by using the headless browser, capturing loading data of resources in the target H5 page includes:

[0011] Extracting a successfully recorded tracking file, wherein the tracking file is obtained by starting the recording of the tracking event of loading the target H5 page at the beginning of page loading, and terminating the recording of the tracking event of loading the target H5 page after the page loading is completed;

[0012] Filtering network request events from the trace file;

[0013] Preset data is extracted from the network request event, wherein the preset data includes data that affects loading speed and resource integrity.

[0014] Optionally, the network request event includes: a source sending request ResourceSendRequest event, a source receiving response ResourceReceiveResponse event and a source ending ResourceFinish event.

[0015] Optionally, the preset data includes at least one of the following data: resource volume, resource quantity, domain name distribution, and access format.

[0016] Optionally, monitoring the loading process of the target H5 page based on the loading data includes:

[0017] comparing the loading data to an abnormal condition;

[0018] If the loaded data meets the abnormal condition, an alarm message is fed back, where the alarm message is used to indicate that an abnormality has occurred in the loading of the target H5 page.

[0019] Optionally, the alarm information also includes abnormal data, so that the resources in the target H5 page are adjusted based on the abnormal data.

[0020] In a second aspect, a monitoring device for H5 page loading is provided, comprising:

[0021] Startup module, used to start the headless browser;

[0022] A capture module, used for capturing loading data of resources in the target H5 page when accessing the target H5 page by using the headless browser;

[0023] A monitoring module is used to monitor the loading process of the target H5 page based on the loading data.

[0024] In a third aspect, an electronic device is provided, comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus;

[0025] Memory, used to store computer programs;

[0026] The processor is used to implement any method step described in the first aspect when executing a program stored in the memory.

[0027] In another aspect of the implementation of the present invention, a computer-readable storage medium is provided, in which a computer program is stored. When the computer program is executed by a processor, any of the above-mentioned methods for monitoring the loading of an H5 page is implemented.

[0028] In another aspect of the implementation of the present invention, a computer program product comprising instructions is also provided, which, when executed on a computer, enables the computer to execute any of the above-mentioned methods for monitoring H5 page loading.

[0029] The H5 page loading monitoring method, device, electronic device and storage medium provided in the embodiments of the present invention simulate user access to the page through a headless browser, so as to capture the loading data of the resources in the target H5 page when accessing the target H5 page using the headless browser, and monitor the loading process of the target H5 page based on the loading data, so that the loading process of the H5 page can be monitored before the user experiences it, thereby realizing timely monitoring of the loading process of the H5 page. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art are briefly introduced below.

[0031] Figure 1 Flow chart of a method for monitoring H5 page loading in an embodiment of the present invention;

[0032] Figure 2 A schematic diagram of the deployment of a simulation operation in an embodiment of the present invention;

[0033] Figure 3 This is a flow chart of monitoring page loading based on loading data in an embodiment of the present invention;

[0034] Figure 4 This is a flow chart of grabbing and loading data in an embodiment of the present invention;

[0035] Figure 5 A schematic diagram of a specific embodiment of the present invention;

[0036] Figure 6 is a schematic diagram of another specific embodiment of the present invention;

[0037] Figure 7 It is a structural schematic diagram of a monitoring device for H5 page loading in an embodiment of the present invention;

[0038] Figure 8 It is a structural schematic diagram of a grabbing module in an embodiment of the present invention;

[0039] Fig. 9 This is a schematic diagram of the structure of a monitoring module in an embodiment of the present invention;

[0040] Fig.10 Schematic diagram of the structure of an electronic device in an embodiment of the present invention. DETAILED DESCRIPTION

[0041] The technical solutions in the embodiments of the present invention will be described below in conjunction with the accompanying drawings in the embodiments of the present invention.

[0042] The page loading monitoring method provided by the embodiment of the present invention can be applied to a server, for example, a web page server, which can also be understood as a server for managing web pages.

[0043] Reference Figure 1 The H5 page loading monitoring method provided by the embodiment of the present invention may include:

[0044] S101, start the headless browser;

[0045] S102, in the process of accessing the target H5 page by using the headless browser, capturing the loading data of the resources in the loaded target H5 page;

[0046] S103, monitoring the loading process of the target H5 page based on the loading data.

[0047] In an embodiment of the present invention, a headless browser is used to simulate a user accessing a page, so that in the process of using the headless browser to access the target H5 page, loading data of resources in the target H5 page is captured, and the loading process of the target H5 page is monitored based on the loading data, so that the loading process of the H5 page can be monitored before the user experiences it, thereby realizing timely monitoring of the loading process of the H5 page.

[0048] The H5 page loading monitoring method provided in the embodiment of the present invention can be applied before a web page goes online, that is, before it is provided to users, the H5 page to be launched can be checked again by the H5 page loading monitoring method provided in the embodiment of the present invention.

[0049] In S101, a headless browser is a web browser without a graphical user interface. It can also be understood that the behavior of a headless browser is similar to that of a web browser, but no graphical user interface (GUI) is displayed.

[0050] In an embodiment of the present invention, a headless browser can be started on a server through Puppeteer. Moreover, before starting the headless browser, a network simulation condition of the headless browser can be set so that the headless browser can access the target H5 page under the set network simulation condition. Figure 2 As shown, a headless browser runs on a server, and the process of simulating page access through the headless browser can also be called simulated measurement.

[0051] Specifically, the network simulation conditions can be determined by actual needs or experience. For example, the network simulation conditions of the headless browser are set to download speed 188744kbps, upload speed 86400kbps, delay 562.5ms, and the central processing unit (CPU) simulation condition is set to 4.

[0052] In S102, the process of using a headless browser to access a target H5 page may include: sending a request to a server through the headless browser, and the server feeding back resource data of the page to the headless browser after receiving the request.

[0053] After starting the headless browser, the server can provide the headless browser with the address of the H5 page to be monitored, that is, the address of the target H5 page. In this way, the headless browser can be used to access the target H5 page.

[0054] In one example, the server providing the address of the H5 page to be monitored to the headless browser may include: after detecting that the developer or tester triggers the pre-launch detection function of the website, the server provides the address of the homepage of the detected website as the address of the target H5 page to the browser.

[0055] In another example, the server providing the address of the H5 page to be monitored to the headless browser may include: providing a human-computer interaction interface, through which the developer or tester manually enters the address of the website to be monitored, and the server may use the address of the homepage of the website as the address of the target H5 page.

[0056] In these two cases, the monitoring of H5 page loading in the embodiments of the present invention can also be understood as the monitoring of H5 first screen loading resources.

[0057] Puppeteer is a Node library (Node.js library) that provides an application programming interface (API) to control the operation of a headless browser. Node.js is an open source and cross-platform interpreted scripting language (JavaScript) runtime environment.

[0058] In the embodiment of the present invention, an API in Puppeteer can be called to start a headless browser on the server, and the headless browser is used to access the target H5 page.

[0059] like Figure 3 As shown, S103 may include:

[0060] S301, comparing the loading data with the abnormal condition;

[0061] S302: If the loaded data meets the abnormal condition, an alarm message is fed back.

[0062] The warning message is used to indicate that an abnormality occurs in the loading of the target H5 page.

[0063] In an example, the loaded data includes resource volume, and the abnormal condition may include an abnormal threshold. For example, the abnormal threshold of the resource volume is 1MB. If the resource volume in the loaded data is greater than 1MB, it means that the resource volume in the loaded data meets the abnormal condition. In this case, alarm information can be fed back, and specifically, the alarm information can be fed back to the developer.

[0064] Among them, a piece of loaded data may include data of multiple dimensions, and corresponding abnormal conditions may be set for data of different dimensions.

[0065] In one possible implementation, an abnormal condition may be preset, and after the loading data is obtained, the loading data is compared with the abnormal condition.

[0066] In another possible implementation, the obtained loading data may be first saved to a database to perform an abnormality search on the data stored in the database. The abnormality search may include: after detecting that a user triggers an abnormality search function, displaying an interface to allow the user to input an abnormality condition through the display interface, and after receiving the abnormality condition, comparing each loading data in the database with the abnormality condition.

[0067] One feasible method is to use an intelligent robot to feedback warning information.

[0068] In the embodiment of the present invention, when abnormal resource loading is detected, an early warning can be automatically triggered, relevant personnel can be notified to handle the problem, and loading problems can be responded to quickly to reduce damage to user experience. This can also be understood as the realization of an automatic early warning mechanism.

[0069] In an optional embodiment, the alarm information may also include abnormal data, so that the resources in the target H5 page are adjusted based on the abnormal data.

[0070] Specifically, the abnormal data may include the current loaded data, the abnormal conditions, and the adjustment suggestions for the current loaded data. For example, the resource volume in the current loaded data is: 2MB, the abnormal condition for the resource volume in the abnormal conditions is: abnormal threshold 1MB, and the adjustment suggestions for the current loaded data are: reduce the resource volume to be less than the abnormal threshold 1MB.

[0071] In the embodiment of the present invention, the loading data is analyzed, resource integrity, loading speed and number of requests are evaluated, anomalies are discovered in time, the analysis accuracy is improved, and optimization suggestions are provided. In addition, targeted optimization suggestions are generated based on the analysis results to help developers improve page loading performance, provide specific and feasible solutions, and improve H5 page loading performance and user experience.

[0072] The monitoring and evaluation of page loading in related technologies mainly rely on post-analysis tools, such as log analysis and user feedback. This approach has the following shortcomings:

[0073] 1. Lag, that is, the lack of real-time monitoring means, and the inability to monitor the H5 page loading status in time, resulting in problems often being discovered only after the user experience is damaged.

[0074] 2. Inaccuracy, that is, it is difficult to fully reflect all problems in the loading process, especially difficult to detect resource loading problems, resulting in incomplete monitoring data and difficulty in accurately evaluating page loading.

[0075] 3. Passivity, that is, relying on user feedback to discover problems, lacking proactive warning and optimization methods, lacking targeted optimization suggestions, and being unable to proactively improve page loading performance.

[0076] The embodiment of the present invention performs another check on the H5 page to be launched before the webpage is launched, so that the loading process of the H5 page can be monitored before the user experiences it, thereby realizing timely monitoring of the loading process of the H5 page, solving the lag problem in the related technology, and avoiding the risk that the problem is only discovered after the user experience is damaged.

[0077] Moreover, the loading data analyzed is the loading data of resources in the target H5 page captured during the process of accessing the target H5 page with a headless browser, which can more comprehensively reflect the problems in the loading process, especially the problems of resource loading that are difficult to detect, that is, the monitoring data is not comprehensive, and can more accurately evaluate page loading.

[0078] In addition, in the embodiment of the present invention, if the loading data captured before the user experience meets the abnormal conditions, the alarm information is fed back, that is, active early warning and optimization measures can be used, avoiding the passive type of relying on user feedback to discover the existence of problems, and the alarm information can also include abnormal data, so that the resources in the target H5 page can be adjusted based on the abnormal data, that is, targeted optimization suggestions can be made to actively improve the page loading performance.

[0079] In an optional embodiment, as Figure 4 As shown, S102 includes:

[0080] S401, extracting a successfully recorded tracking file, where the tracking file is obtained by starting the recording of the tracking event of the loading target H5 page when the page loading starts, and terminating the recording of the tracking event of the loading target H5 page after the page loading is completed.

[0081] The recording of the tracking event of the loading target H5 page is started when the page loading starts, and the recording of the tracking event of the loading target H5 page is terminated after the page loading is completed, so as to obtain a recorded tracking file.

[0082] For example, use the page tracing start (page.tracing.start) method to start the trace event recording of page loading, and after the page loading is completed, call the page tracing end (page.tracing.end) method to terminate the trace event recording and extract the successfully recorded trace file.

[0083] S402: Filter out network request events from the tracking file.

[0084] The network request event can also be understood as an event related to the network request. For example, the network request event includes: a resource send request (ResourceSendRequest) event, a resource receive response (ResourceReceiveResponse) event, and a resource finish (ResourceFinish) event.

[0085] S403: extracting preset data from the network request event.

[0086] Preset data includes data that affects loading speed and resource integrity.

[0087] The loading speed of H5 pages and the integrity of loaded resources are important factors that affect user experience. The loading speed of H5 pages and the integrity of loaded resources are easily affected by multiple factors such as static resource volume, resource quantity, resource domain name distribution, format, etc., thus affecting user experience.

[0088] In one implementable manner, in order to monitor the loading speed of the H5 page and the integrity of the loaded resources to improve the user experience, in an embodiment of the present invention, data affecting the loading speed and resource integrity can be extracted from the above-mentioned network request events, that is, the loading data affecting the loading speed and resource integrity can be captured.

[0089] The preset data includes at least one of the following data: resource volume, resource quantity, domain name distribution, and access format.

[0090] The resource volume may include the original data packet volume and the network data packet volume. The original data packet volume may also be referred to as the static resource volume.

[0091] The resource quantity refers to the number of resources. The resources of a page may include types, and the resource quantity may include the total number of resources of various types.

[0092] The domain name distribution can be determined by the suffix of the page address, for example, the suffix of the domain name representing a commercial organization (.com), the suffix of the domain name representing a non-profit organization (.ORG), and so on.

[0093] The access format can be represented by Multipurpose Internet Mail Extensions (MIME).

[0094] In addition to resource volume, resource quantity, domain name distribution, and access format, it can also load order, request quantity, domain name network information, extract HyperText Transfer Protocol (HTTP) status code, loading duration, loading priority, HTTP request method and Uniform Resource Locator (URL) address, etc. In this way, the page loading process can be monitored more comprehensively and completely from multiple dimensions.

[0095] The embodiment of the present invention performs another inspection on the H5 page to be launched before the web page goes online, so that the loading process of the H5 page can be monitored before the user experiences it, specifically the page loading speed and resource integrity are monitored, and the page loading speed and resource integrity of the H5 page loading process can be monitored in a timely manner, which solves the lag problem in the related technology and avoids the risk that the problem is only discovered after the user experience is damaged.

[0096] In addition, the loading data analyzed is the loading data of resources in the target H5 page captured in the process of accessing the target H5 page with a headless browser. Specifically, the loading data that affects the loading speed and resource integrity can be captured, such as resource volume, resource quantity, domain name distribution, access format, HTTP status code, loading duration, loading priority, HTTP request method and URL address, etc. In this way, it can more comprehensively reflect the problems in the loading process, especially the problems of resource loading that are difficult to detect, that is, the monitoring data is incomplete, and can more accurately evaluate the page loading speed and resource integrity.

[0097] In addition, in the embodiment of the present invention, if the loading data captured before the user experience meets the abnormal conditions, the alarm information is fed back, that is, active early warning and optimization measures can be used, avoiding the passive type of relying on user feedback to discover the existence of problems, and the alarm information can also include abnormal data, so that the resources in the target H5 page can be adjusted based on the abnormal data, that is, targeted optimization suggestions can be made to actively improve the page loading performance.

[0098] In an optional embodiment, Puppeteer can be called periodically to start a headless browser. In this way, in the process of accessing the target H5 page using the headless browser, the loading data of the resources in the target H5 page is captured, and the loading process of the target H5 page is monitored based on the loading data.

[0099] Each time Puppeteer is called to start a headless browser, corresponding loading data can be obtained. After each loading data is obtained, the embodiment of the present invention can save the obtained loading data to a database. In this way, in the process of abnormal search, the loading data obtained multiple times can be analyzed together. For example, if Puppeteer is called twice to start a headless browser, corresponding loading data can be obtained each time. The change trend of the loading data obtained by calling Puppeteer to start a headless browser for the second time can be analyzed compared with the loading data obtained by calling Puppeteer to start a headless browser for the first time, so as to perform abnormal detection and alarm based on the change trend.

[0100] In this way, it is possible to generate and collect loading data by periodically simulating the running of H5 pages, ensure the continuity and comprehensiveness of monitoring, discover and solve problems in a timely manner, and prevent loading anomalies from affecting user experience.

[0101] The embodiment of the present invention implements the monitoring of H5 page loading resources based on Puppeteer. In one implementable manner, the monitored H5 page may specifically be the home screen of the website. In this case, the present invention implements the monitoring of H5 home screen page loading resources based on Puppeteer.

[0102] In general: Puppeteer is used to automatically simulate users accessing H5 pages and grab the first screen network resources, analyze resource loading data such as resource volume, resource quantity, domain name distribution, access format (such as MIME type), etc., and use intelligent robots to alert when abnormal items are found. It mainly includes the following aspects:

[0103] 1. Use Puppeteer to simulate users accessing H5 pages, detect the first screen loading resources, and obtain detailed loading data;

[0104] That is, the headless browser is started, and in the process of accessing the target H5 page using the headless browser, the loading data of the resources in the target H5 page is captured.

[0105] 2. Run simulations periodically to generate and collect loading data to ensure comprehensive monitoring;

[0106] That is, Puppeteer is called periodically to start a headless browser, and Puppeteer is called to start a headless browser once. Then, in the process of accessing the target H5 page using the headless browser, the loading data of the resources in the target H5 page is captured. That is, each time Puppeteer is called to start a headless browser, the corresponding loading data can be obtained, and then the loading process of the target H5 page can be monitored based on the loading data. In this way, the comprehensiveness of the monitoring can be ensured.

[0107] In summary, regularly simulating users accessing H5 pages and generating loading data ensures the continuity and comprehensiveness of monitoring.

[0108] 3. Analyze loading data and promptly detect abnormal resources, large files, or excessive network requests;

[0109] Before the web page of the embodiment of the present invention goes online, that is, before it is provided to users, the H5 page to be launched is checked again by the H5 page loading monitoring method provided by the embodiment of the present invention, that is, the loading process of the H5 page can be monitored before the user experiences it, thereby realizing timely monitoring of the loading process of the H5 page.

[0110] In general, the algorithm analyzes the first-screen network loading data, evaluates resource integrity, loading speed, number of requests, etc., and detects abnormal situations in a timely manner.

[0111] It can also be understood that using Puppeteer to capture detailed data during the page loading process provides real-time monitoring of the resources loaded on the first screen of the H5 page, and timely discovers loading problems, that is, realizes real-time monitoring.

[0112] In addition, by capturing the loading data that affects the page loading speed and resource integrity when accessing the target H5 page using a headless browser, the page loading speed and resource integrity can be accurately evaluated, thereby improving the accuracy of the evaluation.

[0113] 4. Automatically trigger an early warning and notify relevant personnel to handle loading issues;

[0114] That is, when a loading anomaly is detected, an early warning is automatically triggered and relevant personnel are notified to handle the situation.

[0115] In the embodiment of the present invention, if the loading data captured before the user experience meets the abnormal conditions, the alarm information is fed back, thereby avoiding the passive type of relying on user feedback to discover the existence of problems. In addition, the alarm information can be fed back by the intelligent robot, realizing active early warning and optimization means.

[0116] 5. Provide optimization suggestions based on analysis results to help developers improve page loading performance.

[0117] That is, targeted optimization suggestions are generated based on the analysis results to help developers improve page loading performance.

[0118] The alarm information may also include abnormal data, so that the resources in the target H5 page can be adjusted based on the abnormal data, that is, targeted optimization suggestions can be made to actively improve the page loading performance.

[0119] It can also be understood as achieving active early warning and providing optimization suggestions to avoid damage to user experience due to resource issues, that is, achieving active early warning and optimization.

[0120] Reference Figure 5 , the monitoring of H5 home page loading resources based on Puppeteer in an embodiment of the present invention is described in detail.

[0121] In the embodiment of the present invention, the server deploys services to implement the monitoring method of H5 page loading, and the server regularly calls the above services through the task scheduling center to realize automatic detection of resources.

[0122] Services mainly include:

[0123] Puppeteer headless browser, trace event recording module, trace file processing module, data extraction and storage module, anomaly detection and alarm module, intelligent robot alarm.

[0124] like Figure 6 As shown, this can be achieved through the following steps:

[0125] S61. Build a Node.js service on the server and reference the Puppeteer npm package (Node.js package manager). Start a headless browser on the server through Puppeteer.

[0126] Among them, the network simulation conditions of the headless browser are set to download speed 188744kbps, upload speed 86400kbps, delay 562.5ms, and the CPU simulation condition is set to 4.

[0127] The headless browser accesses the target H5 page under the above network simulation conditions.

[0128] S62. Use the page.tracing.start method to start the trace event recording of page loading.

[0129] S63. After the page is loaded, call the page.tracing.end method to terminate the trace event recording.

[0130] That is, page loading analysis is performed by recording traces, such as first screen resource analysis.

[0131] S64. Extract the successfully recorded trace file and filter out the network request events: ResourceSendRequest, ResourceReceiveResponse and ResourceFinish events.

[0132] S65. Extract data from the filtered data: HTTP status code, loading duration, MIME type, loading priority, HTTP request method, network data packet volume, original data packet volume and URL address, and store these data in a database.

[0133] S66: Perform an abnormal search on the data stored in the database, for example, set the search threshold to be 1MB for the abnormal threshold of the resource volume. When the analyzed resource volume is greater than 1MB, push an alarm message to the corresponding developer through the intelligent robot.

[0134] The task scheduling center can obtain corresponding loading data each time it calls a service, and the loading data can be stored in the database. During the abnormal search process, the loading data obtained by multiple calls to the service can be combined for analysis. For example, if the task scheduling center calls the service twice, the two services will obtain corresponding loading data. The loading data obtained by the second call to the service can be analyzed to compare the changing trend of the loading data obtained by the third call to the service, so as to perform abnormal detection and alarm based on the changing trend.

[0135] In the embodiment of the present invention, the loading data in the page loading process is analyzed by simulation operation, and specifically the loading data that affects the page loading speed and resource integrity can be analyzed, so that an alarm can be triggered in time when there is an abnormality, so that the configuration of resources can be adjusted, so as to improve the H5 page loading speed and resource integrity, and significantly improve the user experience. In addition, the loading process of the H5 page can be monitored before the user experience, so that the loading process of the H5 page can be monitored in time to adjust in time when there is a problem, reducing the risk of customers discovering problems after going online, that is, real-time monitoring and rapid processing of loading problems can be achieved, reducing customer complaints caused by loading problems. In addition, targeted optimization suggestions can also be provided to help developers quickly solve loading problems and improve development efficiency.

[0136] Corresponding to the H5 page loading monitoring method provided in the above embodiment, the embodiment of the present invention provides a H5 page loading monitoring device, such as Figure 7 As shown, including:

[0137] A startup module 701 is used to start a headless browser;

[0138] The capture module 702 is used to capture the loading data of the resources in the target H5 page when accessing the target H5 page using the headless browser;

[0139] The monitoring module 703 is used to monitor the loading process of the target H5 page based on the loading data.

[0140] Optionally, the startup module 701 is specifically configured to periodically call Puppeteer to start a headless browser.

[0141] Alternatively, if Figure 8 As shown, the capture module 702 includes:

[0142] The first extraction submodule 801 is used to extract the successfully recorded tracking file, which is obtained by starting the recording of the tracking event of the loading target H5 page at the beginning of page loading and terminating the recording of the tracking event of the loading target H5 page after the page loading is completed;

[0143] The filtering submodule 802 is used to filter out network request events from the tracking file;

[0144] The second extraction submodule 803 is used to extract preset data from the network request event, where the preset data includes data that affects the loading speed and resource integrity.

[0145] Optionally, the network request event includes: a source sending request ResourceSendRequest event, a source receiving response ResourceReceiveResponse event, and a source ending ResourceFinish event.

[0146] Optionally, the preset data includes at least one of the following data: resource volume, resource quantity, domain name distribution, and access format.

[0147] Alternatively, if Fig. 9 As shown, the monitoring module 703 includes:

[0148] A comparison submodule 901 is used to compare the loaded data with the abnormal condition;

[0149] The feedback submodule 902 is used to feedback warning information if the loaded data meets the abnormal condition, and the warning information is used to indicate that the loading of the target H5 page is abnormal.

[0150] Optionally, the alarm information also includes abnormal data, so that the resources in the target H5 page are adjusted based on the abnormal data.

[0151] The embodiment of the present invention further provides an electronic device, such as Fig.10 As shown, it includes a processor 1001, a communication interface 1002, a memory 1003 and a communication bus 1004, wherein the processor 1001, the communication interface 1002, and the memory 1003 communicate with each other through the communication bus 1004;

[0152] Memory 1003, used for storing computer programs;

[0153] The processor 1001 is used to implement the method steps of the monitoring method for H5 page loading in the above embodiment when executing the program stored in the memory 1003.

[0154] The communication bus mentioned in the above terminal can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0155] The communication interface is used for communication between the above terminal and other devices.

[0156] The memory may include a random access memory (RAM) or a non-volatile memory, such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0157] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0158] In another embodiment provided by the present invention, a computer-readable storage medium is also provided, in which a computer program is stored. When the computer program is executed by a processor, the method for monitoring the loading of an H5 page described in any of the above embodiments is implemented.

[0159] In another embodiment provided by the present invention, a computer program product including instructions is also provided, which, when executed on a computer, enables the computer to execute the method for monitoring the loading of an H5 page as described in any one of the above embodiments.

[0160] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented by software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present invention is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk (SSD)), etc.

[0161] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0162] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device, electronic device, computer-readable storage medium, and computer program product embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0163] The above description is only a preferred embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.

Claims

1. A method for monitoring H5 page loading, characterized in that: include: Start a headless browser; In the process of accessing the target H5 page by using the headless browser, capturing the loading data of the resources in the target H5 page; The loading process of the target H5 page is monitored based on the loading data.

2. The method according to claim 1, characterized in that The starting of the headless browser includes: Periodically call Puppeteer to start a headless browser.

3. The method according to claim 1, characterized in that: In the process of accessing the target H5 page by using the headless browser, grabbing the loading data of the resources in the target H5 page, including: Extracting a successfully recorded tracking file, wherein the tracking file is obtained by starting the recording of the tracking event of loading the target H5 page at the beginning of page loading, and terminating the recording of the tracking event of loading the target H5 page after the page loading is completed; Filtering network request events from the trace file; Preset data is extracted from the network request event, wherein the preset data includes data that affects loading speed and resource integrity.

4. The method according to claim 3, characterized in that The network request event includes: a source sending request ResourceSendRequest event, a source receiving response ResourceReceiveResponse event and a source ending ResourceFinish event.

5. The method according to claim 3, characterized in that: The preset data includes at least one of the following data: resource volume, resource quantity, domain name distribution, and access format.

6. The method according to any one of claims 1 to 5, characterized in that: The monitoring of the loading process of the target H5 page based on the loading data includes: comparing the loading data to an abnormal condition; If the loaded data meets the abnormal condition, an alarm message is fed back, where the alarm message is used to indicate that an abnormality has occurred in the loading of the target H5 page.

7. The method according to claim 6, characterized in that The alarm information also includes abnormal data, so that the resources in the target H5 page can be adjusted based on the abnormal data.

8. A monitoring device for H5 page loading, characterized in that: include: Startup module, used to start the headless browser; A capture module, used for capturing loading data of resources in the target H5 page when accessing the target H5 page by using the headless browser; A monitoring module is used to monitor the loading process of the target H5 page based on the loading data.

9. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, for implementing the method steps described in any one of claims 1 to 7 when executing a program stored in a memory.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method steps described in any one of claims 1 to 7 are implemented.

Images