A web front-end full-link performance intelligent diagnosis and optimization method and device

Abstract

This invention proposes a method and apparatus for intelligent diagnosis and optimization of the entire web front-end performance chain. The invention includes: collecting and standardizing multi-dimensional performance data throughout the entire lifecycle of the web front-end; constructing a semantic performance topology map and a full-indicator time-series matrix; performing performance diagnosis and root cause localization through a large-scale model fine-tuning in the front-end domain; generating three levels of executable optimization schemes for build, load, and runtime; automatically executing optimizations after multi-dimensional verification in an isolated sandbox, achieving real-time adaptive tuning for dynamic performance degradation during runtime; and continuously iterating the large-scale model based on optimization data to form a closed-loop optimization system across the entire chain. This invention achieves standardized, large-scale, and automated implementation of front-end performance optimization, significantly improving the accuracy of diagnosis and optimization, ensuring stable performance throughout the entire lifecycle, reducing reliance on engineer experience, and balancing performance optimization with business security.

Description

Technical Field

[0001] This invention relates to the field of intelligent diagnostic technology, and in particular to a method and apparatus for intelligent diagnosis and optimization of the entire performance chain of a Web front-end. Background Technology

[0002] With the rapid development of Web technologies, front-end business scenarios are becoming increasingly complex, and technology stacks are undergoing diversified upgrades. Web front-end performance has become a core factor affecting product user experience and business conversion rates, and end-to-end performance governance has become a key requirement for enterprise digital transformation. Web front-end performance optimization covers the entire lifecycle of building, loading, and running, involving multiple dimensions such as code development, engineering configuration, browser rendering, and resource scheduling. Its effect directly determines page loading speed, interaction smoothness, and overall user experience.

[0003] In related technologies, front-end performance optimization mainly relies on the personal experience of engineers, supplemented by testing tools such as Lighthouse to complete performance metric detection. Some solutions attempt to combine general models to achieve simple code snippet optimization. Specifically, testing tools can output static detection results of page performance metrics and provide general optimization suggestions. Engineers interpret and adapt these suggestions based on their own experience, thereby completing code and configuration optimization adjustments. General model-assisted solutions achieve basic code optimization through API calls, and can only perform simple performance tuning for independent code snippets. However, in existing web front-end performance optimization solutions, testing tools can only output general suggestions and cannot generate precise optimization solutions that can be directly executed based on specific business scenarios, technology stacks, and runtime environments. They also cannot solve dynamic performance issues at runtime. General model-assisted solutions are not deeply integrated with browser rendering principles, V8 engine execution mechanisms, and front-end engineering systems. They can only achieve local code optimization and cannot complete page-level, end-to-end systemic performance tuning. The optimized code is also prone to compatibility issues and business logic conflicts.

[0004] Existing solutions not only make front-end performance optimization highly dependent on the individual abilities of engineers, with performance differences exceeding 50% among different personnel, making it impossible to achieve standardized and large-scale performance optimization implementation, but also make it difficult to balance performance, functionality, and user experience, easily introducing business risks during the optimization process. Furthermore, they lack effective optimization methods for dynamic performance degradation scenarios such as long-running task blocking, memory leaks, and real-time lag, severely restricting the performance governance capabilities of the entire lifecycle of the Web front-end and failing to meet the high performance, high stability, and high experience requirements of enterprise-level Web products. Summary of the Invention

[0005] The present invention aims to at least partially solve one of the technical problems in the related art.

[0006] Therefore, the first objective of this invention is to propose a method for intelligent diagnosis and optimization of the entire web front-end performance.

[0007] Another objective of this invention is to propose an intelligent diagnostic and optimization device for the entire web front-end performance.

[0008] The third objective of this invention is to provide a computer device.

[0009] A fourth objective of this invention is to provide a non-transitory computer-readable storage medium.

[0010] To achieve the above objectives, a first aspect of the present invention proposes a method for intelligent diagnosis and optimization of the entire web front-end performance chain, comprising: S1 collects performance data and related information throughout the entire lifecycle of a Web front-end project, and constructs a semantic association model and time-series indicator model for front-end performance. S2, based on the large model optimized by front-end domain knowledge, performs performance diagnosis on the semantic association model and time series index model, locates the root cause of performance problems and generates multi-stage executable optimization solutions; S3, perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed; S4 monitors the performance status of web front-end pages in real time and adaptively optimizes performance degradation that occurs during runtime. S5 continuously iterates and optimizes the large model based on the optimized execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

[0011] In one embodiment of the present invention, the collection of performance data and related information throughout the entire lifecycle of a Web front-end project includes: Collect full-dimensional performance data of Web front-end projects during the build, loading, and runtime phases, as well as project technology stack information, business characteristics information, and runtime environment information; The collected multi-source data is cleaned and standardized to eliminate data noise and scale bias.

[0012] In one embodiment of the present invention, the construction of the semantic association model and time-series indicator model for front-end performance includes: The web front-end page is parsed into multiple types of semantic nodes, and weighted directed associations are constructed between the semantic nodes to form the semantic association model. The standardized performance data is organized into a matrix according to the indicator dimension and the time dimension to form the time series indicator model.

[0013] In one embodiment of the present invention, the performance diagnosis of the semantic association model and the time-series index model based on the large model optimized by front-end domain knowledge includes: The semantic association model, the time-series indicator model, and the project feature information and runtime environment information of the Web front-end are input into the large model; The system uses causal reasoning to diagnose compliance with performance metrics, pinpoint the root causes of performance issues, and assess the scope of the problem's impact.

[0014] In one embodiment of the present invention, the generation of a multi-stage executable optimization scheme includes: Optimization schemes for the build phase, loading phase, and runtime phase; Each optimization plan includes an estimated optimization effect and a risk level.

[0015] In one embodiment of the present invention, the multi-dimensional verification of the executable optimization scheme includes: In an isolated simulation environment, the executable optimization scheme is sequentially verified for business function integrity, visual consistency, runtime environment compatibility, and performance optimization effect. If the verification fails, the error information will be fed back to the large model, which will then correct the executable optimization scheme and re-verify it.

[0016] In one embodiment of the present invention, the adaptive tuning of performance degradation occurring during runtime includes: A lightweight model inference engine is deployed on the runtime of the web front-end page, and the inference engine is used to perform millisecond-level root cause diagnosis of runtime performance degradation. Based on the diagnostic results, a seamless performance tuning strategy is executed. After tuning is completed, the tuning effect is verified in real time. If secondary performance degradation occurs, the tuning strategy is automatically rolled back.

[0017] To achieve the above objectives, a second aspect of the present invention provides a web front-end end-to-end performance intelligent diagnosis and optimization device, comprising: The data acquisition module is used to collect performance data and related information throughout the entire lifecycle of a Web front-end project, and to build a semantic association model and time-series indicator model for front-end performance. The performance diagnosis module is used to perform performance diagnosis on the semantic association model and time series index model based on the large model optimized by front-end domain knowledge, locate the root cause of performance problems and generate multi-stage executable optimization solutions. The verification and optimization module is used to perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed. The monitoring and optimization module is used to monitor the performance status of the Web front-end page in real time and adaptively optimize the performance degradation that occurs during runtime. The iterative optimization module is used to continuously iterate and optimize the large model based on the optimization execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

[0018] This invention provides a method and apparatus for intelligent diagnosis and optimization of the entire web front-end performance chain, which realizes intelligent diagnosis, adaptive optimization and runtime dynamic tuning of the entire web front-end performance chain, improves the standardization, scalability and automation of front-end performance optimization, and fully meets the construction needs of enterprise-level web products for high performance, high stability and excellent user experience.

[0019] To achieve the above objectives, a third aspect of this application provides a computer device, including a processor and a memory; wherein the processor runs a program corresponding to the executable program code by reading executable program code stored in the memory, for implementing the method described in the first aspect embodiment.

[0020] To achieve the above objectives, a fourth aspect of this application provides a non-transitory computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the method described in the first aspect.

[0021] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0022] Figure 1 This is a flowchart of a method for intelligent diagnosis and optimization of the entire web front-end performance according to an embodiment of the present invention; Figure 2 This is a block diagram of the overall architecture of the optimization method according to an embodiment of the present invention; Figure 3 This is an overall flowchart of the optimization method according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of the semantic topology graph for front-end performance according to an embodiment of the present invention; Figure 5 This is a structural diagram of a Web front-end end-to-end performance intelligent diagnosis and optimization device according to an embodiment of the present invention; Figure 6 It is a computer device according to an embodiment of the present invention. Detailed Implementation

[0023] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other. The present invention will now be described in detail with reference to the accompanying drawings and embodiments.

[0024] To enable those skilled in the art to better understand the present invention, 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. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0025] The following description, with reference to the accompanying drawings, describes a method and apparatus for intelligent diagnosis and optimization of the entire web front-end performance according to an embodiment of the present invention.

[0026] Figure 1 This is a flowchart of a web front-end end-to-end performance intelligent diagnosis and optimization method according to an embodiment of the present invention, such as... Figure 1 and Figure 2 As shown, it includes: S1 collects performance data and related information throughout the entire lifecycle of a Web front-end project, and constructs a semantic association model and time-series indicator model for front-end performance. Specifically, the data collection scope is defined to cover three core scenarios: Build-time data: project source code, engineering configuration, dependency package information, build artifact analysis data, compilation logs, and code complexity data; Load-time data: full time-series metrics of W3CNavigationTiming, ResourceTiming, and PaintTiming, WebVitals core metrics, resource loading details, document parsing process, and rendering pipeline data; Runtime data: long tasks triggered by user interaction, JS execution time, memory usage time-series data, DOM / CSSOM operation time, asynchronous request time-series data, page stuttering data, and performance data under different browser / device / network environments.

[0027] A dual-channel data collection architecture is established, including a compile-time SDK and a runtime lightweight probe: The compile-time SDK is compatible with mainstream build tools such as Webpack, Vite, and Rollup. It completes the full collection of source code, build configuration, and artifact data during the project compilation phase, and performs semantic tagging of code nodes and dependency resolution based on the Abstract Syntax Tree (AST). The runtime lightweight probe is embedded in the page with a lightweight script of less than 5KB, non-intrusively collecting full performance data during page loading and runtime. It supports dynamic adjustment of the sampling rate to avoid affecting the performance of the page itself, and also collects contextual information such as device, browser, and network environment.

[0028] Data cleaning and standardization: The collected multi-source heterogeneous data is deduplicated, outliers are filtered, and missing values ​​are filled. All time series data are mapped to a unified time coordinate system through a unified time granularity (100ms level), eliminating time scale deviations between different indicators and outputting a standardized performance dataset.

[0029] Outlier filtering uses the 3σ principle, and the core formula is:

[0030] In the formula, For the first The performance index at the first The original acquired values ​​for each time slice, For the first The arithmetic mean of each performance indicator over the observation period For the first The standard deviation of each performance index within the observation period. Collected values ​​that satisfy the above formula are judged as outliers, and interpolation is performed using the median of the three time slices before and after the same index to complete the outlier.

[0031] Indicator normalization uses Min-Max standardization, and the core formula is:

[0032] In the formula, For the first The performance index at the first The value after standardization of each time slice , The first The minimum and maximum values ​​of each performance index within the observation period. For negative indices where smaller values ​​indicate better performance, reverse normalization is used to eliminate the dimensional differences between different performance indices, mapping all indices uniformly to the [0,1] interval.

[0033] Construct a time-series matrix of all front-end performance metrics. Organize the standardized performance data into a two-dimensional time-series matrix to fully cover the entire lifecycle of build, load, and run. The core formula is:

[0034] In the formula, , , These are three sub-matrices: construction time, loading time, and runtime. This represents the total number of performance metric dimensions. This represents the total number of time slices within the observation period. This matrix enables standardized temporal modeling of all front-end performance metrics, providing a unified input format for subsequent semantic topology construction and large-scale model diagnostic inference.

[0035] S2, based on the large model optimized by front-end domain knowledge, performs performance diagnosis on the semantic association model and time series index model, locates the root cause of performance problems and generates multi-stage executable optimization solutions; Specifically, multi-dimensional semantic node parsing: Based on the AST syntax tree parsing results, rendering pipeline data, and resource loading details, the front-end page is decomposed into four core semantic nodes: code nodes (JS modules, CSS styles, component code), resource nodes (images, fonts, audio and video, third-party scripts), rendering nodes (DOM tree, CSSOM tree, rendering layer, compositing layer), and business nodes (page routing, interaction logic, business function modules). Each node is assigned a unique semantic ID to mark its node type, functional attributes, dependencies, and performance-related characteristics.

[0036] Inter-node relationships and weight calculation: Based on temporal causal analysis, dependency resolution, and performance impact measurement, directed relationships between nodes are constructed, and weights are assigned to each relationship. The weight calculation formula is as follows:

[0037] In the formula, The association weight from node A to node B represents the degree of performance impact of node A on node B. , This is a globally adjustable parameter; its default value is... , It can be dynamically adjusted according to the project scenario.

[0038] in The causal probability of node A to node B is calculated using the Granger causality test. The core formula is:

[0039] In the formula, Let F be the statistic. , These are the sums of squared residuals for the restricted regression and unrestricted regression models, respectively. The lag order is... For the sample size, This represents the number of parameters in the unrestricted regression model. When the p-value corresponding to the F-statistic is less than 0.05, it is determined that node A has a significant causal influence on node B. ,otherwise .

[0040] in The performance importance index for node A is given by the core formula:

[0041] In the formula, This represents the total number of Web Vitals core performance metrics. Let i be any semantic node i in the topological graph, and let Pearson correlation coefficient be the k-th core performance indicator. Then, sum the denominators by traversing all nodes. For node A and the first Pearson correlation coefficients for the core performance indicators For the first The business weight of each indicator This represents the total number of semantic nodes in the topological graph. This formula quantifies the impact of nodes on core performance indicators, providing a crucial basis for subsequent root cause localization.

[0042] Constructing a semantic topology graph for front-end performance: Based on semantic nodes and weighted directed associations, construct... The adjacency weight matrix forms a complete semantic topology graph of front-end performance. The core formula is:

[0043] In the formula, for The adjacency weight matrix of the topological graph at time t has diagonal elements of 0 (nodes have no self-associations). for From the node To the node The graph accurately depicts the end-to-end relationships between "code, resources, rendering, performance metrics, and business experience."

[0044] Dynamic update mechanism for topology graph: An incremental update mechanism is set up to address node changes caused by dynamic rendering of SPA / SSR, page route switching, and business iteration. Only the nodes and their relationships that have changed are re-parsed and their weights are recalculated to ensure the real-time consistency between the topology graph and the actual state of the page, while reducing computational overhead.

[0045] S3, perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed; Specifically, the large-scale model construction in the front-end domain: Based on the open-source large-scale model foundation, it integrates W3C Web standards, browser rendering principles, V8 engine execution mechanisms, best practices in front-end engineering, massive performance optimization cases, compatibility specifications, and business scenario characteristics for exclusive fine-tuning, and constructs a large-scale model in the field of front-end performance optimization. The model has five core capabilities: code understanding, performance diagnosis, root cause location, optimization solution generation, and compatibility verification.

[0046] Multi-dimensional intelligent performance diagnosis and root cause localization: The large model takes the time-series matrix of all front-end performance indicators, semantic topology map, project technology stack information, etc. as input. The large model completes three core diagnostic actions through contextual semantic understanding and causal reasoning: indicator compliance diagnosis, accurate root cause localization, and impact scope assessment.

[0047] Indicator compliance diagnosis is quantified through a performance indicator degradation formula, the core formula of which is:

[0048] In the formula, For the first The degree of degradation of each core performance indicator For the first The measured average of each indicator, For the first Each indicator represents a business SLA compliance threshold. When If the indicator fails to meet the standard, the root cause localization process is triggered.

[0049] Root cause precise localization is achieved through the root cause node contribution formula, the core formula of which is:

[0050] In the formula, For node A, pair of indicators The higher the contribution of degradation, the higher the probability that the node is a core root cause. The large model sorts the nodes from high to low based on their contribution and identifies the top 3 core root cause nodes with an accuracy of ≥95%.

[0051] Intelligent Generation of Three-Tier Optimization Solutions: Based on diagnostic results and root cause localization, the large model generates three levels of executable optimization solutions, taking into account the project's technology stack, business scenarios, and compatibility requirements. Each solution includes an estimated optimization effect, risk level, and execution method: Build-time optimization solutions: include engineering configuration optimization, code-level performance optimization, dependency package reduction, tree-shaking strategy optimization, image and static resource optimization, and preloading / pre-connection strategy configuration, outputting directly mergeable code change files and build configuration modification solutions; Load-time optimization solutions: include resource loading priority adjustment, CDN distribution strategy optimization, browser caching strategy configuration, server-side rendering / pre-rendering strategy optimization, and critical rendering path optimization, outputting directly executable configuration change and code adjustment solutions; Runtime optimization solutions: include long task chunking, DOM operation debouncing and throttling, memory leak repair, interactive event optimization, dynamic rendering strategy adjustment, and asynchronous request concurrency control, outputting runtime code and optimization strategies that can be directly embedded into the page.

[0052] Optimization Solution Priority Matching: Based on the scope of business impact, optimization risk level, and performance improvement, optimization solutions are prioritized and graded using an optimization solution priority scoring formula. The core formula is:

[0053] In the formula, For the first Priority scoring of each optimization scheme; This represents the estimated performance improvement rate of the proposed solution. The business risk level of the solution, For the implementation cost of the plan, This is the weighting coefficient, with a default value. , , Based on the scoring results, the solutions are divided into three categories: high priority and low risk, medium priority and medium risk, and low priority and high risk, providing a tiered execution strategy for subsequent verification and execution.

[0054] This step focuses on the core innovative optimization of large models, which involves injecting the semantic topology graph of front-end performance as prior knowledge into the Transformer attention mechanism. The core formula is:

[0055] In the formula, This is the adjacency weight matrix of the semantic topological graph. These are the query matrix, key matrix, and value matrix for the attention mechanism, respectively. denoted as the dimension of the key matrix. This formula achieves a deep integration of large models with front-end performance domain knowledge, differing from the simple API calls of general large models, and significantly improving the inference accuracy of large models in front-end performance diagnostic scenarios.

[0056] Lightweight isolation sandbox construction for the front end: Based on the headless browser and iframe isolation mechanism, a simulated sandbox environment consistent with the online environment is built, completely isolating the optimized code from the original business code, avoiding the pollution of the original business logic by the optimization execution, and supporting simulation of multiple browser kernels, multiple device sizes, and multiple network environments.

[0057] Multi-dimensional automated verification: The optimization plan is input into an isolated sandbox for execution, completing automated verification across four dimensions: Business function integrity verification: Through automated E2E test cases and unit tests, it is verified that the optimized page's business processes, functional logic, and interface calls are completely normal, with no missing functions or logical anomalies; Visual consistency verification: Through pixel-level comparison and DOM structure comparison, it is verified that the optimized page layout, styles, and visual effects are without offset, error, or content loss; Browser compatibility verification: In mainstream browsers such as Chrome, Safari, Firefox, and Edge, as well as in mobile WebView environments, it is verified that the optimization plan has no compatibility errors or functional anomalies; Visual consistency verification: Through pixel-level comparison and DOM structure comparison, it is verified that the optimized page layout, styles, and visual effects are without offset, error, or content loss; Browser compatibility verification: In mainstream browsers such as Chrome, Safari, Firefox, and Edge, as well as in mobile WebView environments, it is verified that the optimization plan has no compatibility errors or functional anomalies; Optimization effect verification: Retesting all dimensions of performance indicators after optimization verifies that the optimization effect achieves the estimated target, with no secondary degradation in other indicators.

[0058] Validation Result Processing and Secondary Optimization: Optimization schemes that pass all validations are executed according to priority. During the build process, the optimization schemes are automatically merged into the project through the build plugin. During loading and runtime, the optimization schemes are automatically published and take effect through CDN or online configuration center. Optimization schemes that fail validations are automatically processed by extracting anomaly information and root causes, which are fed back to the large model inference optimization layer, triggering secondary correction of the large model. The optimized scheme is then regenerated and validated again, supporting a maximum of 3 iterations. If it still fails, it is marked as a high-risk scheme and requires manual intervention. Iterative convergence is controlled by an iterative convergence judgment formula. The core formula is:

[0059] In the formula, For the iterative convergence rate, The priority comprehensive score of the s-th optimization scheme after the t-th iteration is the core quantitative indicator for determining the iterative convergence of this invention. The iteration count. If the number of iterations is ≥3, the iteration is terminated, and the solution that still fails the verification is marked as high risk and transferred to manual intervention.

[0060] Full-process traceability and canary release: The execution of all optimization solutions retains complete change records, verification reports and version snapshots, and supports one-click rollback; for medium and high risk optimization solutions, canary release is supported, and the scale is gradually increased according to user ratio, device type and geographical range. The performance and business indicators during the scale-up process are monitored in real time, and the scale-up is automatically terminated and rolled back in case of abnormality.

[0061] S4 monitors the performance status of web front-end pages in real time and adaptively optimizes performance degradation that occurs during runtime. Real-time runtime performance monitoring: A lightweight probe embedded in the page collects comprehensive performance metrics across all dimensions during runtime. It focuses on monitoring dynamic performance degradation scenarios such as long-running task blocking, continuous memory increases, page stuttering, and excessive interaction latency. Alarm thresholds are dynamically set using a degradation alarm threshold formula, the core of which is:

[0062] In the formula, The threshold for runtime performance degradation alarms. , These are the historical average and standard deviation of the corresponding indicator over the past 7 days. When the real-time indicator exceeds the alarm threshold, the optimization process is automatically triggered.

[0063] Lightweight large-model real-time inference: Deploy a lightweight large-model inference engine on the client side. Based on real-time collected performance data and page context information, complete millisecond-level root cause diagnosis of performance degradation and distinguish different root cause types such as JS execution blocking, frequent DOM manipulation, memory leaks, and asynchronous request congestion.

[0064] Seamless adaptive tuning execution: Based on diagnostic results, the corresponding seamless tuning strategy is automatically executed without requiring page refreshes or user awareness. The quantification formula for the core tuning capability is as follows: Dynamic partitioning of long tasks: Calculated using the optimal partitioning granularity formula for long tasks. The core formula is:

[0065] In the formula, The optimal time granularity for splitting long tasks. for Monitor the main thread's CPU utilization at all times. The higher the CPU utilization, the smaller the granularity of task partitioning, preventing partitioned tasks from still blocking the main thread and enabling seamless long task partitioning.

[0066] Dynamic adjustment of rendering priority: Calculated using a rendering priority weight formula, the core formula of which is:

[0067] In the formula, For DOM elements Rendering priority weights This is the element visibility coefficient (1 within the visible area, 0 otherwise). This is the element's interactivity coefficient (1 for bound interactive events, 0 otherwise). This is the normalized distance of the element from the visible area. This is the weighting coefficient, with a default value. , , Rendering tasks for non-visible areas are downgraded based on weights, while prioritizing rendering responses for user-visible areas and interactive operations.

[0068] Optimization effect verification and rollback: After each optimization execution, performance metrics are retested in real time, and the benefits are quantified using the optimization effect evaluation formula. The core formula is:

[0069] In the formula, These are the retested values ​​after optimization. The baseline value before optimization. To optimize yield, positive numbers indicate performance improvement, and negative numbers indicate performance degradation. When If the optimization fails, the optimization strategy will be terminated immediately and automatically rolled back to ensure normal business operation.

[0070] S5 continuously iterates and optimizes the large model based on the optimized execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

[0071] Specifically, the entire process of data collection includes: collecting all data such as the execution results of optimization plans, verification reports, online operation data, tuning records, and manual correction records, and completing data desensitization and anonymization processing.

[0072] Incremental fine-tuning dataset construction: Based on the aggregated data, high-quality cases that meet the optimization targets and pass the validation are selected, as well as abnormal cases that fail to optimize and require manual correction. High-quality samples are then selected by fine-tuning the sample quality scoring formula. The core formula is:

[0073] In the formula, To score the quality of the sample, This is the sample validity coefficient (1 for successful validation, 0 otherwise). Optimize the normalized return value for the sample. This is the sample type coefficient (1 for abnormal cases and 0.5 for normal cases). This is the weighting coefficient, with a default value. , , Only when At that time, the samples were included in the incremental fine-tuning dataset.

[0074] Large-scale model continuous iterative optimization: Based on incremental datasets, large-scale front-end models are periodically fine-tuned, and their diagnostic capabilities are comprehensively evaluated using the F1 score. The core formula is:

[0075] In the formula, To improve the accuracy of model diagnosis, The model's diagnostic recall rate is determined. The model iteration is considered effective only when the F1 score improves by ≥2% after incremental fine-tuning and passes the statistical significance test. The online inference model is then updated to continuously improve the model's diagnostic accuracy, the effectiveness of optimization schemes, and its risk identification capabilities.

[0076] Performance Optimization Audit Report Generation: Automatically generates a full-cycle performance optimization audit report for the project. It comprehensively evaluates the optimization effect using a full-cycle optimization benefit quantification formula. The core formula is:

[0077] In the formula, To optimize returns across the entire lifecycle, These represent the average degradation of the core indicators before and after optimization. These represent the business conversion rates before and after optimization. These represent the performance and maintenance manpower costs before and after optimization, respectively. This is the weighting coefficient, with a default value. , , This formula quantifies and optimizes benefits from three dimensions: technical performance, business conversion, and human resource costs, meeting the operational and auditing requirements of enterprise-level projects.

[0078] In one embodiment of the present invention, such as Figure 3 and Figure 4 The optimization method of the present invention shown includes the following core steps: Collect multi-dimensional performance data and contextual information throughout the entire lifecycle of a web front-end project to construct a semantic topology map and a time-series matrix of all indicators for front-end performance. Based on a large model fine-tuned using front-end domain knowledge, perform multi-dimensional diagnostics on performance data to accurately pinpoint the root causes of performance problems and generate executable optimization solutions at three levels: build time, load time, and runtime. Verify the optimization solutions through a front-end isolation sandbox, validating the integrity, compatibility, and optimization effects of business functions; automatically execute optimizations after successful verification. For dynamic performance degradation during page runtime, implement real-time adaptive tuning based on the large model. Based on optimization results and online operational data, continuously iterate and optimize the capabilities of the large model to form a closed-loop optimization system across the entire chain.

[0079] The optimization method of the present invention relies on the construction and operation of a corresponding optimization system. The optimization system is divided into six core modules from top to bottom: the acquisition layer, the semantic modeling layer, the large model inference optimization layer, the isolation verification execution layer, the runtime adaptive tuning layer, and the closed-loop iteration layer. The data collection layer collects multi-dimensional performance data, project context information, business characteristic data, and environmental information throughout the entire lifecycle of a web front-end project, including during construction, loading, and runtime. It then performs data cleaning and standardization before sending the data to the semantic modeling layer. Semantic modeling layer: Semantically analyzes the collected standardized data, constructs a semantic topology map of front-end performance and a time-series matrix of all indicators, maps the relationships between performance indicators, code nodes, resource nodes, rendering nodes and business logic, and sends them to the large model inference optimization layer; Large Model Inference Optimization Layer: Based on a multimodal large model with fine-tuning specific to the front-end domain, it takes a performance semantic topology map and time series matrix as input, completes full-dimensional diagnosis of performance problems and accurate root cause location, generates executable optimization solutions at three levels: build time, load time, and runtime, and sends them to the isolated verification execution layer; Isolation Verification Execution Layer: Construct a lightweight isolation sandbox for the front end. In the sandbox, the optimization plan is verified in multiple dimensions, including business integrity, visual consistency, browser compatibility, and optimization effect. If the verification fails, the large model will be automatically triggered for secondary correction. If the verification passes, the optimization plan will be automatically executed. The execution results and verification data will be sent to the runtime adaptive tuning layer and closed-loop iteration layer simultaneously. Runtime adaptive tuning layer: Real-time monitoring of performance metrics changes during online page operation; Real-time diagnosis and seamless adaptive tuning based on a lightweight large model inference engine for dynamic performance degradation scenarios; Ensure stable page performance during operation; Simultaneously send tuning data to the closed-loop iteration layer. Closed-loop iteration layer: Based on the optimized execution results, verification data, online operation data and tuning records, anonymized incremental fine-tuning dataset is constructed to continuously iterate and optimize the large front-end domain model. At the same time, a full-process performance optimization audit report is automatically generated to achieve full-link traceability.

[0080] The embodiments of the present invention also have the following technical effects: Key behavioral events in the attack chain are collected and mapped to discrete neuronal input pulses (different neural encoding methods are used for different behavioral events, i.e., each behavioral event is regarded as a neuron), resulting in a pulse time-series vector sequence. Synaptic connections are constructed for different neurons (behavioral events) to form an attack chain graph in the form of neurons. Neuronal input pulses are integrated through a dynamic sliding time window, and the charging and discharging behavior of LIF (leaky-integrate-and-fire) neurons is simulated using a large model. The current stage of the behavioral event is automatically determined. Based on the current stage of the behavioral event, combined with historical information of behavioral time and equipment security status, the changes in the behavioral event are analyzed, the overall development trend of the attack chain is predicted, and behavioral-level management decisions are generated based on the prediction results.

[0081] We have constructed a multi-dimensional data collection system covering the entire lifecycle of Web front-ends, from build time to load time to runtime. We have pioneered a method for constructing a time-series matrix of all front-end performance indicators and a semantic topology graph. This has enabled semantic-level association mapping between code, resources, rendering, performance indicators, and business experience, breaking through the core bottleneck of existing technologies that can only collect discrete indicators and cannot associate root causes.

[0082] It pioneered a method for comprehensive performance diagnosis and three-level optimization solution generation based on a large model with micro-tuning specific to the front-end domain. It deeply integrates browser rendering principles, V8 engine execution mechanisms, best practices in front-end engineering, and the large model, enabling automated and accurate localization of the root causes of performance problems, as well as automatic generation of executable optimization solutions that are deeply matched with business scenarios and technology stacks, thus eliminating the strong reliance on the personal experience of engineers.

[0083] A lightweight isolation sandbox and multi-dimensional verification mechanism were built for the front end. The first security execution system of "optimization generation - multi-dimensional verification - secondary correction - automated execution - canary release - one-click rollback" was created. While achieving performance optimization, it ensured the integrity of business functions, visual consistency and browser compatibility, and completely solved the industry pain point that the existing optimization solutions were incomplete and prone to introducing online business risks.

[0084] It pioneered a front-end runtime dynamic performance adaptive tuning method based on a lightweight large model inference engine, realizing real-time perception, millisecond-level diagnosis and seamless adaptive tuning of dynamic performance degradation during page operation. This fills the blind spot of existing technologies in optimizing runtime dynamic performance issues and ensures stable performance throughout the entire page lifecycle.

[0085] A fully automated closed-loop optimization system for front-end performance has been built, encompassing "collection-modeling-diagnosis-optimization-verification-execution-tuning-iteration". Based on online running data and optimization results, the system continuously iterates the large model, enabling standardized, large-scale, and automated implementation of front-end performance optimization, and possessing continuous evolution capabilities.

[0086] To achieve the above embodiments, such as Figure 5 As shown, this embodiment also provides a Web front-end end-to-end performance intelligent diagnosis and optimization device 10, including: The data acquisition module 100 is used to collect performance data and related information throughout the entire lifecycle of a Web front-end project, and to build a semantic association model and a time-series indicator model for front-end performance. The performance diagnosis module 200 is used to perform performance diagnosis on the semantic association model and the time series index model based on the large model optimized by front-end domain knowledge, locate the root cause of performance problems and generate multi-stage executable optimization solutions. The verification and optimization module 300 is used to perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed. The monitoring and optimization module 400 is used to monitor the performance status of the Web front-end page in real time and adaptively optimize the performance degradation that occurs during runtime. The iterative optimization module 500 is used to continuously iteratively optimize the large model based on the optimization execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

[0087] This invention provides a web front-end end-to-end performance intelligent diagnosis and optimization device, which realizes intelligent diagnosis, adaptive optimization and runtime dynamic tuning of web front-end end-to-end performance, improves the standardization, scalability and automation of front-end performance optimization, and fully meets the construction needs of enterprise-level web products for high performance, high stability and excellent user experience.

[0088] To implement the methods of the above embodiments, the present invention also provides a computer device, such as... Figure 6 As shown, the computer device 600 includes a memory 601 and a processor 602; wherein, the processor 602 reads the executable program code stored in the memory 601 to run a program corresponding to the executable program code, so as to implement the various steps of the Web front-end end-link performance intelligent diagnosis and optimization method described above.

[0089] To implement the above embodiments, this application also proposes a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements a Web front-end end-to-end performance intelligent diagnosis and optimization method as described in the foregoing embodiments.

[0090] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0091] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this invention, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

Claims

1. A method for intelligent diagnosis and optimization of the entire web front-end performance chain, characterized in that, include: S1 collects performance data and related information throughout the entire lifecycle of a Web front-end project, and constructs a semantic association model and time-series indicator model for front-end performance. S2, based on the large model optimized by front-end domain knowledge, performs performance diagnosis on the semantic association model and time series index model, locates the root cause of performance problems and generates multi-stage executable optimization solutions; S3, perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed; S4 monitors the performance status of web front-end pages in real time and adaptively optimizes performance degradation that occurs during runtime. S5 continuously iterates and optimizes the large model based on the optimized execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

2. The method according to claim 1, characterized in that, The collection of performance data and related information throughout the entire lifecycle of a web front-end project includes: Collect full-dimensional performance data of Web front-end projects during the build, loading, and runtime phases, as well as project technology stack information, business characteristics information, and runtime environment information; The collected multi-source data is cleaned and standardized to eliminate data noise and scale bias.

3. The method according to claim 1, characterized in that, The construction of the semantic association model and time-series indicator model for front-end performance includes: The web front-end page is parsed into multiple types of semantic nodes, and weighted directed associations are constructed between the semantic nodes to form the semantic association model. The standardized performance data is organized into a matrix according to the indicator dimension and the time dimension to form the time series indicator model.

4. The method according to claim 1, characterized in that, The large model, optimized based on front-end domain knowledge, performs performance diagnostics on the semantic association model and the time-series index model, including: The semantic association model, the time-series indicator model, and the project feature information and runtime environment information of the Web front-end are input into the large model; The system uses causal reasoning to diagnose compliance with performance metrics, pinpoint the root causes of performance issues, and assess the scope of the problem's impact.

5. The method according to claim 1, characterized in that, The generation of a multi-stage executable optimization scheme includes: Optimization schemes for the build phase, loading phase, and runtime phase; Each optimization plan includes an estimated optimization effect and a risk level.

6. The method according to claim 1, characterized in that, The multi-dimensional verification of the executable optimization scheme includes: In an isolated simulation environment, the executable optimization scheme is sequentially verified for business function integrity, visual consistency, runtime environment compatibility, and performance optimization effect. If the verification fails, the error information will be fed back to the large model, which will then correct the executable optimization scheme and re-verify it.

7. The method according to claim 1, characterized in that, The adaptive tuning for performance degradation occurring during runtime includes: A lightweight model inference engine is deployed on the runtime of the web front-end page, and the inference engine is used to perform millisecond-level root cause diagnosis of runtime performance degradation. Based on the diagnostic results, a seamless performance tuning strategy is executed. After tuning is completed, the tuning effect is verified in real time. If secondary performance degradation occurs, the tuning strategy is automatically rolled back.

8. A web front-end end-to-end performance intelligent diagnosis and optimization device, characterized in that, include: The data acquisition module is used to collect performance data and related information throughout the entire lifecycle of a Web front-end project, and to build a semantic association model and time-series indicator model for front-end performance. The performance diagnosis module is used to perform performance diagnosis on the semantic association model and time series index model based on the large model optimized by front-end domain knowledge, locate the root cause of performance problems and generate multi-stage executable optimization solutions. The verification and optimization module is used to perform multi-dimensional verification on the executable optimization scheme, and automatically execute the optimization scheme after the verification is passed. The monitoring and optimization module is used to monitor the performance status of the Web front-end page in real time and adaptively optimize the performance degradation that occurs during runtime. The iterative optimization module is used to continuously iterate and optimize the large model based on the optimization execution results, runtime tuning data, and verification data, forming a closed loop of performance optimization across the entire chain.

9. A computer device, characterized in that, Including processor and memory; The processor reads executable program code stored in the memory to run a program corresponding to the executable program code, so as to implement the intelligent diagnosis and optimization method for the entire web front-end performance as described in any one of claims 1-7.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by the processor, the program implements a method for intelligent diagnosis and optimization of the entire web front-end performance as described in any one of claims 1-7.

Images