Front-end performance optimization method and device, storage medium and computer program product

Abstract

The invention discloses a front-end performance optimization method and device, a storage medium and a computer program product, and relates to the technical field of testing, and the method comprises the steps: collecting original performance data of a front-end page according to a preset collection index, and carrying out the rough machining of the original performance data, and obtaining two-dimensional array data; calculating a sample average value of each type of sample data in the two-dimensional array data through a normal distribution statistical principle; carrying out weight weighting calculation on the sample average value to obtain a proportion result, and judging whether the front-end page needs to be optimized or not according to the proportion result; and when the front-end page needs to be optimized, generating an optimization report according to the proportion result and the deviation of the sample average value deviating from the boundary value, performing diagnostic analysis on automatically acquired performance data by applying a statistical principle and weight weighting calculation, and quickly and accurately processing front-end performance problems. And manual operation is greatly reduced.

Description

Technical Field

[0001] The present application relates to the field of testing technology, and in particular to a front-end performance optimization method, device, storage medium and computer program product. Background Art

[0002] With the continuous development of network technology, users' expectations for the timeliness and interactivity of web pages continue to rise, making front-end performance optimization and front-end performance optimization the focus of attention, and the industry's evaluation standards for front-end performance are also constantly improving. In most cases, optimizing front-end performance requires manual testing of front-end data on different browsers, or using basic automated scripts and analysis tools to check code execution and page rendering, and then optimizing the performance of the front-end page based on the data test results of the front-end data. However, testing and optimizing front-end performance through manual testing or basic automated scripts is inefficient, making it difficult to accurately locate performance bottlenecks, and even resulting in significant errors.

[0003] Therefore, how to quickly and accurately handle front-end performance issues to optimize front-end page performance has become an urgent problem to be solved in this application.

[0004] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0005] The main purpose of this application is to provide a front-end performance optimization method, device, storage medium and computer program product, aiming to solve the technical problem of how to quickly and accurately handle front-end performance problems to optimize front-end page performance.

[0006] To achieve the above objectives, the present application proposes a front-end performance optimization method, which includes:

[0007] Collecting the original performance data of the front-end page according to the preset collection index, and roughly processing the original performance data to obtain two-dimensional array data;

[0008] Calculate the sample average of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution;

[0009] Performing weighted calculation on the sample average values ​​to obtain a percentage result, and judging whether the front-end page needs to be optimized according to the percentage result;

[0010] When the front-end page needs to be optimized, an optimization report is generated according to the proportion result and the deviation value of the sample average value from the boundary value.

[0011] In one embodiment, the step of collecting the original performance data of the front-end page according to the preset collection index and roughly processing the original performance data to obtain the two-dimensional array data includes:

[0012] Develop and encapsulate a front-end embedded module based on the characteristics of the front-end page, and embed the front-end embedded module into the front-end page;

[0013] Collecting original performance data according to the front-end embedded module and pre-set collection indicators;

[0014] The original performance data is roughly processed and encoded to obtain two-dimensional array data.

[0015] In one embodiment, the step of calculating the sample mean value of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution includes:

[0016] Calculate the standard deviation of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution;

[0017] Calculate the upper limit and lower limit of each type of sample data in the two-dimensional array data according to the standard deviation;

[0018] The two-dimensional array data is filtered based on the upper limit value and the lower limit value, and a sample average value of each type of sample data in the filtered two-dimensional array data is calculated.

[0019] In one embodiment, the step of performing weighted calculation on the sample average value to obtain a percentage result, and judging whether the front-end page needs to be optimized according to the percentage result includes:

[0020] Calculate the left boundary value and the right boundary value of each type of sample data in the filtered two-dimensional array data according to the sample average value;

[0021] Obtain the weight calculation method in the expert review database;

[0022] The weighted calculation method is used to calculate the sample average value to obtain a percentage result;

[0023] Whether the front-end page needs to be optimized is determined based on the proportion result, the left boundary value, and the right boundary value.

[0024] In one embodiment, the step of determining whether the front-end page needs to be optimized according to the proportion result, the left boundary value, and the right boundary value includes:

[0025] Taking the sample average value as input comparison data, judging whether the type of sample data falls within the range of the left boundary value and the right boundary value according to the proportion result and the input comparison data;

[0026] If the input comparison data is greater than the right boundary value, the type sample data does not fall within the range of the left boundary value and the right boundary value, and the front-end page needs to be optimized;

[0027] If the input comparison data is less than or equal to the right boundary value, the category sample data falls within the range of the left boundary value and the right boundary value, and the front-end page does not need to be optimized.

[0028] In one embodiment, when the front-end page needs to be optimized, the step of generating an optimization report according to the proportion result and the deviation value of the sample average value from the boundary value includes:

[0029] When the front-end page needs to be optimized, the deviation value of the sample average value from the boundary value is calculated;

[0030] Obtaining a deviation size sorting method according to the deviation value and the proportion result;

[0031] List the front-end page performance problems according to the deviation size sorting method, and diagnose the front-end page performance problems to obtain a diagnosis result;

[0032] An optimization report is generated based on the diagnosis results and the front-end page performance issues.

[0033] In one embodiment, the weighted calculation method and the sample average value are used to calculate the percentage result, and after the step of determining whether the front-end page needs to be optimized according to the percentage result, the following steps are further included:

[0034] When the front-end page does not need to be optimized, the front-end page is monitored in real time according to pre-set collection indicators, and the monitoring results are displayed in a visual manner.

[0035] In addition, to achieve the above-mentioned purpose, the present application also proposes a front-end performance optimization device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, and the computer program is configured to implement the steps of the front-end performance optimization method described above.

[0036] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the front-end performance optimization method described above are implemented.

[0037] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the front-end performance optimization method described above are implemented.

[0038] One or more technical solutions proposed in this application have at least the following technical effects:

[0039] Automatically collect original performance data according to pre-set collection indicators to avoid the tedious process of manual collection one by one, and roughly process the original performance data to obtain two-dimensional array data; calculate the sample average of each type of sample data in the two-dimensional array data through the normal distribution statistical principle, objectively reflect the concentration trend of the data, provide a basis for subsequent analysis of the front-end page performance, and apply the normal distribution statistical principle to improve the analysis accuracy; based on the weighted calculation method and the sample average calculation ratio result, perform differentiated processing on different performance indicators, judge whether the front-end page needs to be optimized according to the ratio result, and realize the automation of front-end page performance optimization decision; when the front-end page needs to be optimized, judge the deviation size sorting method according to the ratio result, and generate an optimization report. Through automatic data collection and processing, data analysis using statistical principles, and combined with weighted calculation, the front-end performance problems are quickly and accurately handled, which greatly reduces manual and manual operations and improves the efficiency and effect of front-end performance optimization. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0041] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0042] Figure 1 A schematic diagram of the first embodiment of the front-end performance optimization method provided by the present application;

[0043] Figure 2 It is a schematic diagram of two-dimensional array data;

[0044] Figure 3 This is a logic implementation diagram for filtering a two-dimensional array data set;

[0045] Figure 4 A schematic diagram of a second embodiment of the process flow of the front-end performance optimization method provided by the present application;

[0046] Figure 5The performance optimization implementation logic diagram provided for the front-end performance optimization method of this application;

[0047] Figure 6 The front-end performance optimization method provided in this application is a front-end performance optimization personnel operation implementation logic diagram;

[0048] Figure 7 This is a schematic diagram of the module structure of the front-end performance optimization device according to an embodiment of the present application;

[0049] Figure 8 This is a schematic diagram of the device structure of the hardware operating environment involved in the front-end performance optimization method in the embodiment of the present application.

[0050] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0051] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0052] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0053] The main solution of the embodiment of the present application is: in the data collection stage, the original performance data is collected through the pre-set collection indicators, and the original performance data is roughly processed to obtain two-dimensional array data. In the data cleaning stage, the sample average value of each type of sample data in the two-dimensional array data is calculated by the normal distribution statistical principle, and the two-dimensional array data is cleaned using the normal distribution statistical principle. In the diagnostic evaluation stage, the proportion result is calculated according to the weighted calculation method and the sample average value, and it is judged whether the front-end page needs to be optimized according to the proportion result. When the front-end page needs to be optimized, the deviation size sorting method is judged according to the proportion result, and an optimization report is generated.

[0054] The embodiments of the present application take into account that: with the continuous development of network technology, users' expectations for the timeliness and interactivity of web pages continue to rise, making front-end performance optimization and front-end performance optimization the focus of attention, and the industry's evaluation standards for front-end performance are also constantly improving. In most cases, optimizing front-end performance requires manual testing of front-end data on different browsers, or using basic automation scripts and analysis tools to check code execution and page rendering, and then optimizing the performance of the front-end page based on the data test results of the front-end data. However, the efficiency of testing and optimizing front-end performance through manual testing or basic automation scripts is low, and it is difficult to accurately locate performance bottlenecks, and even significant errors occur.

[0055] Therefore, this application provides a solution, which automatically collects the original performance data according to the pre-set collection indicators, avoids the tedious process of manual collection one by one, and roughly processes the original performance data to obtain two-dimensional array data; calculates the sample average value of each type of sample data in the two-dimensional array data through the normal distribution statistical principle, objectively reflects the concentration trend of the data, and provides a basis for the subsequent analysis of the front-end page performance, and applies the normal distribution statistical principle to improve the analysis accuracy; based on the weighted calculation method and the sample average calculation ratio result, the different performance indicators are differentiated, and the front-end page is judged according to the ratio result whether it needs to be optimized, so as to realize the automation of the front-end page performance optimization decision; when the front-end page needs to be optimized, the deviation size sorting method is judged according to the ratio result, and an optimization report is generated. Through the automatic collection and processing of data, the application of statistical principles for data analysis, and the combination of weighted calculation, the rapid and accurate processing of front-end performance problems is achieved, which greatly reduces the manual and manual operations and improves the efficiency and effect of front-end performance optimization.

[0056] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, an intelligent engine, etc. The following takes the intelligent engine as an example to illustrate this embodiment and the following embodiments.

[0057] Based on this, the present application embodiment provides a front-end performance optimization method, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the front-end performance optimization method of the present application.

[0058] In this embodiment, the front-end performance optimization method includes steps S10 to S40:

[0059] Step S10, collecting original performance data of the front-end page according to a preset collection index, and roughly processing the original performance data to obtain two-dimensional array data;

[0060] Before collecting raw performance data, determine the performance collection indicators, sampling frequency, and sampling time to be collected. Among them, the performance collection indicators are divided into 21 subcategories, mainly including: DNS resolution time, TCP connection time, request sending time, request receiving time, DOM parsing time, page loading time, DOM loading time, DOMLoad event time, white screen time, first screen time, total resource download time, etc.

[0061] The original performance data is automatically collected according to the sampling frequency and sampling time. In the early stage of data processing, the reliability and integrity of the data are mainly integrated and preprocessed, and the large amount of collected data is carefully sorted and summarized. After rough processing, classification and aggregation, a two-dimensional array data is produced, and this data is encoded. Figure 2 As shown, Figure 2 It is a schematic diagram of two-dimensional array data. Each row of the two-dimensional array data represents a different sample category, and each column represents a data point of a sample. Among them, the one-dimensional name is divided by DNS resolution time, TCP connection time, request sending time, request receiving time, DOM parsing time, page loading time, DOM loading time, DOMLoad event time, white screen time, first screen time, total resource download time, etc.

[0062] Step S20, calculating the sample average value of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution;

[0063] The statistical principle of normal distribution is specifically the 2σ principle, which aims to calculate the sample mean of each type of sample data in the two-dimensional array data through the 2σ principle. The mean and standard deviation of each type of sample data are calculated according to the 2σ principle, and the data points in the range of [μ-2σ,μ+2σ] are screened out. The sample mean of each type of sample data is calculated using the screened data points.

[0064] Step S30, performing weighted calculation on the sample average value to obtain a percentage result, and judging whether the front-end page needs to be optimized according to the percentage result;

[0065] The weighted calculation method is to assign a weight value to each indicator according to the importance of the collection indicators of the front-end page. On the premise of ensuring that the total weight value is 1, the sample average value is used as the comparison data to calculate the total weighted score of each type of sample data point in the two-dimensional array data, and the proportion result is further obtained through the total weighted score.

[0066] The proportion results are used to check whether the proportions of various categories are balanced. If the proportion of a certain category is too high or too low, it may indicate that resources are unevenly allocated or some aspects are neglected. If the proportion distribution is unbalanced, it may be necessary to re-evaluate resource allocation and optimize the categories with low proportions. Therefore, the proportion results can be used to make a global judgment. In order to ensure the accuracy of the front-end page detection, it is also necessary to combine the deviation value for further analysis to obtain more accurate optimization strategies and detection results.

[0067] Step S40, when the front-end page needs to be optimized, an optimization report is generated according to the proportion result and the deviation value of the sample average value from the boundary value.

[0068] Based on the percentage results, further determine the impact of each type of sample data on the front-end page performance, and sort them based on the deviation value of the sample average from the boundary value. Analyze the sample data type with the largest deviation weight, and list the performance issues that may be caused by this type of sample data on the front-end page. For each performance problem, record the deviation size, nature of the problem, and impact. Perform detailed diagnostic analysis on each performance problem to determine the root cause of the problem and its impact on the front-end page performance. Generate an optimization report based on the analysis results.

[0069] This embodiment provides a front-end performance optimization method, which automatically collects original performance data according to pre-set collection indicators, avoids the tedious process of manual collection one by one, and roughly processes the original performance data to obtain two-dimensional array data; calculates the sample average value of each type of sample data in the two-dimensional array data through the normal distribution statistical principle, objectively reflects the concentration trend of the data, provides a basis for subsequent analysis of the front-end page performance, and applies the normal distribution statistical principle to improve the analysis accuracy; based on the weighted calculation method and the sample average calculation ratio result, different performance indicators are differentiated, and it is judged whether the front-end page needs to be optimized according to the ratio result to realize the automation of front-end page performance optimization decision; when the front-end page needs to be optimized, the deviation size sorting method is judged according to the ratio result, and an optimization report is generated. By automatically collecting and processing data, using statistical principles for data analysis, and combining weighted calculation, the front-end performance problem is quickly and accurately handled, which greatly reduces manual and manual operations and improves the efficiency and effect of front-end performance optimization.

[0070] In a feasible implementation, step S10 may include steps S11 to S13:

[0071] Step S11, encapsulating the front-end embedded module based on the front-end page characteristics, and embedding the front-end embedded module into the front-end page;

[0072] Design SDK embedding module and JS embedding module based on the collection indicators that need to be monitored and analyzed determined by the front-end page, and analyze the factors that may affect the performance of the front-end page.

[0073] Among them, use HTML5 performance API to develop SDK embedded modules to realize data collection, performance monitoring and analysis functions. Use JavaScript to write performance data collection and monitoring logic to develop JS embedded modules, and write unit tests and integration tests to ensure the correctness and performance of SDK and JS embedded modules

[0074] The intelligent engine introduces SDK and JS embedded modules into the front-end page, calls the functions of the embedded modules according to the interfaces of the embedded modules, and collects and monitors performance data. It adjusts the layout and style of the front-end page to ensure the consistency and aesthetics of the embedded modules and the front-end page.

[0075] It should be noted that the performance feature of HTML5 provides a new API that allows developers to monitor and analyze the performance of web pages. It can be used to collect detailed information about page loading, resource loading, user interaction, etc., thereby helping developers optimize web page performance.

[0076] Step S12, collecting original performance data according to the front-end embedded module and pre-set collection indicators;

[0077] The pre-set collection indicators are divided into 21 small categories, including: DNS resolution time, TCP connection time, request sending time, request receiving time, DOM parsing time, page loading completion time, DOM loading completion time, DOMLoad event time, white screen time, first screen time, total resource download time, etc.

[0078] According to the pre-set collection indicators, the front-end embedded module is used to collect data. The front-end embedded module collects performance data related to the collection indicators by calling the relevant methods of the HTML5 performance API. For example, use performance.getEntriesByType('resource') to collect resource loading time, and use performance.mark and performance.measure to record the time point of a specific event.

[0079] The collected raw performance data can be stored in local storage (such as localStorage), or sent to the data processing center of the intelligent engine through Ajax requests. The raw performance data can also be stored permanently by establishing a database. When the collected indicators meet the preset conditions or reach the preset collection time, the collection process is stopped to obtain the raw performance data that meets the preset conditions.

[0080] Step S13, roughly processing and encoding the original performance data to obtain two-dimensional array data.

[0081] The process of rough processing of raw performance data includes: removing invalid data, outliers and noise generated during the collection process; converting and formatting the collected data for unified processing; and selecting data that needs further analysis based on preset screening rules.

[0082] To encode the raw performance data after rough processing, it is first necessary to determine the encoding rules according to the characteristics of the raw performance data and the needs of subsequent analysis, and then encode the data after rough processing using the determined encoding rules.

[0083] Arrange the encoded data in time series to form data columns. According to the preset collection indicators, organize the relevant data into data rows, and combine the data rows and data columns to form a two-dimensional array, where each column represents a data snapshot at a time point and each row represents a collection indicator.

[0084] In this embodiment, a front-end embedded module is developed and packaged according to the characteristics of the front-end page, and the front-end embedded module is embedded in the front-end web page. The developed and packaged front-end embedded module can realize the automatic collection of performance data, avoid the repeated writing of collection code each time the test is performed, and improve the test efficiency. The original performance data is collected through the front-end embedded module and the pre-set collection indicators, which can ensure the consistency and standardization of the collection process and avoid inaccurate test results caused by differences in human operations. The original performance data is roughly processed and encoded to obtain two-dimensional array data, so that the data is structured, which is convenient for subsequent data analysis and performance testing. Structured data is conducive to the processing of automated tools, improves the efficiency of performance testing, and realizes accurate testing of front-end web pages.

[0085] In a feasible implementation, step S20 may include steps S21 to S23:

[0086] Step S21, calculating the standard deviation of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution;

[0087] Based on the 2σ principle in data statistics, the two-dimensional data obtained by rough data processing is further processed to obtain refined data that meets the requirements. First, the average value of each type of data is calculated. Taking DNS resolution time as an example, the calculation process of the sample average value of DNS resolution time according to the 2σ principle is explained in detail.

[0088] First, calculate the average DNS resolution time, the calculation formula is: μ = (Σx i) / n, where μ represents the average DNS resolution time, Σx i It is the sum of all sample values ​​(xi) of the collected DNS resolution time, and n is the sample size.

[0089] Furthermore, the square of the difference between each sample and the average value of DNS resolution time Σ(x i -μ)2, and the mean (variance) of these squared deviations Var = (1 / n)*Σ(x i-μ)2. Take the square root of the variance to get σ (standard deviation). According to this logic, calculate the standard deviation of each sample data to get the standard deviation of all sample types.

[0090] Step S22, calculating the upper limit and lower limit of each type of sample data in the two-dimensional array data according to the standard deviation;

[0091] Based on the 2σ principle, the upper limit μ+2σ and lower limit μ-2σ of different types of data are obtained.

[0092] Step S23, filtering the two-dimensional array data based on the upper limit value and the lower limit value, and calculating the sample average value of each type of sample data in the filtered two-dimensional array data.

[0093] According to the upper and lower limits, set a filtering range for each type of sample data. Figure 3 As shown, Figure 3 This is a logical implementation diagram for filtering a two-dimensional array data set. The filter range is defined as the interval between the upper limit and the lower limit, that is:

[0094] Filter range = [L i ,U i ]

[0095] Among them, L i and U i are the upper and lower limits of the i-th type of sample data respectively.

[0096] For each column (i.e. each sample) in the two-dimensional array, check whether each row (i.e. each collection indicator) is within the corresponding filter range. If all indicators are within the filter range, the sample is retained; if any indicator is not within the filter range, the sample is excluded.

[0097] For each type of sample data, calculate the average value of the filtered samples. The calculation formula for the average value of the filtered samples is as follows:

[0098]

[0099] Among them, μ ij The average value of the i-th type of sample data in the two-dimensional array data;

[0100] n' represents the sample size after filtering, and n represents the sample size before filtering. Represents the sample data value after filtering, that is, the final sample average.

[0101] In this embodiment, according to the calculated upper and lower limits, filtering conditions are set for each type of sample data to exclude sample data that exceeds the upper and lower limits. By filtering out abnormal values, the impact of these values ​​on the performance test results can be reduced, and the accuracy of the data can be improved. By limiting the data range, the performance data under normal operating conditions can be focused on, so as to more accurately evaluate the actual performance of the front-end page. The automated calculation and filtering process reduces manual intervention, speeds up data processing, and thus improves the efficiency of performance testing. Through accurate sample averages, performance bottlenecks can be more accurately identified, providing data support for performance optimization.

[0102] Based on the first embodiment of the present application, the second embodiment of the present application is proposed. In the second embodiment of the present application, the same or similar contents as those of the above-mentioned embodiment 1 can be referred to the above introduction, and will not be repeated in the following.

[0103] On this basis, please refer to Figure 4 , Figure 4 A flow chart of the second embodiment of the front-end performance optimization method of the present application.

[0104] In this embodiment, the step S30 of performing weighted calculation on the sample average value to obtain a proportion result, and judging whether the front-end page needs to be optimized according to the proportion result may include steps S31 to S34:

[0105] Step S31, calculating the left boundary value and the right boundary value of each type of sample data in the filtered two-dimensional array data according to the sample average value;

[0106] Specifically, in a first feasible implementation of step S31, step S31 may include:

[0107] First, calculate the sample average value based on each type of sample data in the filtered two-dimensional array data. Calculate the left boundary value and right boundary value of each type of sample data. The calculation process is as follows:

[0108] Select a confidence level, such as 95%, to determine the range of the left and right boundary values. For each sample data, use the previously calculated standard deviation σ to measure the degree of dispersion of the data. Using the standard deviation and mean, calculate the left boundary value L and the right boundary value U according to the following formula:

[0109]

[0110] Where t is the critical value of the distribution corresponding to the selected confidence level, σ is the standard deviation, and n' represents the sample size after filtering. is the sample mean.

[0111] Specifically, in a second feasible implementation of step S31, step S31 may include: recalculating the standard value and variance of each type of sample data in the filtered two-dimensional array data, and obtaining the left boundary value and the right boundary value of different types of data based on the 2σ principle.

[0112] It is understandable that the upper limit value and the lower limit value of each type of sample data in the unfiltered two-dimensional array data are inconsistent with the left boundary value and the right boundary value recalculated after filtering.

[0113] Step S32, obtaining a weighted calculation method in an expert review database;

[0114] The weight calculation method is obtained from the expert review database. These weight rules reflect the importance of different performance indicators in the overall performance evaluation. The weighting rules of the 21 data are derived from expert review, where 100% = user design category * 2 + pure technology stack category. The user development and design category is twice the weight of the ordinary pure technology category, and is divided into 21 subcategories with a total weight of 100%.

[0115] It should be noted that there are two sources of baseline data for the time consumption of the comparison library. One is based on data extracted from testing experts and user experience, which serves as the basic data for the initial operation of the program. The other is that during the entire operation cycle of the program, self-learning will be performed, and past historical data will be deeply learned and self-optimized.

[0116] Step S33, using the weighted calculation method to calculate the sample average value to obtain a percentage result;

[0117] The weights obtained from the expert review database are used to perform weighted calculation on the sample average of each type of sample data in the filtered two-dimensional array data. Through weighted calculation, the proportion of each type of sample data is obtained. The specific calculation process is as follows:

[0118] First, the weight values ​​of each type of sample data are extracted from the expert review database. These weight values ​​are determined by experts based on the importance of various types of sample data on the overall performance, and are extracted based on test experts and user experience data. They serve as the basic data for the initial operation of the program. In addition, during the entire operation cycle of the program, self-learning will be carried out, and deep learning of previous historical data will be carried out for self-optimization.

[0119] Furthermore, the sample average is multiplied by the corresponding weight value to obtain the weighted sample average. The calculation formula is as follows:

[0120] Weighted sample average = sample average × weight value

[0121] Add up all weighted sample averages to get the weighted sum. This sum will be used as the basis for calculating the percentage. For each type of sample data's weighted sample average, calculate its percentage in the weighted sum. For example, if the weighted sample average of data category A is 15 and the weighted sum is 100, then the percentage of data category A is 15÷100×100%=15%. Similarly, calculate the percentage of each type of sample data in the two-dimensional array data.

[0122] Step S34, judging whether the front-end page needs to be optimized according to the proportion result, the left boundary value, and the right boundary value.

[0123] like Figure 5 As shown, Figure 5 The performance optimization implementation logic diagram provided for the front-end performance optimization method of this application, each sample data has a left and right boundary value. The sample data to the left of the left boundary value is at the leading level and does not need to be optimized. The value between the left and right boundaries is a normal value and does not need to be optimized. The sample data to the right of the right boundary value needs to be optimized, and the range size exceeding the right boundary value should be recorded.

[0124] Specifically, in a feasible implementation manner, step S34 may include steps S341 to S343:

[0125] Step S341, taking the sample average value as input comparison data, and judging whether the type of sample data falls within the range of the left boundary value and the right boundary value according to the proportion result and the input comparison data;

[0126] The sample average value obtained after data filtering is used as the input comparison data. For each type of sample data, the sample average value is compared with the left boundary value and the right boundary value in combination with the weight in the corresponding proportion result. If the sample average value is between the left boundary value and the right boundary value, the sample data is considered to fall within the acceptable range. If the sample average value is lower than the left boundary value or higher than the right boundary value, the sample data is considered to be beyond the acceptable range.

[0127] For example, there is a type of data A, which accounts for 25.86%, has a weight of 0.1, and an average value of 2.11. The left and right boundary values ​​calculated based on the confidence level are 20% and 30% respectively. Multiply the average value by the weight: 2.11×0.1×100%=21.1%. Therefore, data A falls between the left and right boundary values, and this sample data does not need to be optimized. For another example, there is a type of data B, which accounts for 5.11%, has a weight of 0.1, and an average value of 0.11. According to the recalculated standard deviation and variance, the left and right boundary values ​​are 0.009 and 0.89 respectively. Therefore, data B falls between the left and right boundary values, and this sample data does not need to be optimized.

[0128] It is understandable that the reason for combining the weights in the proportion results is that there are two ways to calculate the left and right boundary values. The weights need to be combined to compare the left and right boundary values ​​calculated using the confidence level to keep the detection results accurate.

[0129] Step S342: if the input comparison data is greater than the right boundary value, the type sample data does not fall within the range of the left boundary value and the right boundary value, and the front-end page needs to be optimized;

[0130] If the input comparison data of the type sample data exceeds the range of the right boundary value, it is necessary to determine the specific situation of the sample data exceeding the right boundary value and analyze its specific impact on the front-end performance. And record the range size exceeding the right boundary value.

[0131] Step S343: If the input comparison data is less than or equal to the right boundary value, the category sample data falls within the range of the left boundary value and the right boundary value, and the front-end page does not need to be optimized.

[0132] In this embodiment, according to the weighted calculation method obtained from the expert review database, and the sample average value to calculate the left boundary value and the right boundary value, by excluding outliers and paying attention to data beyond expectations, the quality of the data set can be improved and the test results can be made more accurate. The right boundary value provides a clear performance standard, and it is clearer whether the test results meet expectations, reducing the errors caused by subjective judgment. The optimization measures are directly targeted at specific problems, and the test results can more accurately reflect the solution of the problem and improve the accuracy of problem location. By optimizing the data beyond the right boundary value, a performance baseline can be established or updated to provide a more accurate reference standard for future tests.

[0133] Based on the first embodiment and / or the second embodiment of the present application, the third embodiment of the present application is proposed. In the third embodiment of the present application, the same or similar contents as those of the first embodiment and / or the second embodiment can be referred to the above introduction, and will not be repeated in the following.

[0134] In this embodiment, when the front-end page needs to be optimized, the step S40 of judging the deviation size sorting method according to the proportion result and generating an optimization report may include steps S41 to S44:

[0135] Step S41, when the front-end page needs to be optimized, calculating the deviation value of the sample average value from the boundary value;

[0136] In the case where the category sample data exceeds the right boundary value range, the specific situation of the sample data exceeding the right boundary value is determined, and its specific impact on the front-end performance is analyzed, and the range size of the range exceeding the right boundary value is recorded. Therefore, according to the specific situation of the sample data exceeding the right boundary value determined and the range size of the recorded right boundary value, the deviation value of the sample average value from the right boundary value is calculated. For the sample data exceeding the right boundary value, the time point of data collection, environmental conditions, user behavior and other factors are checked according to the specific situation of the sample data exceeding the right boundary value determined and the range size of the recorded right boundary value to determine the reasons for the data exceeding the normal range. The purpose of the analysis is to understand how this data affects the front-end performance, for example, whether it is due to network delays, long server response time, slow resource loading, etc.

[0137] Step S42, obtaining a deviation size sorting method according to the deviation value and the proportion result;

[0138] After the analysis is completed, the sample data is arranged from large to small according to the deviation value from the right boundary value, and a deviation size sorting method is obtained from the largest deviation size to the smallest deviation size.

[0139] It should be noted that the deviation size sorting method also considers the weight in the proportion result. The final sample data is arranged in such a way that the data with larger deviation and higher weight are placed in the front row, and the data with smaller deviation and lower weight are placed in the back row. The data in the front row represent the most serious front-end page performance problems. By analyzing the sample data with larger deviation, the performance problems of the front-end page can be effectively solved.

[0140] Step S43, listing the front-end page performance problems according to the deviation size sorting method, and diagnosing the front-end page performance problems to obtain a diagnosis result;

[0141] According to the sorted deviation data, the corresponding front-end page performance issues are listed. Each performance issue should have a unique identifier for subsequent diagnosis and tracking. For each performance issue, a detailed diagnostic analysis is performed, including performance monitoring, code review, resource analysis, user experience testing and other aspects.

[0142] Performance monitoring mainly uses front-end web performance detection tools such as Google Lighthouse, WebPageTest, PageSpeed ​​Insights, etc. to monitor key indicators such as front-end page loading time, response time, resource loading order, rendering performance, etc.; code review mainly reviews the front-end code (HTML, CSS, JavaScript) to find code problems that may affect performance.

[0143] For each performance issue, document the diagnostic results, including the nature of the issue, scope of impact, possible causes, and recommended solutions, and present them in a clear, easy-to-understand format.

[0144] Step S44, generating an optimization report based on the diagnosis result and the front-end page performance problem.

[0145] Summarize all the results obtained during the diagnosis process, including performance monitoring data, code review findings, resource analysis reports, and user experience test results. Under the premise of ensuring that all results contain sufficient information, based on the diagnosis results and the weights in the expert review database, determine which performance issues are the main factors affecting user experience and page performance, provide detailed solutions, and generate optimization reports.

[0146] It should be noted that when the front-end page does not need to be optimized, the front-end page is monitored in real time according to the pre-set collection indicators, and the monitoring results are displayed in a visual manner to ensure the continuous high performance of the front-end page and to promptly discover performance problems of the front-end page.

[0147] In this embodiment, the sample average value is used as the input comparison data to ensure the consistency and comparability of the data. By comparing the proportion results with the left and right boundary values, it can be directly determined whether optimization is needed. If the proportion result is greater than the right boundary value, it is clearly indicated that the front-end page needs to be optimized. If the proportion result is less than or equal to the right boundary value, it is considered that the front-end page performance is within an acceptable range and does not need to be optimized, avoiding unnecessary optimization of pages that are running normally, saving time and resources. By judging the deviation size sorting method based on the proportion results, it can be determined which performance issues are the most serious and need to be handled first, thereby improving processing efficiency. Combined with automated boundary value judgment and priority sorting, performance issues can be quickly identified and responded to.

[0148] To better explain the implementation logic of the front-end performance optimization method provided by this application, please refer to Figure 6 , Figure 6 A logic diagram for front-end performance optimization personnel to implement the front-end performance optimization method provided in this application.

[0149] First, the front-end performance optimizer integrates the front-end SDK or JS module provided by this application into the web page source code and starts capturing performance data. During the setup process, specify the specific URL of the intelligent analysis engine server and define the list of pages to be monitored, i.e., the whitelist.

[0150] Furthermore, in the background management interface, that is, the B-side of the intelligent engine system, the front-end performance optimization personnel log in and gain a comprehensive insight into the page execution efficiency, and use the unique single-button diagnostic tool provided by this application to start an in-depth analysis of the front-end performance. All monitoring data and diagnostic results will be securely stored to ensure the integrity of the information.

[0151] Furthermore, after starting the in-depth analysis of the front-end performance, the intelligent engine collects the original performance data according to the pre-set collection indicators, avoiding the tedious process of manual collection one by one, and roughly processes the original performance data to obtain two-dimensional array data; the sample average value of each type of sample data in the two-dimensional array data is calculated through the normal distribution statistical principle, objectively reflecting the concentration trend of the data, providing a basis for the subsequent analysis of the front-end page performance, and applying the normal distribution statistical principle to improve the analysis accuracy; based on the weighted calculation method and the sample average calculation ratio result, different performance indicators are differentiated, and it is judged whether the front-end page needs to be optimized according to the ratio result, so as to realize the automation of front-end page performance optimization decision; when the front-end page needs to be optimized, the deviation size sorting method is judged according to the ratio result, and an optimization report is generated.

[0152] The intelligent engine collects and processes data automatically, uses statistical principles to analyze data, and combines weighted calculations to achieve rapid and accurate processing of front-end performance issues, greatly reducing labor and manual operations, and improving the efficiency and effectiveness of front-end performance optimization. The intelligent engine stores the optimization report, and front-end performance optimizers can obtain the optimization report by logging into the background management interface of the B-side of the intelligent engine system.

[0153] This application also provides a front-end performance optimization device, please refer to Figure 7 , the front-end performance optimization device comprises:

[0154] The data collection module 10 is used to collect the original performance data of the front-end page according to the preset collection index, and roughly process the original performance data to obtain two-dimensional array data;

[0155] The original performance data is automatically collected according to the sampling frequency and sampling time. In the early stage of data processing, the reliability and integrity of the data are mainly integrated and preprocessed, and the large amount of data collected is carefully sorted and summarized. After rough processing, classification and aggregation, a two-dimensional array data is produced, and this data is encoded.

[0156] A data cleaning module 20, used for calculating the sample average value of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution;

[0157] The statistical principle of normal distribution is specifically the 2σ principle, which aims to calculate the sample mean of each type of sample data in the two-dimensional array data through the 2σ principle. The mean and standard deviation of each type of sample data are calculated according to the 2σ principle, and the data points in the range of [μ-2σ,μ+2σ] are screened out. The sample mean of each type of sample data is calculated using the screened data points.

[0158] The test diagnosis module 30 is used to perform weighted calculation on the sample average value to obtain a percentage result, and determine whether the front-end page needs to be optimized based on the percentage result. When the front-end page needs to be optimized, an optimization report is generated based on the percentage result and the deviation value of the sample average value from the boundary value.

[0159] Using the sample average as the comparison data, calculate the total weighted score of each type of sample data point in the two-dimensional array data, and further obtain the percentage result through the total weighted score. The percentage result is used to determine whether the front-end page needs to be optimized.

[0160] Based on the percentage results, determine the deviation size of each performance issue. The deviation size is calculated by comparing the difference between the percentage results of each issue and the right boundary value. Sort by deviation size, starting with the issue with the largest deviation. For each performance issue, record its deviation size, nature of the issue, and impact. Perform a detailed diagnostic analysis on each performance issue to determine the root cause of the issue and its impact on the front-end page performance. Generate an optimization report based on the analysis results.

[0161] The front-end performance optimization device provided by the present application adopts the front-end performance optimization method in the above-mentioned embodiment, and can solve the technical problem of front-end performance optimization. Compared with the prior art, the beneficial effects of the front-end performance optimization device provided by the present application are the same as the beneficial effects of the front-end performance optimization method provided by the above-mentioned embodiment, and other technical features in the front-end performance optimization device are the same as the features disclosed in the above-mentioned embodiment method, which will not be described in detail here.

[0162] The present application provides a front-end performance optimization device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the front-end performance optimization method in the above-mentioned embodiment one.

[0163] Reference below Figure 8, which shows a schematic diagram of the structure of a front-end performance optimization device suitable for implementing the embodiment of the present application. The front-end performance optimization device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 8 The front-end performance optimization device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0164] like Figure 8 As shown, the front-end performance optimization device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the front-end performance optimization device are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the front-end performance optimization device to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows a front-end performance optimization device with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or provided instead.

[0165] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0166] The front-end performance optimization device provided by the present application adopts the front-end performance optimization method in the above embodiment to solve the technical problem of front-end performance optimization. Compared with the prior art, the beneficial effects of the front-end performance optimization device provided by the present application are the same as the beneficial effects of the front-end performance optimization method provided by the above embodiment, and the other technical features in the front-end performance optimization device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0167] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0168] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0169] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the front-end performance optimization method in the above-mentioned embodiment.

[0170] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0171] The above-mentioned computer-readable storage medium may be included in the front-end performance optimization device; or it may exist independently without being assembled into the front-end performance optimization device.

[0172] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the front-end performance optimization device, the front-end performance optimization device: collects the original performance data of the front-end page according to the pre-set collection indicators, and roughly processes the original performance data to obtain two-dimensional array data; calculates the sample average value of each type of sample data in the two-dimensional array data through the normal distribution statistical principle; performs weighted calculation on the sample average value to obtain the proportion result, and judges whether the front-end page needs to be optimized according to the proportion result; when the front-end page needs to be optimized, generates an optimization report according to the proportion result and the deviation value of the sample average value from the boundary value.

[0173] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0174] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0175] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0176] The readable storage medium provided in this application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned front-end performance optimization method, and can solve the technical problem of front-end performance optimization. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as the beneficial effects of the front-end performance optimization method provided in the above-mentioned embodiment, and will not be repeated here.

[0177] The present application also provides a computer program product, including a computer program, which implements the steps of the front-end performance optimization method as described above when executed by a processor.

[0178] The computer program product provided by this application can solve the technical problem of front-end performance optimization. Compared with the prior art, the beneficial effects of the computer program product provided by this application are the same as the beneficial effects of the front-end performance optimization method provided by the above embodiment, which will not be repeated here.

[0179] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A front-end performance optimization method, characterized in that: The method comprises: Collecting the original performance data of the front-end page according to the preset collection index, and roughly processing the original performance data to obtain two-dimensional array data; Calculate the sample average of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution; Performing weighted calculation on the sample average values ​​to obtain a percentage result, and judging whether the front-end page needs to be optimized according to the percentage result; When the front-end page needs to be optimized, an optimization report is generated according to the proportion result and the deviation value of the sample average value from the boundary value.

2. The method according to claim 1, characterized in that The step of collecting the original performance data of the front-end page according to the preset collection index and roughly processing the original performance data to obtain the two-dimensional array data includes: Encapsulating the front-end embedded module based on the front-end page characteristics, and embedding the front-end embedded module into the front-end page; Collecting original performance data according to the front-end embedded module and pre-set collection indicators; The original performance data is roughly processed and encoded to obtain two-dimensional array data.

3. The method according to claim 1, characterized in that The step of calculating the sample average of each type of sample data in the two-dimensional array data by using the normal distribution statistical principle comprises: Calculate the standard deviation of each type of sample data in the two-dimensional array data by using the statistical principle of normal distribution; Calculate the upper limit and lower limit of each type of sample data in the two-dimensional array data according to the standard deviation; The two-dimensional array data is filtered based on the upper limit value and the lower limit value, and a sample average value of each type of sample data in the filtered two-dimensional array data is calculated.

4. The method according to claim 1, characterized in that The step of performing weighted calculation on the sample average value to obtain a percentage result, and judging whether the front-end page needs to be optimized according to the percentage result comprises: Calculate the left boundary value and the right boundary value of each type of sample data in the filtered two-dimensional array data according to the sample average value; Obtain the weight calculation method in the expert review database; The weighted calculation method is used to calculate the sample average value to obtain a percentage result; Whether the front-end page needs to be optimized is determined based on the proportion result, the left boundary value, and the right boundary value.

5. The method according to claim 4, characterized in that The step of judging whether the front-end page needs to be optimized according to the proportion result, the left boundary value, and the right boundary value comprises: Taking the sample average value as input comparison data, judging whether the type of sample data falls within the range of the left boundary value and the right boundary value according to the proportion result and the input comparison data; If the input comparison data is greater than the right boundary value, the type sample data does not fall within the range of the left boundary value and the right boundary value, and the front-end page needs to be optimized; If the input comparison data is less than or equal to the right boundary value, the category sample data falls within the range of the left boundary value and the right boundary value, and the front-end page does not need to be optimized.

6. The method according to claim 1, characterized in that When the front-end page needs to be optimized, the step of generating an optimization report according to the proportion result and the deviation value of the sample average value from the boundary value includes: When the front-end page needs to be optimized, the deviation value of the sample average value from the boundary value is calculated; Obtaining a deviation size sorting method according to the deviation value and the proportion result; List the front-end page performance problems according to the deviation size sorting method, and diagnose the front-end page performance problems to obtain a diagnosis result; An optimization report is generated based on the diagnosis results and the front-end page performance issues.

7. The method according to claim 1, characterized in that The step of calculating the proportion result based on the weighted calculation method and the sample average value, and judging whether the front-end page needs to be optimized according to the proportion result also includes: When the front-end page does not need to be optimized, the front-end page is monitored in real time according to pre-set collection indicators, and the monitoring results are displayed in a visual manner.

8. A front-end performance optimization device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the front-end performance optimization method according to any one of claims 1 to 7.

9. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the front-end performance optimization method according to any one of claims 1 to 7 are implemented.

10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the steps of the front-end performance optimization method according to any one of claims 1 to 7 are implemented.

Images