Webpage processing method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses a webpage processing method and device, electronic equipment and a storage medium, when a target webpage is accessed through a browser, a browser plug-in of the browser is called to obtain webpage operation data of the target webpage, the browser plug-in is configured to obtain the webpage operation data based on a debugging protocol, and the webpage operation data is stored in the browser plug-in. An analysis model deployed in a browser is loaded, the webpage operation data are input into the analysis model for analysis, at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text are obtained, the at least one optimization suggestion text is displayed in the browser, and the first optimization code is used for optimizing the webpage operation data. And in response to the operation of selecting the at least one optimization suggestion text, loading the first optimization code corresponding to the selected optimization suggestion text, so that the accuracy and the flexibility of optimizing the target webpage can be improved.

Description

Technical Field

[0001] The present disclosure relates to the field of artificial intelligence technology, and in particular to a webpage processing method, device, electronic device, and storage medium. Background Art

[0002] With the development of internet technology, relevant technologies have become capable of collecting web page performance data through W3C standard interfaces such as PerformanceObserver and Navigation Timing API, allowing for automatic performance optimization of web pages. However, the performance data collected by these methods are pre-processed aggregated indicators, with a high level of data abstraction, which can easily lead to reduced optimization accuracy. Furthermore, these methods can only optimize web pages using preset optimization methods, leaving room for improvement in flexibility. Summary of the Invention

[0003] The following is an overview of the subject matter described in detail in this disclosure. This overview is not intended to limit the scope of the claims.

[0004] The embodiments of the present disclosure provide a webpage processing method, device, electronic device, and storage medium, which can improve the accuracy and flexibility when optimizing a target webpage.

[0005] In one aspect, an embodiment of the present disclosure provides a webpage processing method, characterized by comprising:

[0006] When accessing a target webpage through a browser, calling a browser plug-in of the browser to obtain webpage operation data of the target webpage, wherein the browser plug-in is configured to obtain the webpage operation data based on a debugging protocol;

[0007] loading an analysis model deployed on the browser, inputting the webpage operation data into the analysis model for analysis, obtaining at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and displaying the at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the webpage operation data;

[0008] In response to an operation of selecting at least one of the optimization suggestion texts, the first optimization code corresponding to the selected optimization suggestion text is loaded.

[0009] On the other hand, an embodiment of the present disclosure further provides a webpage processing device, comprising:

[0010] a data acquisition module, configured to, when a target webpage is accessed through a browser, call a browser plug-in of the browser to acquire webpage operation data of the target webpage, wherein the browser plug-in is configured to acquire the webpage operation data based on a debugging protocol;

[0011] an analysis module, configured to load an analysis model deployed in the browser, input the webpage operation data into the analysis model for analysis, obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and display the at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the webpage operation data;

[0012] The code loading module is configured to, in response to an operation of selecting at least one of the optimization suggestion texts, load the first optimization code corresponding to the selected optimization suggestion text.

[0013] Furthermore, the analysis module includes:

[0014] Using a sliding window to construct a time series input vector based on the webpage runtime time series data, and encoding the webpage structured data into a structured input vector;

[0015] Inputting the time series input vector and the structured input vector into the analysis model for mapping to obtain a time series feature corresponding to the time series input vector and a structured feature corresponding to the structured input vector;

[0016] The temporal features and the structural features are fused to obtain fused features, and analysis is performed based on the fused features to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text.

[0017] Furthermore, the analysis module includes:

[0018] Determining feature weights between the temporal features and the structural features based on an attention mechanism;

[0019] The temporal features and the structural features are weightedly summed based on the feature weights to obtain fusion features.

[0020] Furthermore, the analysis module includes:

[0021] Mapping the temporal features and the structural features to the same dimension based on a learnable mapping matrix;

[0022] Determine a query matrix based on the mapped temporal features, and determine a key matrix based on the mapped structural features;

[0023] The feature weights between the temporal features and the structural features are determined according to the similarity between the query matrix and the key matrix.

[0024] Furthermore, the analysis module includes:

[0025] Displaying task identifiers of the candidate optimization tasks in the browser, wherein the candidate optimization tasks are tasks for optimizing the target web page;

[0026] In response to an operation of selecting at least one of the task identifiers, the branch module corresponding to the task identifier is loaded.

[0027] Furthermore, the code loading module includes:

[0028] In response to an operation of selecting at least one of the optimization suggestion texts, displaying a debugging window in the browser, wherein the debugging window is used to display current code loaded when the browser accesses the target webpage;

[0029] Highlighting the original code to be optimized in the current code in the debugging window;

[0030] In response to confirming the operation of optimizing the target webpage, the first optimization code corresponding to the selected optimization suggestion text is loaded to optimize the original code.

[0031] Furthermore, the code loading module includes:

[0032] displaying feedback controls in the debug window;

[0033] In response to an operation triggering the feedback control, sending the first optimization code and the webpage operation data to a server for training the analysis model, so that the server constructs negative samples based on the first optimization code and the webpage operation data and retrains the analysis model based on the negative samples;

[0034] Receive the retrained analysis model sent by the server, and deploy the retrained analysis model on the browser.

[0035] Furthermore, the code loading module includes:

[0036] In response to an operation that triggers one of the sub-controls, the first optimization code, the web page operation data, and the feedback text corresponding to the triggered sub-control are sent to a server for training the analysis model, so that the server constructs a negative sample based on the first optimization code and the web page operation data, adds constraint items to the loss function according to the feedback text, and retrains the analysis model based on the negative sample and the loss function after adding the constraint items.

[0037] Furthermore, the code loading module includes:

[0038] generating a dependency tree graph indicating an association relationship between the original code and the associated code, and displaying the dependency tree graph in the debugging window, wherein the associated code is other code in the current code except the original code, and the dependency tree graph includes graph nodes corresponding to the original code and the associated code respectively;

[0039] In response to an operation of selecting at least one graph node corresponding to the association code in the dependency tree graph, obtaining the association code corresponding to the selected graph node;

[0040] In response to confirming the operation of optimizing the target webpage, inputting the associated code into the analysis model for analysis to obtain a second optimized code;

[0041] The first optimized code and the second optimized code corresponding to the selected optimization suggestion text are loaded to optimize the original code and the associated code.

[0042] Furthermore, the data acquisition module includes:

[0043] Calling the browser plug-in of the browser based on the interface function of the debugging protocol to obtain web page running data of the target web page;

[0044] The webpage running data includes at least one of network layer running data, rendering layer running data and execution environment layer running data.

[0045] Furthermore, the data acquisition module includes:

[0046] calling a network layer interface function of a browser plug-in of the browser based on the debugging protocol to obtain an access request and a response duration of the target webpage, and determining the access request and the response duration as the network layer operation data;

[0047] calling a rendering layer interface function of a browser plug-in of the browser based on the debugging protocol to obtain a layout redraw count, graphics performance data, and layer synthesis data of the target webpage, and determining the layout redraw count, the graphics performance data, and the layer synthesis data as the rendering layer operation data;

[0048] The browser plug-in of the browser is called based on the execution environment layer interface function of the debugging protocol to obtain the execution efficiency data and event blocking duration of the target webpage, and the execution efficiency data and the event blocking duration are determined as the execution environment layer running data.

[0049] On the other hand, an embodiment of the present disclosure further provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the above-mentioned web page processing method when executing the computer program.

[0050] On the other hand, an embodiment of the present disclosure further provides a computer-readable storage medium, wherein the storage medium stores a computer program, and the computer program is executed by a processor to implement the above-mentioned webpage processing method.

[0051] In another aspect, embodiments of the present disclosure further provide a computer program product, comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to implement the webpage processing method described above.

[0052] The embodiments of the present disclosure include at least the following beneficial effects: when accessing a target web page through a browser, the web page operation data of the target web page is obtained by calling the browser plug-in of the browser. Since the browser plug-in is configured to obtain the web page operation data based on the debugging protocol, the web page operation data at the atomic level can be obtained. Subsequently, the analysis model deployed in the browser is loaded, and the web page operation data is input into the analysis model for analysis. When at least one optimization suggestion text and the first optimization code corresponding to the optimization suggestion text are obtained, the optimization suggestion text and the first optimization code can be made more accurate, thereby improving the accuracy of optimizing the target web page. At the same time, since the analysis model is deployed in the browser, the real-time and security of the analysis can be improved. Moreover, by displaying at least one optimization suggestion text in the browser, in response to the operation of selecting at least one optimization suggestion text, the first optimization code corresponding to the selected optimization suggestion text is loaded, which can facilitate the user to select the first optimization code to be loaded, thereby improving the flexibility in optimizing the target web page.

[0053] Other features and advantages of the present disclosure will be set forth in the description which follows, and in part will be apparent from the description, or may be learned by practicing the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] The accompanying drawings are used to provide a further understanding of the technical solution of the present disclosure and constitute a part of the specification. Together with the embodiments of the present disclosure, they are used to explain the technical solution of the present disclosure and do not constitute a limitation to the technical solution of the present disclosure.

[0055] Figure 1 A schematic diagram of an optional implementation environment provided for an embodiment of the present disclosure;

[0056] Figure 2An optional flowchart of the webpage processing method provided in the embodiment of the present disclosure;

[0057] Figure 3 An optional schematic diagram of an analysis model structure provided in an embodiment of the present disclosure;

[0058] Figure 4 An optional schematic diagram of displaying a debugging window provided in an embodiment of the present disclosure;

[0059] Figure 5 An optional schematic diagram of a debugging window page provided in an embodiment of the present disclosure;

[0060] Figure 6 Another optional schematic diagram of the debugging window page provided in the embodiment of the present disclosure;

[0061] Figure 7 Another optional schematic diagram of the debugging window page provided in the embodiment of the present disclosure;

[0062] Figure 8 An optional overall flow chart of the page processing method provided in the embodiment of the present disclosure;

[0063] Figure 9 A schematic diagram of the structure of a web page processing device provided by an embodiment of the present disclosure;

[0064] Figure 10 A partial structural block diagram of a terminal provided in an embodiment of the present disclosure;

[0065] Figure 11 A partial structural block diagram of the server provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0066] In order to make the purpose, technical solutions and advantages of the present disclosure more clearly understood, the present disclosure is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present disclosure and are not intended to limit the present disclosure.

[0067] It should be noted that in various specific embodiments of the present disclosure, when it comes to the need to perform relevant processing based on data related to the characteristics of the target object, such as the target object attribute information or attribute information set, the permission or consent of the target object will be obtained first, and the collection, use and processing of these data will comply with relevant laws, regulations and standards. Among them, the target object can be a user. In addition, when the embodiment of the present disclosure needs to obtain the attribute information of the target object, the separate permission or separate consent of the target object will be obtained through a pop-up window or by jumping to a confirmation page. After clearly obtaining the separate permission or separate consent of the target object, the necessary target object-related data for the normal operation of the embodiment of the present disclosure will be obtained.

[0068] In the embodiments of the present disclosure, the term "module" or "unit" refers to a computer program or a part of a computer program that has a predetermined function and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0069] To facilitate understanding of the technical solutions provided by the embodiments of the present disclosure, some key terms used in the embodiments of the present disclosure are explained here:

[0070] Browser plug-in: A small software program that extends the functionality of a browser by injecting scripts or modifying the browser's behavior to achieve specific functionality.

[0071] With the development of Internet technology, relevant technologies have been able to collect web page operation data through W3C standard interfaces such as PerformanceObserver and Navigation Timing API, upload the collected web page operation data to the cloud for analysis, return the analysis results to the browser, and automatically optimize the performance of the web page based on the analysis results. However, the operation data collected by the above method is pre-processed aggregate indicators, the data abstraction level is too high, lacks the ability to monitor atomic-level events, and cannot adaptively solve browser compatibility issues, resulting in problems such as repeated calculation of rendering engine layer events and excessive execution time of web page assembly functions, which easily leads to reduced optimization accuracy. At the same time, the above method can only optimize web pages using preset optimization methods and cannot select different optimization methods for different problems. In addition, the method of uploading web page operation data to the cloud for analysis has response delay problems and cannot meet real-time interaction needs. It may also face problems such as limited data volume in a single request and compliance risks of sensitive data. The flexibility of web page optimization needs to be improved.

[0072] Based on this, the embodiments of the present disclosure provide a web page processing method, device, electronic device and storage medium, which can facilitate users to select the first optimization code to be loaded, thereby improving the flexibility when optimizing the target web page.

[0073] Reference Figure 1 , Figure 1 A schematic diagram of an optional implementation environment provided for an embodiment of the present disclosure, wherein the implementation environment includes a terminal 101.

[0074] Exemplarily, in terminal 101, when a target web page is accessed through a browser, a browser plug-in of the browser is called to obtain the web page operation data of the target web page, and the browser plug-in is configured to obtain the web page operation data based on a debugging protocol, load the analysis model deployed on the browser, input the web page operation data into the analysis model for analysis, obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, display at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the web page operation data, and in response to the operation of selecting at least one optimization suggestion text, load the first optimization code corresponding to the selected optimization suggestion text, and optimize the target page based on the first optimization code.

[0075] The terminal 201 may be a mobile phone, a computer, an intelligent voice interaction device, an intelligent wearable device, an intelligent home appliance, an in-vehicle terminal, etc., but is not limited thereto. The terminal 201 and the server 202 may be connected directly or indirectly via wired or wireless communication, which is not limited in the present embodiment.

[0076] Reference Figure 2 , Figure 2 This is an optional flowchart of a web page processing method provided in an embodiment of the present disclosure. The web page processing method can be executed by a terminal, or can be executed by a terminal and a server in cooperation. The web page processing method includes but is not limited to the following steps S201 to S203.

[0077] Step S201: when accessing a target webpage through a browser, calling a browser plug-in of the browser to obtain webpage operation data of the target webpage.

[0078] Among them, the target web page is a web page in the website that needs to be analyzed and optimized in real time. The browser plug-in can be regarded as a monitoring tool, which is configured to obtain web page operation data based on the debugging protocol, and is used to collect web page operation data of the target web page accessed by the browser. When calling the browser plug-in of the browser, it can be to turn on full website monitoring to obtain the target web page in the website and the web page operation data associated with the target web page; it can also be to perform specified page element monitoring to obtain all web page operation data in the target web page, or to obtain web page operation data of specified elements in the target web page. The specified element can be an element state change, such as the number of control clicks, changes in input box content, etc., or it can be attribute information, such as image attributes, etc. The web page operation data is the data generated by the target web page during operation, including network layer operation data, rendering layer operation data, and execution environment layer operation data. These web page operation data can be divided into web page runtime data and web page structured data according to data characteristics.

[0079] In one possible implementation, when calling a browser plug-in of a browser to obtain the web page running data of a target web page, it can be specifically called to obtain the web page running data of the target web page by using an interface function based on a debugging protocol of the browser plug-in of the browser. The web page running data includes at least one of network layer running data, rendering layer running data, and execution environment layer running data. The debugging protocol can be regarded as a communication protocol that defines the interface specifications of the browser and realizes multi-dimensional, atomic-level data capture, covering core levels such as network, rendering, and JavaScript execution. The interface function of the debugging protocol is used to obtain the web page running data of the target network. Since the web page running data includes multiple types, different types of network running data require different types of interface functions to obtain, such as the Chrome Debugger Protocol (CDP).

[0080] Specifically, a browser plug-in is configured in the browser, and the browser's interface specifications are defined based on a debugging protocol, resulting in multiple interface functions capable of acquiring multi-dimensional data. When a target webpage is accessed through the browser, the browser plug-in's interface functions based on the debugging protocol are called to acquire multi-dimensional webpage operation data for the target webpage. By configuring the browser plug-in to acquire webpage operation data based on the debugging protocol, atomic-level webpage operation data can be obtained, thereby improving the quality and usability of webpage operation data and facilitating the accuracy of optimizing webpage targets.

[0081] In one possible implementation, when calling a browser plug-in's interface function based on a debugging protocol to obtain at least one dimension of webpage operation data for a target webpage, the browser plug-in may specifically call a network layer interface function based on the debugging protocol to obtain the target webpage's access request and response time, and determine the access request and response time as the network layer operation data; call a rendering layer interface function based on the debugging protocol to obtain the target webpage's layout redraw count, graphics performance data, and layer synthesis data, and determine the layout redraw count, graphics performance data, and layer synthesis data as the rendering layer operation data; and call an execution environment layer interface function based on the debugging protocol to obtain the target webpage's execution efficiency data and event blocking time, and determine the execution efficiency data and event blocking time as the execution environment layer operation data. The network layer interface function is used to obtain the target webpage's network layer operation data, where the network layer operation data includes the access request and response time, and the access request is an access request issued by the browser, including a request header and a request body. The rendering layer interface function is used to obtain the target webpage's rendering layer operating data. This data includes layout redraw counts, graphics performance data, and layer composition data. Graphics performance data includes frame rate and GPU cache, while layer composition data includes the number of layers and update frequency. The execution environment layer interface function is used to obtain the target webpage's execution environment layer operating data. This data includes execution efficiency data and event blocking duration. Execution efficiency data includes call stack depth and execution time. Event blocking duration specifically refers to the duration of event loop blocking.

[0082] Specifically, the browser plug-in of the browser is called based on the network layer interface function of the debugging protocol. The network layer interface function can be a network domain interface function. The network domain interface function includes an event monitoring interface function, an access request interface function, a response status interface function, and an access request modification interface function. The event monitoring interface function can be Network.enable, which is used to enable the network domain to monitor the event activities of the target web page. The access request interface function can be Network.requestWillBeSent, which is used to obtain the access request. The response status interface function can be Network.responseReceived, which is used to obtain the response time of the target page. The access request modification interface function can be Network.setExtraHTTPHeaders, which is used to modify the request header. First, the event monitoring interface function is called to enable the network layer, allowing the monitoring object to monitor event activity on the target page. Next, the access request interface function is called to obtain and record access requests. When obtaining access requests, the access request modification interface function needs to be enabled to facilitate operations such as identity injection and authentication information setting by the monitoring object. Finally, the response status interface function is called to obtain the response duration of the target page, specifically including the response duration of operations such as DNS query, TCP connection, SSL handshake, and first byte received (TTFB). The access request and response duration are determined as network layer operation data.

[0083] The browser plug-in of the browser is called to obtain the rendering layer interface function based on the debugging protocol, and the rendering layer interface function and the performance interface extension are combined to obtain the rendering layer operation data. The rendering layer interface function can specifically be a web page domain interface function, a document domain interface function and a visualization interface function. The web page domain interface function is used to obtain graphics performance data, the document domain interface function is used to obtain the number of layout redraws, and the visualization interface function is used to obtain layer synthesis data. Specifically, the number of layout redraws is determined by combining the layout offset event and the document domain interface function to capture the detailed context information of the layout offset in the target web page. The layout offset event can specifically be Layout.layoutShift. The frame rendering event under the web page domain interface function is used to obtain the rendering time of each frame in the target page to determine the frame rate, and the GPU memory occupancy is read through the system domain interface function to determine the GPU cache. The graphics performance data is obtained according to the frame rate and the GPU cache. Among them, the frame rendering event can specifically be HeadlessExperimental.beginFrame, and the system domain interface function can specifically be systemInfo.getInfo. Next, use a visualization interface function to visualize the compositing layer boundaries of the target webpage. The number of layers rendered in the target webpage and their update frequency are counted. Layer composition data is then generated based on the number of layers and update frequency. Specifically, the visualization interface function can be Overlay.setShowViewportSizeOnResize. The number of layout redraws, graphics performance data, and layer composition data are then determined as rendering layer performance data.

[0084] The browser plug-in of the browser is called based on the execution environment layer interface function of the debugging protocol. The execution environment layer interface function includes the code debugging domain interface function, the code execution domain interface function, and the performance monitoring interface function. The code debugging domain interface function is used to obtain execution efficiency data, the performance monitoring interface function is used to monitor the long tasks of the browser, and the code execution domain interface function is used to measure the event blocking time. Specifically, breakpoints are set in the key functions of the code through the code debugging domain interface function, and the call stack depth and execution time are recorded based on the breakpoint position. The execution efficiency data is obtained according to the call stack depth and execution time. The code debugging domain interface function can be Debugger.setBreakpoint. Then, the long tasks of the target web page are monitored through the performance monitoring interface function, and the probe code is injected through the code execution domain interface function to measure the event blocking time. The performance monitoring interface function can be PerformanceObserver, and the code execution domain interface function can be Runtime.evaluate. The execution efficiency data and event blocking time are determined as the execution environment layer operation data.

[0085] Furthermore, network assembly can be performed in the browser. For the network assembly function-level performance, the browser plug-in of the browser is called based on the code debugging domain interface function of the debugging protocol. The code debugging domain interface function includes a debugging monitoring interface function and a breakpoint setting interface function. The debugging monitoring interface function is used to enable network assembly debugging, and the breakpoint setting interface function is used to capture the event status of a specific network assembly function. Specifically, network assembly debugging is enabled through the debugging monitoring interface function, and then the breakpoint setting interface function is used to capture the function entry event or function exit event of the specific network assembly function. The execution time and memory usage of the function entry event or function exit event are counted, and the execution time and memory usage of the function entry event or function exit event are determined as the network assembly operation data.

[0086] By obtaining web page operation data through different interface functions, multi-dimensional web page operation data can be captured, providing rich and accurate web page operation data for subsequent analysis models to analyze target web pages, enabling the analysis model to comprehensively analyze target web pages from multiple angles, thereby helping to improve the accuracy of optimizing target web pages.

[0087] After obtaining the web page operation data, the web page operation data needs to be transmitted. Specifically, the web page operation data is encrypted based on a key using an authenticated encryption algorithm (AES-256-GCM). The key is dynamically generated by the browser's built-in encryption module, which can specifically be window.crypto.subtle.generateKey. The generated key is stored in the browser's secure storage area. Since web page operation sequence data has a certain regularity, repeated time series data will appear in the network operation sequence data. For web page operation sequence data, the web page operation sequence data is stored in a dictionary in a time series order, and the repeated time series data is encoded as a pointer to the previous position in the dictionary. The pointer can be expressed as [position, length, next time series data]. For example, the web page operation sequence data ABCABCD can be encoded as [A, B, C, (0, 3, D)], where (0, 3, D) represents time series data of length 3 starting from position 0 (i.e., ABC), followed by time series data D.

[0088] When a browser accesses a target page, the standard network identifiers and request headers in consecutive network requests often repeat frequently. In this case, the URL and request headers can be hashed, and their hash values ​​calculated. Similar network requests can be identified by comparing these values. For example, if standard network identifier A is Https: / / text.com / api / user?timestamp=111111, the hash values ​​of the domain name "text.com," the path "api," and the parameter "timestamp" can be calculated. If standard network identifier B is Https: / / text.com / api / user?timestamp=222222, the hashed version of standard network identifier B can be identified as [domain name: text.com, path: api / *, parameter: timestamp=*], indicating that standard network identifiers A and B are similar. Next, a sliding window is used to store web page runtime data. The sliding window size is dynamically adjusted to balance the compression rate of web page runtime data with memory consumption, thereby reducing storage usage.

[0089] For stored web page operation data, if it is hot data, it is temporarily stored in a temporary repository so that the analysis model can analyze the latest web page operation data in real time. At the same time, the browser asynchronously synchronizes the web page operation data to the persistent storage repository. If the web page operation data is cold data, it is directly stored in the persistent storage repository for sharding and archiving by day. An automatic cleanup policy can be set, such as automatic deletion after 30 days of storage.

[0090] Step S202: Load the analysis model deployed in the browser, input the web page operation data into the analysis model for analysis, obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and display the at least one optimization suggestion text in the browser.

[0091] Among them, the analysis model is used to analyze the web page operation data of the target web page accessed by the browser. The optimization suggestion text is a text that displays the shortcomings of the web page and provides web page optimization suggestions. The content of the optimization suggestion text may include current data analysis, specific solutions, optimization suggestion classification, etc. The specific solution is a specific optimization step, for example, it may be delayed loading of non-first screen images. The optimization suggestion classification is used to indicate the degree of impact of the problem described in the optimization suggestion text on the target page, for example, it may be serious, warning, prompt, etc. The first optimization code is the code that executes the optimization suggestions in the optimization suggestion text, which is used to optimize the web page operation data. The analysis model is used to analyze the web page operation data. The analysis model is a hybrid network structure, including multiple branch modules.

[0092] In one possible implementation, in the process of inputting web page operation data into an analysis model for analysis to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, a sliding window can be used to construct a time series input vector based on the web page operation sequence data, the web page structured data is encoded into a structured input vector, the time series input vector and the structured input vector are input into the analysis model for mapping, the time series features corresponding to the time series input vector and the structured features corresponding to the structured input vector are obtained, the time series features and the structured features are fused to obtain a fusion feature, and an analysis is performed based on the fusion feature to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text. Wherein, the web page operation sequence data includes web page operation sequence data and web page structured data, the web page operation sequence data includes performance indicator sequence data, such as memory usage data, FPS, etc., and the web page structured data includes the number of web page structure nodes and the number of style sheet rules. The time series input vector is a vector obtained by processing a plurality of web page operation sequence data according to the sliding window, and the structured input vector is a vector obtained by encoding the dimensions of the web page structured data.

[0093] Specifically, first set the window size and sliding step of the sliding window, use the sliding window to traverse the web page runtime data according to the sliding step, convert the web page runtime data into multiple time window slices, each time window slice contains the web page runtime data of a certain time range, and construct a time series data vector based on multiple time window slices. For example, if the web page runtime data is 300ms, the sliding window size is 100ms, and the sliding step is 50ms, use the sliding window to traverse the network runtime data according to the sliding step, and convert the web page runtime data into 5 time window slices. The time window slice can be expressed as x i (i=1,2,3,4,5), each time window slice x iContains the corresponding web page runtime series data within the time range of [50(i-1), 50(i+1)]ms, and performs feature aggregation on the web page runtime series data contained in multiple time window slices to construct a time series data vector, then the time series data vector can be expressed as [x1, x2, x3, x4, x5]. At the same time, the web page structured data is input into the encoding network for encoding, and the web page structured data is encoded into a structured input vector of a fixed dimension. For example, the web page structured data can be encoded into a 128-dimensional structured input vector. Then, the time series input vector and the structured input vector are input into the analysis model for mapping. The time series features corresponding to the time series input vector and the structured features corresponding to the structured input vector are obtained through the branch module of the analysis model. The time series features and the structured features are fused through the attention mechanism to obtain fused features. Then, analysis is performed based on the fused features to obtain at least one optimization suggestion text and the first optimization code corresponding to the optimization suggestion text. By vectorizing the web page runtime time series data through a sliding window, the web page runtime time series data can be converted into a feature structure suitable for the input of the analysis model, while retaining the local dependencies and contextual connections of the time series data. Moreover, by performing feature aggregation on the web page runtime time series data of a certain time series length within the sliding window, the noise of the web page runtime time series data can be smoothed and the robustness of the analysis model to outliers can be improved. In addition, by encoding the web page structured data into a structured input vector of fixed dimension, the format of the input data can be unified, and the complexity of the analysis model can be reduced, thereby improving the accuracy of optimizing the target web page.

[0094] It should be noted that when setting the window size and sliding step of the sliding window, the window size must be larger than the sliding step. This setting ensures that in two adjacent time window slices, the latter time window slice contains part of the web page runtime data of the previous time window slice, maintaining the continuity of the web page runtime data in the time window slice.

[0095] In one possible implementation, in the process of fusing temporal features and structured features to obtain fused features, feature weights between the temporal features and the structured features may be determined based on an attention mechanism, and a weighted sum of the temporal features and the structured features is performed based on the feature weights to obtain the fused features. The attention mechanism may be a cross-attention mechanism for feature fusion.

[0096] Specifically, the temporal features and structured features are input into the attention mechanism. The attention mechanism determines the feature weight according to the correlation between the temporal features and the structured features. The temporal features are weighted based on the feature weight to obtain the weighted temporal features. The weighted temporal features are added to the structured features to obtain the fusion features. The fusion features can be expressed by the formula F = W·h t +F sGet, h t is the time series feature, W is the feature weight, F s It is a structural feature.

[0097] Alternatively, the time series features can be weighted based on the feature weight to obtain weighted time series features. The weighted time series features can be calculated according to the formula H t =h t ·S obtains weighted time series features. Obtain learnable weight parameters, perform weighted summation on weighted time series features and structural features based on the weight parameters, and obtain fusion features. The fusion features can be obtained by the formula F = β·H t +(1-β)F s We get β as a learnable weight parameter.

[0098] By using an attention mechanism to determine the feature weights of temporal and structural features and performing a weighted summation, this approach can automatically capture the nonlinear connections between temporal and structural features through dynamic learning, adaptively adjusting the contribution of different contextual features. This enables real-time analysis and efficient computation of the analytical model, improving data fusion. Furthermore, this method reduces the risk of overfitting the analytical model through the sparsity of feature weights, helping to improve the generalization ability of the analytical model and thus increasing the flexibility of optimizing the target webpage.

[0099] In one possible implementation, in the process of determining the feature weights between temporal features and structured features based on an attention mechanism, the temporal features and structured features can be mapped to the same dimension based on a learnable mapping matrix, a query matrix is ​​determined based on the mapped temporal features, a key matrix is ​​determined based on the mapped structured features, and the feature weights between the temporal features and structured features are determined based on the similarity between the query matrix and the key matrix. The mapping matrix is ​​used to map features from the original dimension to a specific dimensional space, and the mapping matrix includes a temporal feature mapping matrix and a structured feature mapping matrix. The temporal feature mapping matrix is ​​used to map temporal features, and the structured feature mapping matrix is ​​used to map structured features.

[0100] Specifically, the time series features can be expressed as T is the time dimension, which means that the time series feature contains features of T time steps. t is the original feature dimension of the features of T time steps, and the structured features can be expressed as d sis the original feature dimension of the structured feature. Get the time series feature mapping matrix and the structured feature mapping matrix, map the time series feature from the original feature dimension to the specific feature dimension by performing matrix multiplication on the time series feature and the time series feature mapping matrix, and use the result of the matrix multiplication of the time series feature and the time series feature mapping matrix as the query matrix; map the structured feature from the original feature dimension to the specific feature dimension by performing matrix multiplication on the structured feature and the structured feature mapping matrix. At this time, the structured feature can be represented as a row vector, and use the result of the matrix multiplication of the structured feature and the structured feature mapping matrix as the key matrix. For example, get the time series feature mapping matrix and the structured feature map matrix After matrix multiplication of the time series features and the time series feature mapping matrix, the query matrix is ​​obtained The key matrix is ​​obtained by matrix multiplication of the structured feature and the structured feature map matrix At this time, the feature dimensions of the temporal features and the structured features are mapped to the same dimension d.

[0101] Then, the similarity between the query matrix and the key matrix is ​​obtained based on the dot product result of the query matrix and the key matrix. The similarity can be calculated using the formula Calculate, K T is the transpose of the key matrix, q i Represents the i-th row in the query matrix Q, i=1,2,...,T. The calculated similarity is a column vector, which can be expressed as S=[s1,...,s T ] T , similarity element s i Represents the similarity between the temporal features and the structured features corresponding to the i-th time step, and the calculated similarity is used as the feature weight between the temporal features and the structured features. By determining the feature weights between the temporal features and the structured features based on the similarity between the query matrix and the key matrix, this similarity calculation quantifies the degree of semantic association between the temporal features and the structured features, and can effectively capture the nonlinear relationship between the temporal features and the structured features, which helps to improve the accuracy of optimizing the target web page. In addition, the similarity calculation is based on matrix multiplication, which can be accelerated by GPU, improving the efficiency of feature extraction of the analysis model, and the similarity value itself has a clear physical meaning. Its clear physical meaning also improves the interpretability of the feature weights, further improving the accuracy of optimizing the target web page.

[0102] In addition, after obtaining the similarity Sim=[s1,...,s T ] T Later, each similarity element s in the similarity can be i Perform normalization so that By normalizing similarities and mapping each similarity element to the same scale, we avoid parameter redundancy caused by large numerical differences, thereby improving the optimization efficiency of the analysis model. Furthermore, normalizing similarities, or feature weights, allows the analysis model to focus more on the relative relationship between temporal and structural features, helping it learn more universal patterns and thus improving its generalization capabilities.

[0103] In one possible implementation, the attention mechanism is a multi-head attention mechanism. In the process of determining the feature weights between the temporal features and the structured features based on the attention mechanism, performing weighted summation of the temporal features and the structured features based on the feature weights, and obtaining the fusion features, specifically, a query matrix is ​​constructed based on the temporal features, and a key matrix and a value matrix are constructed based on the structured features. The query matrix, key matrix, and value matrix are split into multiple independent heads along the model dimension. Each independent head includes the corresponding query matrix, key matrix, and value matrix, and a different projection matrix is ​​used for each independent head. Taking the query matrix as an example, the query matrix after projection is is the projection matrix of the query matrix of the ith independent head, and the projection of the key matrix and the value matrix are similar. Then, for each independent head, the similarity between the query matrix and the key matrix is ​​determined according to the dot product result of the query matrix and the key matrix, and the feature weight is obtained by normalizing the ratio of the similarity and the scaling factor. i It can be determined by the following formula,

[0104]

[0105] Among them, K i ' T is the transpose of the projected key matrix, is the scaling factor, and softmax(·) is the normalization function. Next, the feature weights of each independent head are weighted and summed with the projected value matrix to obtain the fusion feature. The fusion feature A can be obtained by the following formula, V i ′ is the value matrix after projection of the i-th independent head, and N is the number of independent heads.

[0106]

[0107] By splitting the query matrix, key matrix, and value matrix into multiple independent heads, different independent heads can capture different correlation patterns between temporal features and structured features. At the same time, the multi-head attention mechanism realizes on-demand extraction of structured features from temporal features, enabling the analysis model to dynamically adjust its dependence on structured features based on the contextual information of temporal features, thereby improving the flexibility and expressiveness of feature fusion, thereby improving the flexibility and accuracy of optimizing the target page.

[0108] In one possible implementation, the analysis model includes branch modules corresponding to different candidate optimization tasks, and each branch module includes a timing processing module and an encoding module. The timing processing module is used to map the timing input vector, and the encoding module is used to map the structured input vector. When loading the analysis model deployed on the browser, it can be specifically to display the task identifiers of each candidate optimization task in the browser, and in response to the operation of selecting at least one task identifier, the branch module corresponding to the task identifier is loaded. Among them, the candidate optimization task is the task of optimizing the target web page, and the candidate optimization tasks include rendering optimization tasks, etc. The task identifier is used to distinguish and mark each candidate optimization task, and can be composed of one or more of numbers, letters, and symbols. The timing processing module is used to extract features from the timing input vector, and the timing processing module includes multiple timing processing layers, and the timing processing layer can specifically be a Transformer encoder structure; the encoding module is used to extract features from the structured input vector, and the encoding module includes multiple void convolution layers.

[0109] Specifically, the analysis model includes multiple branch modules, each of which corresponds to a different candidate optimization task. One branch module may correspond to one candidate optimization task, or multiple branch modules may correspond to one candidate optimization task, or one branch module may correspond to multiple candidate optimization tasks. Each branch module includes a timing processing module and an encoding module. The timing processing module and the encoding module are sub-branch modules in the branch module and are set in parallel in the branch module. Figure 3 , Figure 3 This is an optional schematic diagram of the analysis model structure provided by the embodiments of the present disclosure. When a time series input vector and a structured input vector are input to the branch module, the time series processing module maps the time series input vector and extracts features from the time series input vector to obtain time series features. The encoding module maps the structured input vector and extracts features from the structured input vector to obtain structured features.

[0110] When loading the analysis model deployed in the browser, the task identifiers of each candidate optimization task are displayed in the browser. When an operation of at least one task identifier is selected, in response to the selection operation, a branch module for processing the candidate optimization task corresponding to the task identifier is loaded. For example, the analysis model has a branch module A for processing task A, a branch module B for processing task B, and a branch module C for processing task C. When the task identifier selected by the operation object corresponds to task A, only branch model A needs to be loaded to process task A. By deploying the analysis model in the browser, the browser can directly load the analysis model, which improves the real-time performance and security of the analysis model in analyzing web page operation data. Furthermore, since the analysis model includes multiple branch modules, the corresponding branch module is loaded according to the selected candidate optimization task. This on-demand loading method speeds up the loading speed of the analysis model, reduces the occupancy of the running memory and the computing consumption. At the same time, this on-demand loading method also improves the focus of task optimization, avoids interference from other tasks, and improves the accuracy and flexibility of optimizing the target web page.

[0111] In addition, when loading an analysis model deployed in a browser, the model weights of the analysis model can be preloaded and cached in the browser. When the task identifier selection operation is triggered, the branch module for processing the candidate optimization task corresponding to the task identifier is loaded and the model weights are read from the cache, which can avoid network delays when processing the candidate optimization task for the first time.

[0112] Step S203: In response to the operation of selecting at least one optimization suggestion text, loading the first optimization code corresponding to the selected optimization suggestion text.

[0113] In step S203, at least one optimization suggestion text is selected. In response to the operation, the browser management platform loads a first optimization code corresponding to the selected optimization suggestion text and optimizes the target page based on the first optimization code.

[0114] In one possible implementation, in response to the operation of selecting at least one optimization suggestion text, in the process of loading the first optimized code corresponding to the selected optimization suggestion text, specifically in response to the operation of selecting at least one optimization suggestion text, a debugging window is displayed in the browser, and the original code to be optimized in the current code is highlighted in the debugging window. In response to the operation of confirming the optimization of the target web page, the first optimized code corresponding to the selected optimization suggestion text is loaded to optimize the original code. The debugging window is used to display the current code loaded when the browser accesses the target web page, and the original code is the code in the current code that has not been optimized. The operation of optimizing the original code can be a replacement operation, specifically replacing the original code with the first optimized code, or a deletion operation, specifically deleting the original code from the current code.

[0115] Specifically, when at least one optimization suggestion text is selected, in response to the selection operation, a debugging window is displayed in the browser, the debugging window displays the current code being run, the current data analysis in the optimization suggestion text is regularized and matched with the current code, the original code to be optimized in the current code is obtained, the original code to be optimized in the current code is highlighted in the debugging window, and the reference is made to the original code to be optimized. Figure 4 , Figure 4 An optional schematic diagram of a display debugging window provided by an embodiment of the present disclosure, wherein an optimization suggestion text selection pop-up window 404 is displayed in a target page 403 loaded by a browser 401, and when an optimization selection control 405 corresponding to the optimization suggestion text A is selected, a debugging window 402 is displayed in the browser 401, and the current code loaded when the browser accesses the target web page is displayed in the debugging window 402, and the original code to be optimized in the current code is highlighted in the debugging window 402 (in the gray area). Then, the confirmation control 406 is clicked to confirm the selection to optimize according to the optimization suggestion text A. In response to the operation of confirming the optimization of the target web page, the browser management platform loads the first optimization code corresponding to the selected optimization suggestion text A, and optimizes the original code according to the first optimization code. By highlighting the original code to be optimized in the current code in the debugging window, the original code to be optimized can be quickly located in the current code, reducing the time cost of code screening. At the same time, highlighting the original code can assist the development object in sorting out the code logic and improving the readability of the code. On this basis, optimization according to the selected optimization suggestion text can improve the accuracy of the optimized target web page.

[0116] During the process of optimizing the original code based on the first optimized code, if the optimization suggestion text indicates that the target webpage needs to be updated, the original code can be replaced with the first optimized code; if the optimization suggestion text indicates that the original code is redundant, the original code can be deleted from the current code. In addition, if the optimization suggestion text indicates that new content or webpage control policies need to be added to the target webpage, the first optimized code can be inserted into the corresponding position of the current code without optimizing the original code.

[0117] In one possible implementation, after optimizing the target page by optimizing the original code according to the first optimization code, the analysis model can be continuously optimized by triggering a feedback control. Specifically, the feedback control can be displayed in a debugging window. In response to the operation of triggering the feedback control, the first optimization code and the web page operation data are sent to a server used to train the analysis model, so that the server constructs negative samples based on the first optimization code and the web page operation data and retrains the analysis model based on the negative samples. The server receives the retrained analysis model sent by the server and deploys the retrained analysis model to the browser. The feedback control is an interactive feedback component used to provide feedback to the browser on the optimized target page. The optimized target page includes two situations: the presence of anomalies and the absence of anomalies.

[0118] Specifically, refer to Figure 5 , Figure 5An optional schematic diagram of the debugging window page provided for the embodiment of the present disclosure, wherein a feedback control 501 is configured and displayed in the debugging window 402. When the feedback control 501 is clicked, the browser management platform sends the first optimization code and the web page operation data to the server in response to the operation of triggering the feedback control 501. Since the analysis model is deployed in the browser, in order to reduce the computing consumption and storage pressure of the browser environment, the training of the analysis model is performed in the server. The browser management platform sends the first optimization code and the web page operation data to the server. When the feedback control indicates that there is a problem with the target page before optimization and there is a problem with the target page after optimization, it means that the generated first optimization code cannot solve the abnormal situation of the target page, and the optimization process is marked as abnormal optimization. At this time, the server constructs a negative sample pair based on the page operation data and the first optimization code, and trains the analysis model based on the negative sample pair, so that the analysis model can learn the key features of the negative sample pair and the mismatch between the page operation data and the corresponding first optimization code. When the feedback control indicates that there is no problem with the target page before optimization but there is a problem with the target page after optimization, it means that there is no abnormality in the target page and the analysis model has misreported it, and the optimization process is marked as a false positive. At this time, the server constructs a negative sample pair based on the page operation data and the first optimization code obtained based on the page operation data, and trains the analysis model based on the negative sample pair, so that the analysis model can learn the key features of normal page operation data from the page operation data, and avoid the subsequent analysis model misjudging the normal page operation data as abnormal page operation data and generating the first optimization code. When the feedback control indicates that there is a problem with the target page before optimization and there is no problem with the target page after optimization, it means that the generated first optimization code has solved the abnormality of the target page, and the optimization process is marked as normal optimization. At this time, the server constructs a positive sample pair based on the page operation data and the first optimization code obtained based on the page operation data, and trains the analysis model based on the positive sample pair, so that the analysis model can learn the key features of the positive sample pair and the intrinsic connection between them. Furthermore, when the feedback control indicates that the target page has a problem but has not been optimized, it indicates that the analysis model failed to capture the target page's anomaly, resulting in a missed detection. In this case, the server uses the page's running data as a negative sample and trains the analysis model based on this negative sample. This allows the analysis model to learn the key characteristics of the missed anomaly, preventing subsequent analysis models from missing such anomalies. When the server completes training the analysis model, it sends it to the browser management platform. The browser management platform receives the retrained analysis model sent by the server and deploys it to the browser.By actively providing feedback on the optimized target page through the feedback control, optimization deviations can be quickly identified based on the feedback results, and the analysis model can be trained based on the page operation data and the first optimization code, forming a continuous iterative improvement of "feedback-optimization-feedback again", realizing dynamic training of the analysis model, improving the accuracy of the analysis model analysis, and thus improving the accuracy of the optimized target page.

[0119] In one possible implementation, the feedback control includes multiple sub-controls, each of which corresponds to a different feedback text. In response to the operation of triggering the feedback control, the first optimization code and the web page operation data are sent to the server used to train the analysis model. In the process of the server constructing a negative sample based on the first optimization code and the web page operation data and retraining the analysis model based on the negative sample, it can be specifically in response to the operation of triggering one of the sub-controls, the first optimization code, the web page operation data, and the feedback text corresponding to the triggered sub-control are sent to the server used to train the analysis model, so that the server constructs a negative sample based on the first optimization code and the web page operation data, and adds a constraint item to the loss function according to the feedback text, and retrains the analysis model according to the negative sample and the loss function after adding the constraint item. Among them, the feedback text is a specific description of the abnormal situation when the target page still has an abnormal situation after optimization. The feedback text includes functional abnormality, no performance improvement, etc. The sub-control is used to feedback the specific abnormal situation of the target page after optimization to the browser, and each sub-control has a corresponding feedback text. The loss function is used to evaluate the training effect of the analysis model. The loss function includes constraints, which are used to guide the analysis model to learn in a specific direction. Specifically, it can guide the analysis model to learn how to understand and handle the abnormal situations described in the feedback text, corresponding to the specific abnormal situations described in the feedback text, such as abnormal functions after optimization and no performance improvement after optimization. The constraints can be code semantic constraints or performance constraints.

[0120] Specifically, refer to Figure 6 , Figure 6Another optional schematic diagram of the debugging window page provided by the embodiment of the present disclosure, when the feedback control 501 is triggered in the debugging window 402, a feedback drop-down list 601 appears in the debugging window 402, and the feedback drop-down list 601 includes multiple option bars, each option bar includes a feedback text and its corresponding sub-control 602, and the feedback texts are functional abnormality, no performance improvement, network delay, and others. By triggering one of the sub-controls 602, the analysis model is instructed to learn the abnormal situation described by the feedback text. When the browser responds to the operation of triggering the sub-control with the feedback text of functional abnormality, it means that the analysis model fails to identify the logical dependency of the code, resulting in the generated first optimized code causing functional abnormality. At this time, the page operation data and the first optimized code are sent to the server, and the server constructs a negative sample pair based on the page operation data and the first optimized code obtained based on the page operation data, and performs code semantic constraints on the analysis model according to the functional abnormality, that is, adding a code semantic constraint term to the loss function. The loss function after adding the code semantic constraint term can be expressed as L=L main +R sem , L main is the basic function without adding constraints, R sem is the code semantic constraint item, and the code semantic constraint item R sem It can be obtained by formula R sem =λ1·Sim(C,C′), where Sim(·) is the similarity function, which can specifically be cosine similarity, λ1 is the penalty coefficient, C is the original code, and C' is the first optimized code. Finally, the analysis model is retrained based on the loss function with negative samples and the addition of code semantic constraints. Since the target page is optimized without changing the original functionality, the penalty level is determined based on the similarity between the original code and the first optimized code in the code semantic constraints. This effectively improves the analysis model's understanding of code semantics and logic.

[0121] When the browser responds to the operation of the sub-control that triggers the feedback text with no performance improvement, it indicates that the analysis model has an inaccurate understanding of the model performance improvement, resulting in the failure of the generated first optimization code to optimize the target page. At this time, the page operation data and the first optimization code are sent to the server. The server constructs a negative sample pair based on the page operation data and the first optimization code obtained based on the page operation data, and imposes performance constraints on the analysis model based on the no performance improvement, that is, adding a performance constraint term to the loss function. The loss function after adding the performance constraint term can be expressed as L=L main +R per , R per is the performance constraint item, which can be expressed by formula R per=λ2·max(0,Q(C′)-Q(C)), where Q(C′) is the original performance quantization score based on the original code, Q(C′) is the optimized performance quantization score based on the first optimized code, and Q(C′) is the maximum value function. A penalty is generated when the optimized performance quantization score Q(C′) is greater than or equal to the original performance quantization score Q(C). For example, when the performance is computational complexity or response time, when the optimized performance quantization score Q(C′) is greater than the original performance quantization score Q(C), it means that the optimized computational complexity or response time is higher than the original computational complexity or response time. When the optimized performance quantization score Q(C′) is equal to the original performance quantization score Q(C), it means that the optimization does not reduce the computational complexity or response time. Finally, the analysis model is retrained based on the loss function after negative samples and the addition of performance constraints.

[0122] Alternatively, multiple sub-controls can be triggered simultaneously, so that the analysis model is trained based on the training loss of adding multiple constraints. For example, if the sub-controls corresponding to functional abnormality and no performance improvement are triggered at the same time, code semantic constraints and performance constraints can be added to the loss function. The loss function L after adding constraints can be expressed as L = L main +β·R per +(1-β)R per , β is the constraint term coefficient, which is used to control the contribution of each constraint term in the loss function L.

[0123] By breaking down the feedback control into multiple sub-controls with different feedback texts, it is possible to accurately identify optimization problems based on the feedback results, build constraints based on the optimization problems reflected in the feedback text, and train the analysis model based on the loss function of the newly added constraints. This can enhance the analysis model's ability to solve the optimization problems reflected in the feedback text, thereby improving the accuracy of the analysis model's analysis and thus improving the accuracy of the optimization target page.

[0124] In one possible implementation, in response to confirming the optimization of a target webpage, the process of loading the first optimized code corresponding to the selected optimization suggestion text to optimize the original code may specifically include generating a dependency tree graph indicating the relationship between the original code and the associated code, and displaying the dependency tree graph in a debugging window. In response to selecting at least one graph node corresponding to an associated code in the dependency tree graph, the associated code corresponding to the selected graph node is obtained. In response to confirming the optimization of the target webpage, the associated code is input into an analysis model for analysis to obtain a second optimized code, and the first and second optimized codes corresponding to the selected optimization suggestion text are loaded to optimize the original code and the associated code. The dependency tree graph indicates static call relationships between the original code and the associated code, such as function calls, module dependencies, and class inheritance. The dependency tree graph includes graph nodes corresponding to the original code and the associated code, respectively. The associated code is code in the current code other than the original code and is associated with the original code, such as code that can call the original code or import the original code. Different associated codes may represent the execution of different subtasks, or may be used to control different functional modules.

[0125] Specifically, a dependency tree is constructed based on the calling relationship between the original code and the associated code, and the dependency tree is displayed in the debug window. Figure 7 , Figure 7 Another optional schematic diagram of the debugging window page provided in the embodiment of the present disclosure, wherein a code map control 701 is configured and displayed in the debugging window 402. After the code map control 701 is triggered, a dependency tree map 702 is displayed in the debugging window 402, and at least one map node can be selected in the dependency tree map 702.

[0126] When at least one graph node is selected in the dependency tree graph, in response to the selection operation, the associated code corresponding to the selected graph stage is obtained. The associated code is input into the analysis model for analysis. Since the analysis model also includes a code rewriting module, when the associated code is input into the analysis model for analysis, the code rewriting module of the analysis model will rewrite and optimize the associated code according to the first optimized code to obtain the second optimized code. The first optimized code corresponding to the selected optimization suggestion text and the second optimized code associated with the first optimized code are loaded, and the original code and the associated code are optimized. For example, Figure 7As shown, the dependency tree graph includes graph nodes A, B, C, D, and E. Graph node A corresponds to the original code, and graph nodes B and E correspond to the associated code. Graph nodes B and E are selected, and the associated code corresponding to these nodes is input into the analysis model for analysis, resulting in the second optimized code corresponding to these nodes B and E. By constructing a dependency tree graph, the static call relationship between the original code and the associated code can be clearly displayed, allowing for a quick understanding of the code logic of the current code. On this basis, the associated code corresponding to the graph nodes in the dependency tree graph can be accurately selected for optimization, thereby improving the accuracy of optimizing the target webpage.

[0127] In one possible implementation, in order to enable the analysis model to be successfully deployed to the browser, the analysis model can be lightweight. First, the knowledge distillation method is used to train the teacher-student network, and the large model pre-trained on a massive web page running data set is used as the teacher model; the knowledge of the teacher model is compressed into the student model by combining the KL divergence and cross entropy distillation loss function, so that the student model can significantly reduce the number of parameters and computational complexity while maintaining performance close to that of the teacher model. The obtained student model is the analysis model of the embodiment of the present disclosure, wherein the distillation loss function can be used as the basic function of this solution. Secondly, in the reasoning process, on the one hand, through network assembly optimization, the model weights of the analysis model are converted into a data format compatible with the network assembly, and parallel computing instructions are used to realize parallel computing, thereby improving the reasoning speed. On the other hand, in response to the computational bottleneck of the convolutional layer in the analysis model, a web graphics processor is used for hardware acceleration to improve the reasoning efficiency (i.e., analysis efficiency) of the analysis model.

[0128] In one possible implementation, when training a student model (analysis model), sample web page operation data is obtained. The sample web page operation data may include sample network layer operation data, sample rendering layer operation data, and sample execution environment layer operation data. Corresponding sample standard code is obtained based on the sample web page operation data. The sample standard code is used as the true label of the sample web page operation data. The sample web page operation data is input into the teacher model for reasoning to obtain reference optimized code. Next, supervised training is performed on the student model based on the sample web page operation data and the sample code. The sample web page operation data is input into the student model for analysis, and sample optimized code is output. A cross-entropy loss is determined based on the difference between the sample optimized code and the sample standard code. A KL divergence is determined based on the difference between the sample optimized code and the reference optimized code. A distillation loss function is determined based on the cross-entropy loss and the KL divergence. The student model is trained based on the distillation loss function, so that the student model can learn the code logic from the true label and learn its reasoning method from the reference optimized code output by the teacher model, thereby achieving more efficient training.

[0129] Reference Figure 8 , Figure 8 This is an optional overall flow diagram of the page processing method provided in the embodiment of the present disclosure. The following is a complete overall description of the principles of the page processing method in the embodiment of the present disclosure:

[0130] The page processing method provided by the embodiment of the present disclosure is implemented based on four modules: a data acquisition module, a data storage module, an analysis model, and a visualization module. The data acquisition module is used to collect atomic-level, multi-dimensional page operation data; the data storage module is used to encrypt, compress, and store the page operation data; the analysis model is used to analyze the page operation data and generate an optimization suggestion text and a first optimization code corresponding to the optimization suggestion text; and the visualization module is used to provide an interactive visualization analysis interface.

[0131] First, a browser plug-in is configured in the browser. Based on the debugging protocol, the browser's interface specification is defined to obtain multiple interface functions. When a target page is accessed through the browser, the browser plug-in's network layer interface function based on the debugging protocol is called to obtain network layer operation data. The browser plug-in's rendering layer interface function based on the debugging protocol is called to obtain rendering layer operation data. The browser plug-in's execution environment layer interface function based on the debugging protocol is called to obtain execution environment layer operation data. The browser plug-in's code debugging domain interface function based on the debugging protocol is called to obtain network assembly operation data. This method generates atomic-level, multi-dimensional page operation data.

[0132] Then, an authenticated encryption algorithm is used to encrypt the web page operation data based on a key. The key is dynamically generated by the encryption module, and the generated key is stored in the browser's secure storage area. The web page operation sequence data is searched, divided, and compressed for optimization, and the web page operation sequence data is stored in a dictionary in chronological order. The standard network identifiers and request headers for continuous network requests are hashed to identify the similarities between the standard network identifiers and request headers of different network requests. Then, a sliding window is used to store the web page operation data, and the compression rate and memory consumption of the web page operation data are balanced by dynamically adjusting the size of the sliding window to reduce storage occupancy. For the stored web page operation data, if the web page operation data is hot data, the web page operation data is temporarily stored in a temporary storage repository, and the browser asynchronously synchronizes the web page operation data to the persistent storage repository. If the web page operation data is cold data, the web page operation data is directly stored in the persistent storage repository for sub-database storage, and an automatic cleanup strategy is set.

[0133] Next, the web page runtime data is input into an analysis model for intelligent analysis. The analysis model comprises an input layer, a processing layer, and an output layer. The processing layer includes multiple branch modules, each of which includes a time series processing module and an encoding module. The web page runtime data includes web page runtime data and web page structured data. In the input layer of the analysis model, the web page runtime data is converted into time window slices, and a time series input vector is generated using a pre-set sliding window. Simultaneously, the web page structured data is encoded into a fixed-dimensional structured input vector. When the time series input vector and the structured input vector are input into the processing layer, feature extraction is performed on the time series input vector using the time series processing module to obtain time series features that capture global dependencies across time steps. Local feature extraction is performed on the structured input vector using the encoding module to obtain structured features. Next, feature weights are obtained through an attention mechanism, and the time series features and structured features are dynamically weighted based on the feature weights to obtain fused features. When the fused features are input into the output layer, the output layer outputs at least one optimization suggestion text and a first optimization code corresponding to the unified suggestion text based on the fused features.

[0134] Because the analysis model is deployed in the browser, it needs to be lightweight. On the one hand, a knowledge distillation method is used to train the teacher-student network. A large model pre-trained on a massive web page running data set is used as the teacher model. The knowledge of the teacher model is compressed into the student model through a distillation loss function that combines KL divergence and cross entropy. This allows the student model to maintain performance close to that of the teacher model while reducing the number of parameters and computational complexity. On the other hand, the network assembly is optimized by converting the analysis model weights into a data format compatible with the network assembly. Hardware acceleration using a web graphics processor is used to address the computational bottleneck of the convolutional layer in the analysis model. These two methods accelerate the inference speed of the analysis model.

[0135] Because each branch module in the analysis model's processing layer corresponds to a different candidate optimization task, when loading the analysis model deployed in the browser, the corresponding branch module can be loaded based on the selected candidate optimization task. Furthermore, when loading the analysis model deployed in the browser, the model weights can be preloaded and cached in the browser to reduce the latency of the analysis model's initial inference.

[0136] Next, the resource dependencies and rendering performance of the target page analysis are visualized based on the visualization module. For resource dependency visualization, a resource dependency graph is constructed based on the visualization library. The Sankey library provides a dynamic node layout algorithm for the Sankey diagram, automatically calculating node positions and edge flow directions to achieve dynamic layout of node data. At the same time, the request duration is mapped by edge thickness or transparency, and resource size is mapped by node area to generate a Sankey diagram. For rendering performance visualization, the browser plug-in's rendering layer interface function based on the debugging protocol is called to obtain rendering layer runtime data. The document domain interface function is used to obtain the element coordinates of each element on the target page. The web graphics library shader is used to map the layout redraw frequency in the rendering layer runtime data to a color gradient, thereby drawing a rendering heat map for the target page.

[0137] Next, interactive design is performed to enhance the optimization experience. The browser communicates with the analysis model via a communication protocol. When at least one optimization suggestion text is selected, the original code to be optimized is dynamically loaded within the current code on the browser's debugging page and highlighted, providing real-time optimization feedback. Furthermore, elastic and grid layouts are implemented on the target page to achieve responsive design, allowing the target page to automatically adjust its layout structure based on different screen sizes, resolutions, and other parameters.

[0138] Next, to prevent the visualization process from interfering with the analytical model's analysis of web page data, a virtual list technique was used to virtually scroll the web page across multiple network request records, rendering only the elements visible within the viewport. Alternatively, frequently updated charts were rendered to a canvas extension, allowing the rendering process to occur in a separate thread, avoiding blocking the main thread used for analyzing web page data.

[0139] The page processing method provided by the embodiment of the present disclosure deploys the analysis model to the browser, so that the analysis process of the web page operation data can be carried out on the browser side without uploading to the cloud, thus avoiding the risk of data leakage. At the same time, the analysis model uses the atomic-level, multi-dimensional web page operation data obtained by the browser plug-in based on the interface function of the debugging protocol to perform real-time analysis, which can achieve millisecond-level response and meet the dynamic optimization requirements of the target web page. In addition, the network assembly and web page graphics processing technology are combined with the lightweight model design to ensure that the analysis model can run efficiently on the browser side. In addition, the analysis model can adapt to the optimization requirements of different technology stacks by learning multi-dimensional web page operation data, generate accurate optimization suggestion text and first optimization suggestion, and can facilitate users to select the first optimization code to be loaded, thereby improving the flexibility when optimizing the target web page.

[0140] In one possible implementation, the web page processing method provided by the embodiments of the present disclosure can be applied to a web page optimization system. Specifically, the web page optimization system obtains multi-dimensional web page operation data of a target page by calling an interface function based on a debugging protocol of a browser plug-in. The web page operation data is input into an analysis model for analysis to obtain an optimization suggestion text and a first optimization code corresponding to the optimization suggestion text. The web page optimization system optimizes the target page based on the first optimization code in sequence according to the optimization suggestion classification of the optimization suggestion text. The development object can actively provide feedback in the debugging window to dynamically train the analysis model, thereby improving the accuracy of the optimization suggestion text and the first optimization code generated by the analysis model, thereby improving the accuracy and flexibility of the optimized target page.

[0141] It will be appreciated that, although the various steps in the above-mentioned various flow charts are shown in sequence according to the indication of the arrows, these steps are not necessarily performed in sequence according to the order indicated by the arrows. Unless clearly stated in the present embodiment, the execution of these steps does not have strict order restrictions, and these steps can be performed in other orders. Moreover, at least a portion of the steps in the above-mentioned flow charts can include multiple steps or multiple stages, and these steps or stages are not necessarily performed at the same time, but can be performed at different times, and the execution order of these steps or stages is not necessarily performed in sequence, but can be performed in turn or alternately with at least a portion of the steps or stages in other steps or other steps.

[0142] Reference Figure 9 , Figure 9 This is a schematic diagram of the structure of a web page processing device provided in an embodiment of the present disclosure. The web page processing device 900 includes:

[0143] The data acquisition module 901 is configured to, when a target webpage is accessed through a browser, call a browser plug-in of the browser to acquire webpage operation data of the target webpage, wherein the browser plug-in is configured to acquire the webpage operation data based on a debugging protocol;

[0144] Analysis module 902, configured to load an analysis model deployed in a browser, input webpage operation data into the analysis model for analysis, obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and display the at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the webpage operation data;

[0145] The code loading module 903 is configured to load a first optimization code corresponding to the selected optimization suggestion text in response to an operation of selecting at least one optimization suggestion text.

[0146] Furthermore, the analysis module 902 includes:

[0147] A sliding window is used to construct a time series input vector based on the web page runtime data, and the web page structured data is encoded into a structured input vector;

[0148] Input the time series input vector and the structured input vector into the analysis model for mapping, and obtain the time series features corresponding to the time series input vector and the structured features corresponding to the structured input vector;

[0149] The temporal features and the structural features are fused to obtain fused features, and analysis is performed based on the fused features to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text.

[0150] Furthermore, the analysis module 902 includes:

[0151] Determine the feature weights between temporal features and structural features based on the attention mechanism;

[0152] The time series features and structured features are weighted and summed based on the feature weights to obtain the fusion features.

[0153] Furthermore, the analysis module 902 includes:

[0154] Mapping temporal features and structural features to the same dimension based on a learnable mapping matrix;

[0155] Determine the query matrix based on the mapped temporal features, and determine the key matrix based on the mapped structural features;

[0156] The feature weights between temporal features and structural features are determined according to the similarity between the query matrix and the key matrix.

[0157] Furthermore, the analysis module 902 includes:

[0158] Displaying task identifiers of various candidate optimization tasks in the browser, wherein the candidate optimization tasks are tasks for optimizing the target web page;

[0159] In response to an operation of selecting at least one task identifier, a branch module corresponding to the task identifier is loaded.

[0160] Furthermore, the code loading module 903 includes:

[0161] In response to an operation of selecting at least one optimization suggestion text, displaying a debugging window in the browser, wherein the debugging window is used to display current code loaded when the browser accesses the target webpage;

[0162] Highlight the original code to be optimized in the current code in the debug window;

[0163] In response to confirming the operation of optimizing the target webpage, a first optimization code corresponding to the selected optimization suggestion text is loaded to optimize the original code.

[0164] Furthermore, the code loading module 903 includes:

[0165] Display feedback controls in debug windows;

[0166] In response to an operation of triggering the feedback control, the first optimized code and the webpage operation data are sent to a server for training an analysis model, so that the server constructs a negative sample based on the first optimized code and the webpage operation data and retrains the analysis model according to the negative sample;

[0167] Receive the retrained analysis model sent by the server, and deploy the retrained analysis model on the browser.

[0168] Furthermore, the code loading module 903 includes:

[0169] In response to the operation of triggering one of the sub-controls, the first optimization code, web page operation data and feedback text corresponding to the triggered sub-control are sent to the server used to train the analysis model, so that the server constructs a negative sample based on the first optimization code and the web page operation data, and adds constraint items to the loss function according to the feedback text, and retrains the analysis model based on the negative sample and the loss function after adding the constraint items.

[0170] Furthermore, the code loading module 903 includes:

[0171] Generate a dependency tree graph indicating the association relationship between the original code and the associated code, and display the dependency tree graph in a debugging window, wherein the associated code is other code in the current code except the original code, and the dependency tree graph includes graph nodes corresponding to the original code and the associated code respectively;

[0172] In response to an operation of selecting at least one graph node corresponding to an association code in a dependency tree graph, obtaining an association code corresponding to the selected graph node;

[0173] In response to confirming the operation of optimizing the target webpage, the associated code is input into the analysis model for analysis to obtain a second optimized code;

[0174] The first optimized code and the second optimized code corresponding to the selected optimization suggestion text are loaded to optimize the original code and the associated code.

[0175] Furthermore, the data acquisition module 901 includes:

[0176] Calling the interface function of the browser plug-in of the browser based on the debugging protocol to obtain the web page running data of the target web page;

[0177] The web page running data includes at least one of network layer running data, rendering layer running data and execution environment layer running data.

[0178] Furthermore, the data acquisition module 901 includes:

[0179] Calling a network layer interface function of a browser plug-in of the browser based on a debugging protocol to obtain an access request and response time of a target web page, and determining the access request and response time as network layer operation data;

[0180] Calling a rendering layer interface function based on a debugging protocol of a browser plug-in of the browser to obtain the number of layout redraws, graphics performance data, and layer synthesis data of the target webpage, and determining the number of layout redraws, graphics performance data, and layer synthesis data as rendering layer operation data;

[0181] The browser plug-in of the browser is called based on the execution environment layer interface function of the debugging protocol to obtain the execution efficiency data and event blocking duration of the target web page, and the execution efficiency data and event blocking duration are determined as the execution environment layer running data.

[0182] In summary, the web page processing device provided by the embodiment of the present disclosure obtains the web page operation data of the target web page by calling the browser plug-in of the browser when accessing the target web page through the browser. Since the browser plug-in is configured to obtain the web page operation data based on the debugging protocol, it can obtain the web page operation data at the atomic level, and then load the analysis model deployed in the browser, input the web page operation data into the analysis model for analysis, and obtain at least one optimization suggestion text and the first optimization code corresponding to the optimization suggestion text. This can make the optimization suggestion text and the first optimization code more accurate, thereby improving the accuracy of optimizing the target web page. At the same time, since the analysis model is deployed in the browser, the real-time and security of the analysis can be improved. Moreover, by displaying at least one optimization suggestion text in the browser, in response to the operation of selecting at least one optimization suggestion text, the first optimization code corresponding to the selected optimization suggestion text is loaded, which can facilitate the user to select the first optimization code to be loaded, thereby improving the flexibility of optimizing the target web page.

[0183] The electronic device for executing the webpage processing method provided by the embodiment of the present disclosure may be a terminal. Figure 10 , Figure 10 This is a partial structural block diagram of a terminal provided in an embodiment of the present disclosure. The terminal includes: a camera assembly 1010, a first memory 1020, an input unit 1030, a display unit 1040, a sensor 1050, an audio circuit 1060, a wireless fidelity (WiFi) module 1070, a first processor 1080, and a first power supply 1090. Those skilled in the art will understand that Figure 10 The terminal structure shown in the figure does not constitute a limitation to the terminal, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0184] The camera assembly 1010 can be used to capture images or videos. Optionally, the camera assembly 1010 includes a front camera and a rear camera. Typically, the front camera is provided on the front panel of the terminal, and the rear camera is provided on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions.

[0185] The first memory 1020 may be used to store software programs and modules. The first processor 1080 executes various functional applications and data processing of the terminal by running the software programs and modules stored in the first memory 1020 .

[0186] The input unit 1030 may be configured to receive input digital or character information and generate key signal input related to terminal settings and function control. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032 .

[0187] The display unit 1040 may be configured to display input information or provided information and various menus of the terminal. The display unit 1040 may include a display panel 1041 .

[0188] The audio circuit 1060 , the speaker 1061 , and the microphone 1062 may provide an audio interface.

[0189] The first power source 1090 may be an alternating current, a direct current, a disposable battery, or a rechargeable battery.

[0190] The number of sensors 1050 can be one or more, and the one or more sensors 1050 include but are not limited to: acceleration sensors, gyroscope sensors, pressure sensors, optical sensors, etc. Among them:

[0191] The accelerometer can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established by the terminal. For example, the accelerometer can be used to detect the components of gravity acceleration on the three coordinate axes. The first processor 1080 can control the display unit 1040 to display the user interface in a horizontal or vertical view based on the gravity acceleration signal collected by the accelerometer. The accelerometer can also be used to collect game or user motion data.

[0192] The gyroscope sensor can detect the terminal's body orientation and rotation angle. It can also work with the accelerometer to collect 3D motions of the user on the terminal. Based on the data collected by the gyroscope sensor, the first processor 1080 can implement the following functions: motion sensing (such as changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0193] The pressure sensor can be set on the side frame of the terminal and / or the lower layer of the display unit 1040. When the pressure sensor is set on the side frame of the terminal, it can detect the user's grip signal of the terminal, and the first processor 1080 performs left and right hand recognition or shortcut operations based on the grip signal collected by the pressure sensor. When the pressure sensor is set on the lower layer of the display unit 1040, the first processor 1080 controls the operability controls on the UI interface based on the user's pressure operation on the display unit 1040. The operability controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0194] The optical sensor is used to collect ambient light intensity. In one embodiment, the first processor 1080 can control the display brightness of the display unit 1040 based on the ambient light intensity collected by the optical sensor. Specifically, when the ambient light intensity is high, the display brightness of the display unit 1040 is increased; when the ambient light intensity is low, the display brightness of the display unit 1040 is decreased. In another embodiment, the first processor 1080 can also dynamically adjust the shooting parameters of the camera assembly 1010 based on the ambient light intensity collected by the optical sensor.

[0195] In this embodiment, the first processor 1080 included in the terminal can execute the webpage processing method of the previous embodiment.

[0196] The electronic device for executing the web page processing method provided in the embodiment of the present disclosure may also be a server. Figure 11 , Figure 11 This is a partial structural block diagram of a server provided in an embodiment of the present disclosure. The server may have relatively large differences due to different configurations or performances, and may include one or more second processors 1110 and a second memory 1130, and one or more storage media 1140 (for example, one or more massive storage devices) for storing application programs 1143 or data 1142. Among them, the second memory 1130 and the storage medium 1140 can be short-term storage or persistent storage. The program stored in the storage medium 1140 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the server. Furthermore, the second processor 1110 can be configured to communicate with the storage medium 1140 to execute a series of instruction operations in the storage medium 1140 on the server.

[0197] The server may also include one or more second power supplies 1120, one or more wired or wireless network interfaces 1150, one or more input and output interfaces 1160, and / or one or more operating systems 1141, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0198] The second processor 1110 in the server can be used to execute the webpage processing method.

[0199] The embodiments of the present disclosure further provide a computer-readable storage medium, which is used to store a computer program. The computer program is used to execute the webpage processing methods of the aforementioned embodiments.

[0200] The present disclosure also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to implement the webpage processing method described above.

[0201] The terms "first," "second," "third," "fourth," and the like (if any) in the specification of the present disclosure and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate to describe embodiments of the present disclosure, e.g., capable of being implemented in orders other than those illustrated or described herein. In addition, the terms "including" and "having," and any variations thereof, are intended to cover non-exclusive inclusions, e.g., a process, method, system, product, or apparatus comprising a series of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0202] It should be understood that in the present disclosure, "at least one (item)" refers to one or more, and "plurality" refers to two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0203] It should be understood that in the description of the embodiments of the present disclosure, the meaning of multiple (or multiple items) is more than two, greater than, less than, exceed, etc. are understood to exclude the number itself, and above, below, within, etc. are understood to include the number itself.

[0204] In the several embodiments provided in the present disclosure, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of units is only a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0205] Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0206] In addition, the functional units in the various embodiments of the present disclosure may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0207] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present disclosure is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the various embodiments of the present disclosure. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk, and other media that can store program code.

[0208] It should also be understood that the various implementations provided in the embodiments of the present disclosure can be combined arbitrarily to achieve different technical effects.

[0209] The above is a specific description of the preferred implementation of the present disclosure, but the present disclosure is not limited to the above implementation. Technical personnel familiar with the art can also make various equivalent modifications or substitutions under the shared conditions that do not violate the spirit of the present disclosure. These equivalent modifications or substitutions are all included in the scope defined by the claims of the present disclosure.

Claims

1. A web page processing method, characterized in that: include: When accessing a target webpage through a browser, calling a browser plug-in of the browser to obtain webpage operation data of the target webpage, wherein the browser plug-in is configured to obtain the webpage operation data based on a debugging protocol; loading an analysis model deployed on the browser, inputting the webpage operation data into the analysis model for analysis, obtaining at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and displaying the at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the webpage operation data; In response to an operation of selecting at least one of the optimization suggestion texts, the first optimization code corresponding to the selected optimization suggestion text is loaded.

2. The web page processing method according to claim 1, characterized in that: The webpage operation data includes webpage operation sequence data and webpage structured data. Inputting the webpage operation data into the analysis model for analysis to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text includes: Using a sliding window to construct a time series input vector based on the webpage runtime time series data, and encoding the webpage structured data into a structured input vector; Inputting the time series input vector and the structured input vector into the analysis model for mapping to obtain a time series feature corresponding to the time series input vector and a structured feature corresponding to the structured input vector; The temporal features and the structural features are fused to obtain fused features, and analysis is performed based on the fused features to obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text.

3. The web page processing method according to claim 2, characterized in that: The fusing of the temporal features and the structural features to obtain fused features includes: Determining feature weights between the temporal features and the structural features based on an attention mechanism; The temporal features and the structural features are weightedly summed based on the feature weights to obtain fusion features.

4. The web page processing method according to claim 3, wherein: The determining of the feature weights between the temporal features and the structural features based on the attention mechanism includes: Mapping the temporal features and the structural features to the same dimension based on a learnable mapping matrix; Determine a query matrix based on the mapped temporal features, and determine a key matrix based on the mapped structural features; The feature weights between the temporal features and the structural features are determined according to the similarity between the query matrix and the key matrix.

5. The web page processing method according to claim 2, wherein: The analysis model includes branch modules corresponding to different candidate optimization tasks. Each branch module includes a timing processing module and an encoding module. The timing processing module is used to map the timing input vector, and the encoding module is used to map the structured input vector. The analysis model loaded and deployed in the browser includes: Displaying task identifiers of the candidate optimization tasks in the browser, wherein the candidate optimization tasks are tasks for optimizing the target web page; In response to an operation of selecting at least one of the task identifiers, the branch module corresponding to the task identifier is loaded.

6. The web page processing method according to claim 1, wherein: In response to the operation of selecting at least one of the optimization suggestion texts, loading the first optimization code corresponding to the selected optimization suggestion text includes: In response to an operation of selecting at least one of the optimization suggestion texts, displaying a debugging window in the browser, wherein the debugging window is used to display current code loaded when the browser accesses the target webpage; Highlighting the original code to be optimized in the current code in the debugging window; In response to confirming the operation of optimizing the target webpage, the first optimization code corresponding to the selected optimization suggestion text is loaded to optimize the original code.

7. The web page processing method according to claim 6, characterized in that: The webpage processing method further includes: displaying feedback controls in the debug window; In response to an operation triggering the feedback control, sending the first optimization code and the webpage operation data to a server for training the analysis model, so that the server constructs negative samples based on the first optimization code and the webpage operation data and retrains the analysis model based on the negative samples; Receive the retrained analysis model sent by the server, and deploy the retrained analysis model on the browser.

8. The web page processing method according to claim 7, characterized in that: The feedback control includes a plurality of sub-controls, each sub-control corresponding to a different feedback text. In response to an operation triggering the feedback control, the first optimization code and the webpage operation data are sent to a server for training the analysis model, so that the server constructs a negative sample based on the first optimization code and the webpage operation data and retrains the analysis model based on the negative sample, including: In response to an operation that triggers one of the sub-controls, the first optimization code, the web page operation data, and the feedback text corresponding to the triggered sub-control are sent to a server for training the analysis model, so that the server constructs a negative sample based on the first optimization code and the web page operation data, adds constraint items to the loss function according to the feedback text, and retrains the analysis model based on the negative sample and the loss function after adding the constraint items.

9. The webpage processing method according to claim 6, characterized in that: In response to confirming the operation of optimizing the target webpage, loading the first optimization code corresponding to the selected optimization suggestion text to optimize the original code includes: generating a dependency tree graph indicating an association relationship between the original code and the associated code, and displaying the dependency tree graph in the debugging window, wherein the associated code is other code in the current code except the original code, and the dependency tree graph includes graph nodes corresponding to the original code and the associated code respectively; In response to an operation of selecting at least one graph node corresponding to the association code in the dependency tree graph, obtaining the association code corresponding to the selected graph node; In response to confirming the operation of optimizing the target webpage, inputting the associated code into the analysis model for analysis to obtain a second optimized code; The first optimized code and the second optimized code corresponding to the selected optimization suggestion text are loaded to optimize the original code and the associated code.

10. The webpage processing method according to claim 1, wherein: The step of calling the browser plug-in of the browser to obtain the webpage operation data of the target webpage includes: Calling the browser plug-in of the browser based on the interface function of the debugging protocol to obtain web page running data of the target web page; The webpage running data includes at least one of network layer running data, rendering layer running data and execution environment layer running data.

11. The webpage processing method according to claim 10, characterized in that: The step of calling the browser plug-in of the browser to obtain the webpage operation data of the target webpage based on the interface function of the debugging protocol includes at least one of the following: calling a network layer interface function of a browser plug-in of the browser based on the debugging protocol to obtain an access request and a response duration of the target webpage, and determining the access request and the response duration as the network layer operation data; calling a rendering layer interface function of a browser plug-in of the browser based on the debugging protocol to obtain a layout redraw count, graphics performance data, and layer synthesis data of the target webpage, and determining the layout redraw count, the graphics performance data, and the layer synthesis data as the rendering layer operation data; The browser plug-in of the browser is called based on the execution environment layer interface function of the debugging protocol to obtain the execution efficiency data and event blocking duration of the target webpage, and the execution efficiency data and the event blocking duration are determined as the execution environment layer running data.

12. A web page processing device, characterized in that: include: a data acquisition module, configured to, when a target webpage is accessed through a browser, call a browser plug-in of the browser to acquire webpage operation data of the target webpage, wherein the browser plug-in is configured to acquire the webpage operation data based on a debugging protocol; an analysis module, configured to load an analysis model deployed in the browser, input the webpage operation data into the analysis model for analysis, obtain at least one optimization suggestion text and a first optimization code corresponding to the optimization suggestion text, and display the at least one optimization suggestion text in the browser, wherein the first optimization code is used to optimize the webpage operation data; The code loading module is configured to, in response to an operation of selecting at least one of the optimization suggestion texts, load the first optimization code corresponding to the selected optimization suggestion text.

13. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the web page processing method according to any one of claims 1 to 12 is implemented.

14. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the web page processing method according to any one of claims 1 to 12 is implemented.

15. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the web page processing method according to any one of claims 1 to 12 is implemented.

Images