A real-time analysis system for frontend page performance diagnosis

Abstract

The application relates to the technical field of front-end monitoring, and discloses a real-time analysis system for front-end page performance diagnosis, which comprises a data acquisition module, a data processing module, an analysis and diagnosis module, a result display module, and optionally added alarm modules and data storage modules. The data acquisition module and the analysis and diagnosis module realize dynamic acquisition through bidirectional communication, the data processing module outputs a standardized time sequence data set, the analysis and diagnosis module completes performance scoring, abnormality determination and risk prediction through a quantitative formula, and the result display module visually presents the diagnosis result. In the application, the modules are highly efficient and cooperative, accurate front-end performance data acquisition, scientific analysis and real-time diagnosis are realized, performance bottlenecks and potential risks can be accurately identified, the diagnosis efficiency and accuracy are improved, and reliable support is provided for front-end performance optimization.

Description

Technical Field

[0001] This invention belongs to the field of front-end monitoring technology, specifically referring to a real-time analysis system for diagnosing front-end page performance. Background Technology

[0002] Front-end page performance directly impacts user experience, product retention rate, and brand image. Users are increasingly demanding higher performance metrics for front-end pages, such as complexity, loading speed, and smoothness of interaction. Therefore, front-end page performance diagnosis has become a crucial step in software development and maintenance.

[0003] Existing front-end performance diagnostic solutions suffer from the following shortcomings: First, data collection lacks specificity, often relying on fixed dimensions and failing to dynamically adjust the collection scope based on real-time analysis needs, resulting in excessive redundant data or missing key data. Second, data processing accuracy is limited, with incomplete filtering of collected noisy data and a lack of standardization for different data formats, affecting the accuracy of subsequent analysis. Third, the quantitative level of analysis and diagnosis is low, lacking scientific scoring and anomaly detection formulas, making it difficult to accurately identify performance bottlenecks and potential risks. Fourth, inter-module collaboration is poor, data flow efficiency is low, and it is impossible to achieve real-time response across the entire chain from data collection to result display.

[0004] Therefore, there is an urgent need for a real-time front-end page performance diagnostic analysis system that can achieve dynamic and accurate data collection, efficient and standardized processing, scientific quantitative analysis, and end-to-end collaboration to address the shortcomings of existing technologies. Summary of the Invention

[0005] In view of the above, the purpose of this invention is to overcome the shortcomings of existing front-end performance diagnosis solutions and provide a real-time analysis system for front-end page performance diagnosis. This system enables dynamic and accurate collection of front-end page performance data, efficient and standardized processing, scientific quantitative analysis, and intuitive visualization. It can accurately identify performance bottlenecks and abnormal problems, predict potential performance risks, and improve the efficiency and accuracy of front-end performance diagnosis.

[0006] To achieve the above objectives, the present invention adopts the following technical solution: a real-time analysis system for front-end page performance diagnosis, characterized in that it comprises: The data acquisition module is used to collect performance-related data in real time during the operation of the front-end page; The data processing module is communicatively connected to the data acquisition module and is used to clean and standardize the acquired performance-related data. The analysis and diagnosis module is connected in communication with the data processing module and is used to perform real-time analysis based on the processed performance data to identify performance bottlenecks and abnormal issues of the front-end page. The results display module is communicatively connected to the analysis and diagnosis module and is used to present the analysis and diagnosis results to the user in a visual form. The data acquisition module and the analysis and diagnosis module also have bidirectional communication. The analysis and diagnosis module can send targeted data acquisition instructions to the data acquisition module according to real-time analysis needs, so as to realize dynamic adjustment of the acquisition range.

[0007] As a further description of the above technical solution: The performance data acquisition unit is used to collect front-end page loading performance data, interaction performance data, and resource loading data. The real-time data transmission unit is used to encrypt the collected raw data and transmit it to the data processing module.

[0008] As a further description of the above technical solution: The data processing module removes abnormal noise data from the collected data, converts performance data of different formats into a unified data format, and performs time-series alignment processing on the data to generate a standardized time-series performance dataset.

[0009] As a further description of the above technical solution: The analysis and diagnosis module includes a data feature extraction unit and a performance problem diagnosis unit; The data feature extraction unit is used to extract key performance feature indicators from the standardized time-series performance dataset. The key performance feature indicators include page load completion time, first screen rendering time, interaction response latency, and resource loading success rate. The performance problem diagnosis unit is used for quantitative analysis and anomaly detection based on key performance characteristic indicators. It calculates the front-end page loading performance level using a comprehensive page loading performance scoring formula. The comprehensive page loading performance scoring method is as follows:

[0010] Where S is the overall loading performance score, and α, β, and γ are the weighting coefficients for page load completion time, first screen rendering time, and resource loading success rate, respectively, and α+β+γ=1. This refers to the actual page load time. This refers to the standard page load time. The maximum allowed page load time. This refers to the actual first-screen rendering time. This is the standard first-screen rendering time. The maximum allowed first-screen rendering time, To improve resource loading success rate; An interaction performance anomaly is determined using an interaction response delay anomaly determination formula, which is as follows:

[0011] in For actual interactive response delay, Let σ be the mean of the interaction response delay and σ be the standard deviation of the interaction response delay. When this formula is satisfied, the interaction performance is considered abnormal. Finally, the above calculation results are combined with preset performance thresholds and performance problem rule bases to determine the performance level of the front-end page and the types of performance anomalies in real time.

[0012] As a further description of the above technical solution: The analysis and diagnosis module can also predict potential performance risks of the front-end page based on historical performance diagnosis data and the changing trends of key performance indicators. Specifically, it uses a performance degradation trend prediction formula to calculate the predicted values ​​of performance indicators within a preset future time period. The performance degradation trend prediction formula is as follows:

[0013] in The predicted value of the performance index at time t. ε(t) represents the initial performance index value, k is the performance degradation coefficient, and ε(t) is the random error term. When the predicted value exceeds the preset safety threshold, it is determined that there is a potential performance risk, and the prediction result and the basis for prediction are sent to the result display module.

[0014] As a further description of the above technical solution: The results display module provides multi-dimensional visualization, including real-time trend charts of performance indicators, heat maps of performance problem distribution, and lists of abnormal problems. It also supports users in exporting specific performance data and diagnostic results.

[0015] As a further description of the above technical solution: The alarm module is communicatively connected to the analysis and diagnosis module. When the analysis and diagnosis module identifies a serious performance anomaly or predicts a high-risk performance problem, it can trigger a real-time alarm. The alarm module can classify alarm levels according to the severity of performance problems, and different alarm levels correspond to different alarm methods and alarm recipients.

[0016] As a further description of the above technical solution: It also includes a data storage module, which is communicatively connected to the data processing module and the analysis and diagnosis module, and is used to classify and store standardized time-series performance datasets, analysis and diagnosis results, historical performance data and prediction records. The data storage module adopts a distributed storage architecture, supports indexing and building of stored data by time dimension and page dimension, and can quickly respond to data query and traceability requests.

[0017] As a further description of the above technical solution: The data acquisition module supports custom acquisition rule configuration. Users can set the acquisition frequency, acquisition accuracy and filtering conditions of key performance indicators through the result display module. The data acquisition module also has a breakpoint resume acquisition function. When the acquisition link is interrupted and resumed, it can automatically reacquire the performance data during the interruption and mark the reacquired data to ensure data integrity.

[0018] The beneficial effects achieved by the present invention using the above structure are as follows: (1) In this invention, the data acquisition range is dynamically adjusted through bidirectional communication between the data acquisition module and the analysis and diagnosis module. The data integrity is ensured by the combination of custom acquisition rules and breakpoint resume acquisition function. The data processing module generates a standardized dataset by filtering noise, unifying the format and aligning the time sequence, which lays a precise data foundation for subsequent analysis, while reducing redundant data and improving processing efficiency.

[0019] (2) In this invention, the performance scoring, anomaly judgment and risk prediction are accurately analyzed by relying on multi-dimensional quantitative formulas, which can quickly identify performance bottlenecks and potential risks; efficient communication and collaboration between modules realize real-time response of the entire link from data collection and analysis to result display and alarm, which greatly improves the timeliness and pertinence of performance diagnosis.

[0020] (3) The results display module provides multi-dimensional visualization and supports data export, making it easy for users to view the diagnostic results intuitively; the data storage module adopts a distributed architecture and multi-dimensional index design, which can quickly respond to historical data query and traceability requests of different dimensions, significantly improving the system's practicality and ease of operation and maintenance. Attached Figure Description

[0021] Figure 1 This is a module architecture diagram of a real-time analysis system for front-end page performance diagnosis proposed in this invention. Detailed Implementation

[0022] The technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0023] In the description of this invention, it should be understood that the terms "upper", "lower", "front", "rear", "left", "right", "top", "bottom", "inner", "outer", etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are only for the convenience of describing this invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this invention.

[0024] To address the shortcomings in front-end page performance diagnosis, this application embodiment designs a real-time analysis system for front-end page performance diagnosis, such as... Figure 1 As shown, it includes a data acquisition module, a data processing module, an analysis and diagnosis module, and a results display module.

[0025] The data acquisition module is used to collect performance-related data in real time during the operation of the front-end page; The data processing module is communicatively connected to the data acquisition module and is used to clean and standardize the acquired performance-related data. The analysis and diagnosis module is connected in communication with the data processing module and is used to perform real-time analysis based on the processed performance data to identify performance bottlenecks and abnormal issues of the front-end page. The results display module is communicatively connected to the analysis and diagnosis module and is used to present the analysis and diagnosis results to the user in a visual form. The data acquisition module and the analysis and diagnosis module also have bidirectional communication. The analysis and diagnosis module can send targeted data acquisition instructions to the data acquisition module according to real-time analysis needs, so as to realize dynamic adjustment of the acquisition range.

[0026] The data acquisition module is used to collect performance-related data during the operation of the front-end page in real time. The module includes a performance data acquisition unit and a real-time data transmission unit. The performance data acquisition unit collects loading performance data, interaction performance data, and resource loading data of the front-end page. The real-time data transmission unit encrypts the collected raw data and transmits it to the data processing module. The data acquisition module supports customizable acquisition rule configuration. Users can set the acquisition frequency, accuracy, and filtering conditions for key performance indicators through the results display module. It also has a breakpoint resume acquisition function; when the acquisition link is interrupted and then resumed, it can automatically re-acquire performance data from the interrupted period and mark the re-acquired data to ensure data integrity.

[0027] Data processing module: Communicatively connected to the data acquisition module, used to clean and standardize the acquired performance-related data; specifically, it removes abnormal noise data from the acquired data, converts performance data of different formats into a unified data format, and performs time-series alignment processing on the data to generate a standardized time-series performance dataset.

[0028] The analysis and diagnosis module is communicatively connected to the data processing module. It performs real-time analysis based on processed performance data to identify performance bottlenecks and anomalies in the front-end page. The analysis and diagnosis module includes a data feature extraction unit and a performance problem diagnosis unit. The data feature extraction unit extracts key performance indicator metrics (including page load completion time, first-screen rendering time, interaction response latency, and resource loading success rate) from a standardized time-series performance dataset. The performance problem diagnosis unit performs quantitative analysis and anomaly detection based on these key performance indicator metrics. The data acquisition module and the analysis and diagnosis module also have bidirectional communication. The analysis and diagnosis module can send targeted data acquisition commands to the data acquisition module according to real-time analysis needs, enabling dynamic adjustment of the acquisition scope.

[0029] Results Display Module: Communicatively connected to the analysis and diagnosis module, it is used to present the analysis and diagnosis results to the user in a visual form; it can provide multi-dimensional visualization display formats, including real-time trend charts of performance indicators, heat maps of performance problem distribution, and lists of abnormal problem details, and also supports users to export specific performance data and diagnostic results.

[0030] Alarm Module: Communicates with the analysis and diagnosis module. When the analysis and diagnosis module identifies a serious performance anomaly or predicts a high-risk performance problem, it can trigger a real-time alarm. Alarm levels can be divided according to the severity of the performance problem. Different alarm levels correspond to different alarm methods and alarm recipients. Alarm methods include at least one of the following: system pop-up, SMS, email, and WeChat alarm. The criteria for judging a serious performance anomaly are: a comprehensive page loading performance score S < 60 points, or the presence of 3 or more key performance indicator indicators that meet the anomaly judgment conditions.

[0031] Data storage module: It communicates with the data processing module and the analysis and diagnosis module respectively, and is used to classify and store standardized time-series performance datasets, analysis and diagnosis results, historical performance data and prediction records. It adopts a distributed storage architecture, supports indexing and building stored data by time dimension and page dimension, and can quickly respond to data query and traceability requests.

[0032] The quantitative analysis and anomaly determination of the analysis and diagnosis module are specifically achieved through the following formula: (1) Comprehensive scoring formula for page loading performance:

[0033] Where S is the overall loading performance score, and α, β, and γ are the weighting coefficients for page load completion time, first screen rendering time, and resource loading success rate, respectively, and α+β+γ=1. This refers to the actual page load time. This refers to the standard page load time. The maximum allowed page load time. This refers to the actual first-screen rendering time. This is the standard first-screen rendering time. The maximum allowed first-screen rendering time, This refers to the success rate of resource loading.

[0034] (2) Formula for judging abnormal interaction response delay:

[0035] in For actual interactive response delay, Let σ be the mean of the interaction response delay and σ be the standard deviation of the interaction response delay. When this formula is satisfied, the interaction performance is considered abnormal.

[0036] (3) Formula for predicting performance degradation trend (used for predicting potential performance risks):

[0037] in Let t be the predicted performance index value at time t, T be the initial performance index value, k be the performance decay coefficient, and ε(t) be the random error term. When the predicted value exceeds the preset safety threshold, it is determined that there is a potential performance risk, and the prediction result and prediction basis are sent to the result display module.

[0038] To better understand the working process of a real-time analysis system for front-end page performance diagnosis according to an embodiment of this application, refer to... Figure 1 The following is a specific embodiment: The core working principle of this system lies in constructing a closed-loop collaborative mechanism encompassing "collection-processing-analysis-output-feedback." Through precise division of labor and efficient collaboration among modules, real-time and accurate diagnosis of front-end page performance is achieved. After the system starts and completes initial configuration, the data collection module, pre-embedded in the front-end page to be monitored, proactively initiates a collection task, capturing various performance-related data during page operation in real time, covering the entire page loading process, user interaction operations, and key data related to resource loading. Simultaneously, this data collection module establishes a stable two-way communication link with the back-end analysis and diagnosis module. During real-time analysis, the analysis and diagnosis module can dynamically issue collection parameter adjustment commands to the data collection module based on initially identified performance issues or targeted analysis needs issued by the user. This precisely controls the collection range, collection frequency, and data accuracy, ensuring that the collected data accurately matches the analysis requirements while effectively avoiding redundant data generation and reducing the consumption of system transmission and storage resources.

[0039] The raw performance data collected by the data acquisition module is securely transmitted to the data processing module after being processed by the built-in real-time data transmission unit using an encryption algorithm. Upon receiving the data, the data processing module first performs data decryption and verification, then sequentially executes multiple rounds of data cleaning and standardization: invalid and abnormal interference data are removed using preset noise filtering rules; heterogeneous performance data from different sources and in different formats are converted into a unified standard format; and time-series alignment is performed based on the data acquisition timestamps. This ultimately generates a well-organized and usable standardized time-series performance dataset, providing a high-quality data foundation for subsequent precise analysis. Subsequently, the analysis and diagnosis module calls the data feature extraction unit to accurately extract key performance characteristic indicators such as page load completion time and first-screen rendering time from the standardized time-series performance dataset. Then, the performance problem diagnosis unit conducts quantitative analysis using preset page load performance comprehensive scoring formulas and interaction response latency anomaly judgment formulas, accurately determining the current page's performance level and specific anomaly type based on preset performance thresholds for the business scenario. Simultaneously, based on historical performance data stored in the data storage module, a performance degradation trend prediction formula is used to predict performance change trends within a preset future time period, completing the core transformation process from raw data to precise diagnostic conclusions.

[0040] The complete diagnostic conclusions generated by the analysis and diagnosis module are simultaneously transmitted to the results display module and the alarm module. After receiving the data, the results display module presents information such as performance level, anomaly type, potential risks, and specific calculation basis in a multi-dimensional visual format, including real-time performance indicator trend charts, performance problem distribution heatmaps, and anomaly problem detail lists, according to user-preset display rules. This helps users intuitively and quickly grasp the performance status of the front-end page. The alarm module verifies the diagnostic conclusions in real time and triggers the corresponding alarm process based on the alarm level classified according to the scope and severity of the anomaly. It promptly notifies relevant personnel such as operations and maintenance personnel and developers to handle the problem through one or more combinations of methods, such as system pop-ups, SMS, and email. In addition, users can issue targeted analysis commands through the interactive interface of the results display module. After being parsed by the analysis and diagnosis module, these commands are converted into data collection and adjustment commands and sent to the data collection module to achieve dynamic optimization of the collection strategy. At the same time, the data storage module will classify and archive key data such as standardized time-series performance datasets, analysis and diagnosis results, and prediction records throughout the entire process. Users can query historical data by time, page, and other dimensions to conduct retrospective analysis of performance anomalies. Ultimately, a continuous improvement closed loop of "diagnosis-handling-optimization-re-diagnosis" is formed to ensure the stable improvement of front-end page performance.

[0041] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0042] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

[0043] The present invention and its embodiments have been described above. This description is not restrictive, and the accompanying drawings are only one embodiment of the present invention; the actual structure is not limited thereto. In conclusion, if those skilled in the art are inspired by this description and design similar structures and embodiments without departing from the spirit of the invention, such designs should fall within the protection scope of the present invention.

Claims

1. A real-time analysis system for front-end page performance diagnosis, characterized in that, include: The data acquisition module is used to collect performance-related data in real time during the operation of the front-end page; The data processing module is communicatively connected to the data acquisition module and is used to clean and standardize the acquired performance-related data. The analysis and diagnosis module is connected in communication with the data processing module and is used to perform real-time analysis based on the processed performance data to identify performance bottlenecks and abnormal issues of the front-end page. The results display module is communicatively connected to the analysis and diagnosis module and is used to present the analysis and diagnosis results to the user in a visual form. The data acquisition module and the analysis and diagnosis module also have bidirectional communication. The analysis and diagnosis module can send targeted data acquisition instructions to the data acquisition module according to real-time analysis needs, so as to realize dynamic adjustment of the acquisition range.

2. The real-time analysis system for front-end page performance diagnosis according to claim 1, characterized in that, The performance data acquisition unit is used to collect front-end page loading performance data, interaction performance data, and resource loading data. The real-time data transmission unit is used to encrypt the collected raw data and transmit it to the data processing module.

3. The real-time analysis system for front-end page performance diagnosis according to claim 2, characterized in that, The data processing module removes abnormal noise data from the collected data, converts performance data of different formats into a unified data format, and performs time-series alignment processing on the data to generate a standardized time-series performance dataset.

4. The real-time analysis system for front-end page performance diagnosis according to claim 3, characterized in that, The analysis and diagnosis module includes a data feature extraction unit and a performance problem diagnosis unit; The data feature extraction unit is used to extract key performance feature indicators from the standardized time-series performance dataset. The key performance feature indicators include page load completion time, first screen rendering time, interaction response latency, and resource loading success rate. The performance problem diagnosis unit is used for quantitative analysis and anomaly detection based on key performance characteristic indicators. It calculates the front-end page loading performance level using a comprehensive page loading performance scoring formula. The comprehensive page loading performance scoring method is as follows: Where S is the overall loading performance score, and α, β, and γ are the weighting coefficients for page load completion time, first screen rendering time, and resource loading success rate, respectively, and α+β+γ=1. This refers to the actual page load time. This refers to the standard page load time. The maximum allowed page load time. This refers to the actual first-screen rendering time. This is the standard first-screen rendering time. The maximum allowed first-screen rendering time, To improve resource loading success rate; An interaction performance anomaly is determined using an interaction response delay anomaly determination formula, which is as follows: in For actual interactive response delay, Let σ be the mean of the interaction response delay and σ be the standard deviation of the interaction response delay. When this formula is satisfied, the interaction performance is considered abnormal. Finally, the above calculation results are combined with preset performance thresholds and performance problem rule bases to determine the performance level of the front-end page and the types of performance anomalies in real time.

5. A real-time analysis system for front-end page performance diagnosis according to claim 4, characterized in that, The analysis and diagnosis module can also predict potential performance risks of the front-end page based on historical performance diagnosis data and the changing trends of key performance indicators. Specifically, it uses a performance degradation trend prediction formula to calculate the predicted values ​​of performance indicators within a preset future time period. The performance degradation trend prediction formula is as follows: in Let be the predicted value of the performance index at time t. ε(t) represents the initial performance index value, k is the performance degradation coefficient, and ε(t) is the random error term. When the predicted value exceeds the preset safety threshold, it is determined that there is a potential performance risk, and the prediction result and the basis for prediction are sent to the result display module.

6. A real-time analysis system for front-end page performance diagnosis according to claim 5, characterized in that, The results display module provides multi-dimensional visualization, including real-time trend charts of performance indicators, heat maps of performance problem distribution, and lists of abnormal problems. It also supports users in exporting specific performance data and diagnostic results.

7. A real-time analysis system for front-end page performance diagnosis according to claim 6, characterized in that, The alarm module is communicatively connected to the analysis and diagnosis module. When the analysis and diagnosis module identifies a serious performance anomaly or predicts a high-risk performance problem, it can trigger a real-time alarm. The alarm module can classify alarm levels according to the severity of performance problems, and different alarm levels correspond to different alarm methods and alarm recipients.

8. A real-time analysis system for front-end page performance diagnosis according to claim 7, characterized in that, It also includes a data storage module, which is communicatively connected to the data processing module and the analysis and diagnosis module, and is used to classify and store standardized time-series performance datasets, analysis and diagnosis results, historical performance data and prediction records. The data storage module adopts a distributed storage architecture, supports indexing and building of stored data by time dimension and page dimension, and can quickly respond to data query and traceability requests.

9. A real-time analysis system for front-end page performance diagnosis according to claim 8, characterized in that, The data acquisition module supports custom acquisition rule configuration. Users can set the acquisition frequency, acquisition accuracy and filtering conditions of key performance indicators through the result display module. The data acquisition module also has a breakpoint resume acquisition function. When the acquisition link is interrupted and resumed, it can automatically reacquire the performance data during the interruption and mark the reacquired data to ensure data integrity.

Images