Front-end optimization method and device for single-page application, storage medium and electronic equipment

Abstract

The invention relates to a front-end optimization method and device for a single-page application, a storage medium and electronic equipment, and the method comprises the steps: carrying out the component extraction of a front-end code of a target single-page application according to a code analysis tool, and obtaining the component code information and basic structure code information corresponding to each component; constructing component structured feature data based on the basic structure code information, and constructing element structured feature data based on the component code information; respectively inputting the component structured feature data and the element structured feature data into a deep learning model to obtain a component embedding vector and an element embedding vector; calculating component similarity according to the embedded vector of each component, and calculating element similarity according to the embedded vector of each element in the same component; and performing component fusion based on the component similarity among the components, performing element fusion based on the element similarity, and performing front-end code simplification according to the fused components and elements in the single-page application. The SPA performance can be improved.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, and in particular to a front-end optimization method, apparatus, storage medium, and electronic device for single-page applications. Background Technology

[0002] Driven by the digital wave, web applications have gradually evolved from early static pages into comprehensive service carriers that integrate complex interactions, dynamic data display, and multi-terminal adaptation. Among them, single-page applications (SPAs) have become the mainstream architectural form in e-commerce, social networking, and office fields due to their advantages of not requiring a full page refresh and smooth interaction.

[0003] However, current SPAs face numerous challenges in actual operation. On the one hand, the front-end code suffers from issues such as duplicate component definitions, inconsistent API design, and outdated dependency references. These redundant or unreasonable code structures not only increase the size of the SPA but may also cause performance degradation, thus affecting resource loading speed. On the other hand, when it is necessary to obtain user behavior data from user actions on the SPA's front end, it is necessary to implement event tracking on the SPA's front end. However, event tracking largely relies on manual experience, which has drawbacks such as inaccurate tracking locations, incomplete coverage, and difficulty in identifying abnormal tracking points. This results in low-quality user behavior data, making it difficult to effectively support SPA performance optimization. Therefore, optimizing SPAs has become a crucial technical problem that needs to be solved to improve SPA performance. Summary of the Invention

[0004] In view of this, the present invention provides a front-end optimization method, apparatus, storage medium, and electronic device for single-page applications.

[0005] Specifically, the present invention is achieved through the following technical solution: According to a first aspect of the present invention, a front-end optimization method for a single-page application is provided, the method comprising: Based on the pre-set code parsing tool, the front-end code of the target single-page application is extracted to obtain the component code information and basic structure code information corresponding to each component. Based on the basic structure code information, feature information is extracted, and component structured feature data is constructed based on the feature information; and based on the component code information, page element information is extracted, and element structured feature data is constructed based on the page element information. The component structured feature data and element structured feature data are respectively input into a pre-built deep learning model to obtain component embedding vectors and element embedding vectors. Based on the embedding vectors of each component, calculate the component similarity between components, and based on the embedding vectors of each element within the same component, calculate the element similarity between identical elements. Component fusion is performed based on component similarity and element fusion based on element similarity. Front-end code is then simplified based on the fused components and elements within the single-page application.

[0006] Optionally, obtaining the basic structure code information corresponding to each component includes: Using an abstract syntax tree-based parser, the front-end code of the target single-page application is obtained. Traverse the front-end code of the target single-page application and extract the structural feature code information corresponding to the structural features, the functional feature code information corresponding to the functional features, and the API-related feature code information corresponding to the API-related features.

[0007] Optionally, the method further includes: Based on the component similarity between the first component and other components, construct a similar adjacency table for the first component; Based on the similarity between the target element and each of the same elements, construct a similar adjacency list for the target element.

[0008] Optionally, calculating the element similarity between identical elements based on the embedding vectors of each element within the same component includes: Based on a pre-set vocabulary of elements with the same features, a target element is extracted from the elements corresponding to the embedding vectors of each element. Traverse the embedding vectors of each element, and based on the same element feature vocabulary corresponding to the target element, obtain the element embedding vectors of each element that is the same as the target element; The cosine similarity algorithm is used to calculate the similarity between the element embedding vector of the target element and the element embedding vectors of each obtained element.

[0009] Optionally, the method further includes: Get the first and second components to be merged; If both the first component and the second component have data points set, it is determined that the data points are duplicated. Get the first and second elements to be merged; If only one of the first and second elements has a tracking point set, it is determined that the tracking point is missing.

[0010] Optionally, the method further includes: Based on the element similarity corresponding to the target component and the collected user behavior data, the start and end position information of the embedding points for the target component is determined using a pre-built LSTM time series model.

[0011] Optionally, the method further includes: Based on the user behavior data and historical user behavior data collected by the tracking points deployed according to the tracking point start and end location information, and based on the pre-built user behavior model, the page to be accessed by the user is predicted. Based on the predicted page to be accessed and the user's historical behavior data on the page to be accessed, it is determined whether to clear the page to be accessed from the cache.

[0012] The front-end optimization method for single-page applications (SPAs) in this technical solution involves extracting components from the front-end code of the target SPA using a pre-set code parsing tool. This process obtains component code information and basic structure code information for each component. Based on the basic structure code information, feature information is extracted, and component structured feature data is constructed. Additionally, page element information is extracted based on the component code information, and element structured feature data is constructed. The component and element structured feature data are input into a pre-built deep learning model to obtain component embedding vectors and element embedding vectors. Based on the component embedding vectors, component similarity between components is calculated, and based on the element embedding vectors within the same component, element similarity between identical elements is calculated. Component fusion is performed based on the component similarity between components, and element fusion is performed based on the element similarity. Finally, the front-end code is simplified based on the fused components and elements within the SPA. In this way, by extracting component features and calculating similarity, the components and elements within the SPA are optimized, effectively simplifying redundant SPA code and improving SPA performance.

[0013] According to a second aspect of the present invention, a front-end optimization apparatus for a single-page application is provided, the front-end optimization apparatus for a single-page application comprising: The code extraction module is used to extract components from the front-end code of the target single-page application based on a pre-set code parsing tool, and to obtain the component code information and basic structure code information corresponding to each component. The structuring module is used to extract feature information based on the basic structure code information, construct component structured feature data based on the feature information, and extract page element information based on the component code information, construct element structured feature data based on the page element information. The embedding vector acquisition module is used to input the component structured feature data and the element structured feature data into a pre-built deep learning model to obtain the component embedding vector and the element embedding vector. The similarity calculation module is used to calculate the component similarity between components based on the embedding vectors of each component, and to calculate the element similarity between identical elements based on the embedding vectors of each element within the same component. The code optimization module is used to perform component fusion based on component similarity and element fusion based on element similarity, and to simplify the front-end code based on the fused components and elements within the single-page application.

[0014] According to a third aspect of the present invention, a storage medium is provided having a computer program stored thereon, wherein when the program is executed by a processor, it implements the steps of the front-end optimization method for a single-page application in any possible implementation of the first aspect.

[0015] According to a fourth aspect of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of a front-end optimization method for a single-page application in any possible implementation of the first aspect. Attached Figure Description

[0016] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0017] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without creative effort.

[0018] Figure 1 A flowchart illustrating a front-end optimization method for a single-page application provided in an embodiment of the present invention; Figure 2 A schematic diagram of a front-end optimization device for a single-page application provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0020] In related technologies, the front-end code of SPAs often contains redundant or unreasonable code structures, such as duplicate component definitions, inconsistent API designs, and outdated dependency references. This not only increases the size of the SPA but may also cause performance degradation, thus affecting the page's resource loading speed and resulting in low SPA operating efficiency. Furthermore, when using event tracking to obtain user behavior data for SPA performance optimization, the reliance on manual experience for event tracking leads to defects such as inaccurate tracking locations, incomplete coverage, and difficulty in identifying abnormal event tracking. This results in low-quality user behavior data, making SPA performance optimization based on this user behavior data inefficient.

[0021] In this embodiment, the technical problems of redundant front-end code and low quality of event tracking leading to poor quality of user behavior data in SPAs are optimized by optimizing the front-end of single-page applications based on component similarity and user behavior.

[0022] See Figure 1 This invention provides a front-end optimization method for single-page applications, which may include the following steps: S101. Based on the pre-set code parsing tool, extract the components from the front-end code of the target single-page application, and obtain the component code information and basic structure code information corresponding to each component. In this embodiment, the target single-page application contains multiple components. By obtaining the front-end code of the target single-page application, a code parsing tool is used to traverse the front-end code, and for each component, the code corresponding to that component is extracted to obtain component code information. As an optional embodiment, the components include, but are not limited to: structural components, functional components, and API components.

[0023] In this embodiment, as an optional embodiment, the code parsing tool includes, but is not limited to: a parser based on an abstract syntax tree (AST), and the basic structure code information includes, but is not limited to: structural feature code information, functional feature code information, and API-related feature code information.

[0024] In this embodiment, as an optional implementation, obtaining the component code information and the basic structure code information corresponding to each component includes: Using an abstract syntax tree-based parser, the front-end code of the target single-page application is obtained. Iterate through the front-end code of the target single-page application and extract the code information corresponding to the structural components, the functional components, and the API components respectively. Extract structural feature code information from the code information corresponding to structural components, extract functional feature code information from the code information corresponding to functional components, and extract API-related feature code information from the code information corresponding to AP components.

[0025] In this embodiment, an abstract syntax tree-based parser is used to scan and extract the target single-page application to obtain the basic structure code information corresponding to each component (element) in the front-end code.

[0026] In this embodiment, as an optional embodiment, the basic structure code information includes, but is not limited to: component element code information, API call element code information, and dependency reference element code information.

[0027] In this embodiment, as an optional embodiment, the structural features include, but are not limited to: component hierarchy structure features and sub-component composition features; the functional features include, but are not limited to: interaction logic features and data processing logic features; and the API-related features include, but are not limited to: API call parameter features and return value type features.

[0028] In this embodiment, as an optional embodiment, each component corresponds to a component code information and a basic structure code information.

[0029] S102. Based on the basic structure code information, extract feature information, construct component structured feature data based on the feature information, and extract page element information based on the component code information, construct element structured feature data based on the page element information. In this embodiment, corresponding feature information is extracted for the basic structure code information. As an optional embodiment, corresponding feature libraries are set for structural features, functional features, and API-related features. By matching the basic structure code information with each feature library, the corresponding feature information can be obtained.

[0030] In this embodiment, as an optional embodiment, each component contains multiple page elements. By extracting the code information corresponding to the page elements, such as the controls, buttons, positions, layouts, etc. contained in the page elements, the structured feature data of the elements is constructed.

[0031] In this embodiment, the extracted feature information is processed in a structured manner to form structured feature data. For example, the feature information is processed in a structured manner to obtain component structured feature data, and the page element information is processed in a structured manner to obtain element structured feature data.

[0032] S103. Input the component structured feature data and element structured feature data into the pre-built deep learning model to obtain the component embedding vector and element embedding vector respectively. In this embodiment, the embedding vector is obtained based on the structured feature data. As an optional embodiment, the structured feature data is input into a deep learning model, such as a Transformer model or a graph neural network model, and the output is a low-dimensional dense embedding vector, so that the semantic information and structural associations of the corresponding components or elements are in the embedding vector space.

[0033] In this embodiment, each component corresponds to a component structured feature data, which is used to characterize the structure and composition of the component. Each component also corresponds to an element structured feature data, which is used to characterize the attributes of each element within the component. The component structured feature data corresponding to the target component is input into a pre-built deep learning model to obtain the component embedding vector of the target component. Similarly, the element structured feature data corresponding to the target component is input into the pre-built deep learning model to obtain the element embedding vector of the target component.

[0034] S104. Based on the embedding vectors of each component, calculate the component similarity between components, and based on the embedding vectors of each element within the same component, calculate the element similarity between identical elements. In this embodiment, similarity is calculated based on the embedding vectors. As an optional embodiment, the component similarity between components is calculated based on the embedding vectors of each component, including: From the embedding vectors of each component, extract the first component embedding vector corresponding to the first component and the second component embedding vector corresponding to the second component; The cosine similarity algorithm is used to calculate the similarity between the embedding vector of the first component and the embedding vector of the second component, thereby obtaining the component similarity between the first component and the second component.

[0035] In this embodiment, as an optional implementation, the element similarity between identical elements is calculated based on the embedding vectors of each element within the same component, including: Based on a pre-set vocabulary of elements with the same features, a target element is extracted from the elements corresponding to the embedding vectors of each element. Traverse the embedding vectors of each element, and based on the same element feature vocabulary corresponding to the target element, obtain the element embedding vectors of each element that is the same as the target element; The cosine similarity algorithm is used to calculate the similarity between the element embedding vector of the target element and the element embedding vectors of each obtained element.

[0036] In this embodiment, as an optional embodiment, the method further includes: Based on the component similarity between the first component and other components, construct a similar adjacency table for the first component; Based on the similarity between the target element and each of the same elements, construct a similar adjacency list for the target element.

[0037] In this embodiment, a component similarity adjacency table is constructed based on the similarity between components, and an element similarity adjacency table is constructed based on the similarity between identical elements within the page. The component similarity adjacency table records the similarity relationships between components, and the element similarity adjacency table records the similarity relationships between identical elements within the page. As another optional embodiment, the similarity between an element and other elements can also be calculated in the element similarity adjacency table, regardless of whether the element is the same as other elements. This embodiment does not limit this approach.

[0038] S105. Based on the component similarity between components, perform component fusion; based on the element similarity, perform element fusion; and based on the fused components and elements within the single-page application, simplify the front-end code.

[0039] In this embodiment, as an optional implementation, component fusion is performed based on the component similarity between components, including: Get component pairs whose component similarity is higher than a preset component duplication threshold, and merge the components.

[0040] In this embodiment, as an optional implementation, component optimization can be performed based on a component similarity adjacency list, and elements within a component can be optimized based on an element similarity adjacency list. Based on the optimized components and elements, front-end code simplification can be performed. Specifically, as an optional implementation, obtaining component pairs with a component similarity higher than a preset component repetition threshold includes: Based on the component similarity adjacency list, multiple components with a similarity higher than the preset component repetition threshold are identified.

[0041] In this embodiment, taking the target single-page application including component A and component B as an example, Table 1 shows the basic structure code information corresponding to component A and component B.

[0042] Table 1

[0043] in, , <button>These are structural features and functional features, and are identified as API-related features.

[0044] The obtained component structured feature data are shown in Table 2.

[0045] Table 2

[0046] Using a deep learning model, the structured feature data of components are uniformly encoded into embedding vectors, where the three values ​​of the embedding vector are: DOM structure, behavioral events, and input model. A → vectorA = [0.75, 0.10, 0.85] B → vectorB = [0.72, 0.12, 0.80] The cosine similarity between component A and component B is calculated using the following formula:

[0047] In this embodiment, the cosine similarity sim(A,B) between component A and component B is 0.96, indicating that component A and component B are very similar.

[0048] In this embodiment, it is assumed that there are 3 components, namely component A (abbreviated as A), component B and component C. The component similarity of the calculated component pairs is shown in Table 3.

[0049] Table 3

[0050] The constructed component similarity adjacency list can then be represented as follows: A:[(B,0.96),(C,0.21)] B:[(A,0.96),(C,0.18)] C:[(A,0.21),(B,0.18)] For a similar adjacency list of elements within a page (component), assuming the page contains: div1(class=card) button1 (text="Confirm") img1 div2(class=panel) button2(text=Submit) Using a similar method as described above, the element similarity between elements (identical elements) on the page was calculated as shown in Table 4.

[0051] Table 4

[0052] The constructed adjacency list is as follows: button1:[(button2,0.89)] div1:[(div2,0.55)] img1:[] In this embodiment, as another optional embodiment, the method further includes: Get the first and second components to be merged; If both the first component and the second component have data points set, it is determined that the data points are duplicated. Get the first and second elements to be merged; If only one of the first and second elements has a tracking point set, it is determined that the tracking point is missing.

[0053] In this embodiment, as another optional embodiment, the method further includes: Get the first and second elements to be merged; From the front-end code, obtain the first parameter value or first return value of the first element, and the second parameter value or second return value of the second element; If the first parameter value or the first return value is different from the second parameter value or the second return value, the element design is determined to be inconsistent.

[0054] In this embodiment, the front-end code corresponding to the first and second elements with similar element similarity is as follows: The `getUserInfo(id)` function returns `{"name":"Tom","age":20}`. fetchUserDetail(userId,includeAddress=false) returns {"username":"Tom","age":20,"address":""} sim(getUserInfo,fetchUserDetail)=0.92 In this embodiment, inconsistencies in API design are identified. For example, APIs with the same functionality but different parameters or return values, as shown in the example above, indicate that the first element `username` and the second element `name` are inconsistent in design. As an optional embodiment, the elements can be unified, for example, by changing `username` to `name` and merging them into `getUserDetail(userId, options)`. As another optional embodiment, outdated dependency references can be detected and removed through version comparison and dependency function validity analysis, and the corresponding front-end code can be optimized.

[0055] In this embodiment, when two components are similar, if one component has a tracking point while the other does not, it is determined that the tracking point is missing; and when two highly similar elements (buttons) both have tracking points, it is determined that the tracking points are duplicated. Furthermore, after identifying abnormal tracking point patterns, such as missing tracking points or duplicate tracking points, the abnormal tracking points are corrected.

[0056] In this embodiment, as another optional embodiment, the method further includes: Based on the element similarity corresponding to the target component and the collected user behavior data, the start and end position information of the embedding points for the target component is determined using a pre-built LSTM time series model.

[0057] In this embodiment, the tracking is driven by collected user behavior data. As an optional embodiment, the similarity of component elements in the component similarity adjacency list and the collected user behavior data are input into a pre-built Long Short-Term Memory (LSTM) time-series model. The LSTM time-series model then outputs the tracking location information. The user behavior data includes, but is not limited to: clicks, submits, scrolls, page dwell time, and page access order (router).

[0058] In this embodiment, based on user behavior data, the LSTM time series model is used to capture user temporal behavior, such as the order of page access and potential associations in the operation chain. Combined with component similarity features, key interaction nodes can be accurately located, ensuring that the tracking points cover the core interaction scenarios.

[0059] In this embodiment, as another optional embodiment, the method further includes: Based on the user behavior data and historical user behavior data collected by the tracking points deployed according to the tracking point start and end location information, and based on the pre-built user behavior model, the page to be accessed by the user is predicted. Based on the predicted page to be accessed and the user's historical behavior data on the page to be accessed, it is determined whether to clear the page to be accessed from the cache.

[0060] In this embodiment, page loading performance is optimized based on behavioral data.

[0061] In this embodiment, addressing the issue that related technologies utilize the Least Recently Used (LRU) strategy for cache clearing, which can easily clear resources about to be accessed, a resource labeling approach is adopted based on a user behavior model. Combining high frequency and high priority factors, a decision is made on whether a resource can be cleared. As an optional embodiment, high-frequency resources are defined as those in the top 30% of access frequency over the past 7 days; high-priority resources are defined as those with a higher than 60% probability of being accessed in the next hour. High-priority resources can be predicted based on the user behavior model. Thus, when the cache reaches a pre-set cache threshold, high-frequency and high-priority resources are preferentially retained.

[0062] In this embodiment, for a single user, a user behavior model is established by analyzing the user's historical behavior data, such as access path, dwell time, and click preferences. The currently collected user behavior data is input into the user behavior model, which can predict the next page that a single user will visit (the page the user is about to visit). Thus, after the current page has finished loading or during the user's idle time while browsing the current page, a preloading request for the key resources (HTML / CSS / JS) of the predicted page is proactively initiated. In this way, when the user actually visits the page, it can be rendered faster.

[0063] In this embodiment, for group users, a trend analysis model is constructed based on group user behavior data, including but not limited to: access frequency, page element interaction popularity, and function usage frequency. This model identifies page elements with high access frequency and importance in different time periods and among different user groups, such as navigation components, popular function entry points, and high-frequency interaction modules. As an optional embodiment, for these key related resources, the WebpackPreload or WebpackPreload property is set when constructing the trend analysis model to achieve pre-loading of related resources. As another optional embodiment, the pre-loaded resource list can also be updated periodically by acquiring dynamic changes in group needs, thereby ensuring that the pre-loaded resources match the current group needs.

[0064] In this embodiment, a specific example is described in more detail below.

[0065] Assume the user's access behavior is as follows: Page A → Page B → Page C → Page D → Page C → Page E The user behavior data in chronological order is shown in Table 5.

[0066] Table 5

[0067] Assume the similarity of each component is as follows: The similarity between PageC's "View Details" component and PageE's "Payment Information Preview" component is 0.82. The similarity between PageD's "Add to Cart" component and PageC's "Buy Now" component is 0.89. This indicates that the corresponding components mentioned above are semantically similar in the interaction chain.

[0068] In chronological order, each component is converted into an input vector (embedding vector) for an LSTM. The LSTM input sequence in chronological order is: [Login → Scroll → View Details → Add to Cart → Buy Now → Pay]. The corresponding numeric vector representation is as follows: Click → [0.8, 0.1, 0.0] roll→[0.2,0.7,0.0] submit→[0.9,0.0,0.1] Page / component embeddings are concatenated into the input vector. For example, the input vector = user behavior embedding + page component embedding. Component similarity (e.g., 0.82 / 0.89) is also added as a feature.

[0069] LSTM time series models can be used to learn common user behavior chains, such as: View details → Add to cart → Buy now → Pay The patterns learned by the LSTM time series model may be: After adding items to their cart, 70% of users will click "Buy Now," and after "Buy Now," 83% will click the "Pay" button. Therefore, the correlation between "Add to Cart" and "Buy Now" is very strong, making them key links in the tracking mechanism. Thus, the starting point in the tracking information is "Add to Cart," and the ending point is "Buy Now."

[0070] In this embodiment, by combining component similarity, "key interaction nodes" in the link can also be found. For example, the similarity between PageD's [Add to Cart component] and PageC's [Buy Now component] is as high as 0.89. Therefore, the pattern learned by the LSTM time series model is that transaction process nodes (components) are key links and should be the focus of data collection.

[0071] In this embodiment, the recommended embedding points output by the LSTM time series model are shown in Table 6.

[0072] Table 6

[0073] In this embodiment, after the performance optimization is completed, the page loading time and the response time of key business links can also be verified. When the performance indicators are found to be below the expected target, the key parameters involved in the optimization process are analyzed to locate the cause of the performance deficiency. For example, in one optimization process, the initial similarity threshold for duplicate components was set to 0.90. However, by analyzing the component similarity distribution, it was found that the similarity between two large components, A and B, was 0.88. Since it did not exceed the similarity threshold, it was determined that they were not duplicate components, causing these two components to be repeatedly packaged in the single-page application, thus affecting the page loading time. At the same time, in the event tracking recommendation process, since the prediction step size of the LSTM time series model was set to 3, the LSTM time series model may have failed to capture the strong dependency relationship of the user in the high-frequency key link of "add to cart → buy now". As a result, the "buy now" button was not automatically recommended as an event tracking node, and therefore, the interaction time of this node could not be obtained, making it impossible to locate the bottleneck of this link. In this embodiment, based on the above analysis results, the similarity threshold for duplicate components can be reduced, for example, from 0.90 to 0.85; simultaneously, the prediction step size of the LSTM time series model is adjusted from 3 to 5, enabling the LSTM time series model to capture the temporal correlation of users in key transaction links. Thus, after adjusting the parameters and re-executing the optimization process, page load time and the average operation time of key links can be effectively reduced.

[0074] In this embodiment, parameters are adjusted based on performance optimization results, followed by closed-loop verification and improvement. As an optional embodiment, performance optimization results include, but are not limited to, resource loading time, page response speed, and user retention rate. This allows for verification of the optimization effect by feeding back the performance optimization results to the code simplification and data-driven event tracking stages. If the error between the performance metrics obtained based on the performance optimization results and the expected performance metrics exceeds a pre-set error threshold, the cause is analyzed, and the code simplification rules are improved. For example, the similarity threshold for duplicate components may be adjusted, or the algorithm parameters for event tracking recommendations may be adjusted, forming a closed loop of "optimization-verification-improvement."

[0075] Compared with existing technologies, the method in this embodiment, through component feature extraction and similarity calculation, can not only simplify redundant SPA code, reduce performance loss, and improve SPA performance, but also optimize event tracking to obtain high-quality user behavior data. This allows for precise performance optimization from both group and individual behavior dimensions. Furthermore, continuous improvement through feedback ultimately significantly enhances the response and loading efficiency of single-page applications, optimizes user experience, and improves retention rates. Specifically: (1) Based on page component code traversal, feature extraction and similarity calculation, a component / element similarity adjacency table is constructed. The constructed adjacency table provides core data support for subsequent code simplification and event tracking optimization. (2) Based on the component similarity adjacency list, the identification and simplification of redundant code (duplicate components, inconsistent APIs, outdated dependencies) and the integrated design of "automatic recommendation of event tracking based on component similarity and user behavior and identification of abnormal event tracking" are realized simultaneously to avoid the limitation that code optimization and event tracking design are independent of each other. (3) Based on the high-quality user behavior data obtained by optimizing the tracking points, we carry out precise performance optimization from two dimensions: "group behavior (preloading strategy, resource caching time)" and "individual behavior (pre-accessed page prediction, browser caching strategy)". We also combine the closed-loop architecture of feedback optimization and verification to ensure the continuity and effectiveness of performance optimization.

[0076] Based on the same inventive concept, such as Figure 2 As shown, this embodiment of the invention also provides a front-end optimization device for single-page applications, the device comprising: The code extraction module 201 is used to extract components from the front-end code of the target single-page application based on a pre-set code parsing tool, and obtain the component code information and basic structure code information corresponding to each component. In this embodiment, as an optional embodiment, the components include, but are not limited to, structural components, functional components, and API components.

[0077] In this embodiment, as an optional embodiment, the basic structure code information includes, but is not limited to: component element code information, API call element code information, and dependency reference element code information.

[0078] In this embodiment, as an optional embodiment, the code extraction module 201 is specifically used for: Using an abstract syntax tree-based parser, the front-end code of the target single-page application is obtained. Traverse the front-end code of the target single-page application and extract the structural feature code information corresponding to the structural features, the functional feature code information corresponding to the functional features, and the API-related feature code information corresponding to the API-related features.

[0079] The structuring module 202 is used to extract feature information based on the basic structure code information, construct component structured feature data based on the feature information, and extract page element information based on the component code information and construct element structured feature data based on the page element information. In this embodiment, as an optional embodiment, corresponding feature libraries are set for structural features, functional features, and API-related features. By matching the basic structure code information with each feature library, the corresponding feature information can be obtained.

[0080] The embedding vector acquisition module 203 is used to input the component structured feature data and the element structured feature data into a pre-built deep learning model to obtain the component embedding vector and the element embedding vector. In this embodiment, as an optional embodiment, the deep learning model includes, but is not limited to, the Transformer model and the graph neural network model.

[0081] The similarity calculation module 204 is used to calculate the component similarity between components based on the embedding vectors of each component, and to calculate the element similarity between the same elements based on the embedding vectors of each element in the same component. In this embodiment, as an optional embodiment, the similarity calculation module 204 is specifically used for: Based on a pre-set vocabulary of elements with the same features, a target element is extracted from the elements corresponding to the embedding vectors of each element. Traverse the embedding vectors of each element, and based on the same element feature vocabulary corresponding to the target element, obtain the element embedding vectors of each element that is the same as the target element; The cosine similarity algorithm is used to calculate the similarity between the element embedding vector of the target element and the element embedding vectors of each obtained element.

[0082] In this embodiment, as an optional implementation, the element similarity between identical elements is calculated based on the embedding vectors of each element within the same component, including: Based on a pre-set vocabulary of elements with the same features, a target element is extracted from the elements corresponding to the embedding vectors of each element. Traverse the embedding vectors of each element, and based on the same element feature vocabulary corresponding to the target element, obtain the element embedding vectors of each element that is the same as the target element; The cosine similarity algorithm is used to calculate the similarity between the element embedding vector of the target element and the element embedding vectors of each obtained element.

[0083] The code optimization module 205 is used to perform component fusion based on component similarity and element fusion based on element similarity, and to simplify the front-end code based on the fused components and elements within the single-page application.

[0084] In this embodiment, as an optional embodiment, component pairs with a component similarity higher than a preset component duplication threshold are obtained, and the components are merged.

[0085] In this embodiment, as an optional embodiment, obtaining component pairs with a component similarity higher than a preset component repetition threshold includes: Based on the component similarity adjacency list, multiple components with a similarity higher than the preset component repetition threshold are identified.

[0086] In this embodiment, as an optional embodiment, the device further includes: A similarity building module (not shown in the figure) is used to build a similar adjacency table for the first component based on the component similarity between the first component and other components respectively; Based on the similarity between the target element and each of the same elements, construct a similar adjacency list for the target element.

[0087] In this embodiment, as another optional embodiment, the device further includes: The event tracking optimization module is used to obtain the first and second components for component fusion. If both the first component and the second component have data points set, it is determined that the data points are duplicated. Get the first and second elements to be merged; If only one of the first and second elements has a tracking point set, it is determined that the tracking point is missing.

[0088] In this embodiment, as another optional embodiment, the device further includes: The tracking point positioning module is used to determine the start and end position information of the tracking points for the target component based on the element similarity corresponding to the target component and the collected user behavior data, using a pre-built LSTM time series model.

[0089] In this embodiment, as another optional embodiment, the device further includes: The page prediction module is used to predict the page to be accessed by the user based on the user behavior data and user historical behavior data collected by the tracking points deployed according to the tracking point start and end location information, and based on the pre-built user behavior model. Based on the predicted page to be accessed and the user's historical behavior data on the page to be accessed, it determines whether to clear the page to be accessed from the cache.

[0090] Based on the same inventive concept, embodiments of the present invention also provide a storage medium storing a computer program thereon, wherein when the program is executed by a processor, it implements the steps of the front-end optimization method for single-page applications in any of the above possible implementations.

[0091] Optionally, the storage medium may be a non-transitory computer-readable storage medium, such as a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device.

[0092] Based on the same inventive concept, see [link to inventive concept] Figure 3 This invention also provides an electronic device, including a memory 101 (e.g., non-volatile memory), a processor 102, and a computer program stored on the memory 101 and executable on the processor 102. When the processor 102 executes the program, it implements the steps of the front-end optimization method for single-page applications in any of the above possible implementations, which can be equivalent to the aforementioned front-end optimization device for single-page applications. Of course, the processor can also be used to process other data or perform calculations. This electronic device can be a PC, server, terminal, or other similar device.

[0093] like Figure 3 As shown, the electronic device may also include: memory 103, network interface 104, and internal bus 105. In addition to these components, other hardware may also be included, which will not be described in detail here.

[0094] It should be noted that the aforementioned front-end optimization device for single-page applications can be implemented through software. As a logical device, it is formed by the processor 102 of the electronic device in which it resides reading the computer program instructions stored in the non-volatile memory into the memory 103 for execution.

[0095] The embodiments of the subject matter and functional operation described in this specification can be implemented in the following ways: digital electronic circuits, tangibly embodied computer software or firmware, computer hardware including the structures disclosed in this specification and their structural equivalents, or combinations thereof. Embodiments of the subject matter described in this specification can be implemented as one or more computer programs, i.e., one or more modules of computer program instructions encoded on a tangible, non-transitory program carrier for execution by a data processing apparatus or for controlling the operation of a data processing apparatus. Alternatively or additionally, the program instructions may be encoded on artificially generated propagation signals, such as machine-generated electrical, optical, or electromagnetic signals, which are generated to encode information and transmit it to a suitable receiving device for execution by the data processing apparatus. The computer storage medium may be a machine-readable storage device, a machine-readable storage substrate, a random or serial access memory device, or combinations thereof.

[0096] The processing and logic flow described in this specification can be executed by one or more programmable computers that execute one or more computer programs to perform corresponding functions by operating on input data and generating output. The processing and logic flow can also be executed by special-purpose logic circuitry—such as FPGA (Field Programmable Gate Array) or ASIC (Application-Specific Integrated Circuit), and the device can also be implemented as special-purpose logic circuitry.

[0097] Suitable computers for executing computer programs include, for example, general-purpose and / or special-purpose microprocessors, or any other type of central processing unit. Typically, the central processing unit receives instructions and data from read-only memory and / or random access memory. The basic components of a computer include a central processing unit for implementing or executing instructions and one or more memory devices for storing instructions and data. Typically, a computer will also include one or more mass storage devices for storing data, such as disks, magneto-optical disks, or optical disks, or the computer will be operatively coupled to such mass storage devices to receive data from or transfer data to them, or both. However, a computer is not required to have such devices. Furthermore, a computer can be embedded in another device, such as a mobile phone, a personal digital assistant (PDA), a mobile audio or video player, a game console, a global positioning system (GPS) receiver, or a portable storage device such as a universal serial bus (USB) flash drive, to name a few.

[0098] Computer-readable media suitable for storing computer program instructions and data include all forms of non-volatile memory, media, and memory devices, such as semiconductor memory devices (e.g., EPROM, EEPROM, and flash memory devices), magnetic disks (e.g., internal hard disks or removable disks), magneto-optical disks, and CD-ROM and DVD-ROM disks. Processors and memory may be supplemented by or incorporated into dedicated logic circuitry.

[0099] While this specification contains numerous specific implementation details, these should not be construed as limiting the scope of any invention or the scope of the claims, but rather are primarily used to describe features of specific embodiments of a particular invention. Certain features described in the various embodiments herein may also be implemented in combination in a single embodiment. Conversely, various features described in a single embodiment may also be implemented separately in various embodiments or in any suitable sub-combination. Furthermore, while features may function in certain combinations as described above and even initially claimed in this way, one or more features from a claimed combination may be removed from that combination in some cases, and a claimed combination may refer to a sub-combination or a variation thereof.

[0100] Similarly, although the operations are depicted in a specific order in the accompanying drawings, this should not be construed as requiring these operations to be performed in the specific order shown or sequentially, or requiring all illustrated operations to be performed to achieve the desired result. In some cases, multitasking and parallel processing may be advantageous. Furthermore, the separation of various system modules and components in the above embodiments should not be construed as requiring such separation in all embodiments, and it should be understood that the described program components and systems can generally be integrated together in a single software product or packaged into multiple software products.

[0101] Thus, specific embodiments of the subject matter have been described. Other embodiments are within the scope of the appended claims. In some cases, the actions recited in the claims may be performed in a different order and still achieve the desired result. Furthermore, the processes depicted in the drawings are not necessarily shown in a specific order or sequence to achieve the desired result. In some implementations, multitasking and parallel processing may be advantageous.

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

[0103] The above are merely specific embodiments of the present invention, enabling those skilled in the art to understand or implement the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the present invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.< / button>

Claims

1. A front-end optimization method for a single-page application, characterized in that, include: Based on the pre-set code parsing tool, the front-end code of the target single-page application is extracted to obtain the component code information and basic structure code information corresponding to each component. Based on the basic structure code information, feature information is extracted, and component structured feature data is constructed based on the feature information; and based on the component code information, page element information is extracted, and element structured feature data is constructed based on the page element information. The component structured feature data and element structured feature data are respectively input into a pre-built deep learning model to obtain component embedding vectors and element embedding vectors. Based on the embedding vectors of each component, calculate the component similarity between components, and based on the embedding vectors of each element within the same component, calculate the element similarity between identical elements. Component fusion is performed based on component similarity and element fusion based on element similarity. Front-end code is then simplified based on the fused components and elements within the single-page application.

2. The front-end optimization method for single-page applications according to claim 1, characterized in that, The process of obtaining the basic structure code information corresponding to each component includes: Using an abstract syntax tree-based parser, the front-end code of the target single-page application is obtained. Traverse the front-end code of the target single-page application and extract the structural feature code information corresponding to the structural features, the functional feature code information corresponding to the functional features, and the API-related feature code information corresponding to the API-related features.

3. The front-end optimization method for single-page applications according to claim 1, characterized in that, The method further includes: Based on the component similarity between the first component and other components, construct a similar adjacency table for the first component; Based on the similarity between the target element and each of the same elements, construct a similar adjacency list for the target element.

4. The front-end optimization method for single-page applications according to claim 1, characterized in that, The calculation of element similarity between identical elements based on the embedding vectors of each element within the same component includes: Based on a pre-set vocabulary of elements with the same features, a target element is extracted from the elements corresponding to the embedding vectors of each element. Traverse the embedding vectors of each element, and based on the same element feature vocabulary corresponding to the target element, obtain the element embedding vectors of each element that is the same as the target element; The cosine similarity algorithm is used to calculate the similarity between the element embedding vector of the target element and the element embedding vectors of each obtained element.

5. The front-end optimization method for a single-page application according to any one of claims 1 to 4, characterized in that, The method further includes: Get the first and second components to be merged; If both the first component and the second component have data points set, it is determined that the data points are duplicated. Get the first and second elements to be merged; If only one of the first and second elements has a tracking point set, it is determined that the tracking point is missing.

6. The front-end optimization method for a single-page application according to any one of claims 1 to 4, characterized in that, The method further includes: Based on the element similarity corresponding to the target component and the collected user behavior data, the start and end position information of the embedding points for the target component is determined using a pre-built LSTM time series model.

7. The front-end optimization method for single-page applications according to claim 6, characterized in that, The method further includes: Based on the user behavior data and historical user behavior data collected by the tracking points deployed according to the tracking point start and end location information, and based on the pre-built user behavior model, the page to be accessed by the user is predicted. Based on the predicted page to be accessed and the user's historical behavior data on the page to be accessed, it is determined whether to clear the page to be accessed from the cache.

8. A front-end optimization device for a single-page application, characterized in that, The front-end optimization device for the single-page application includes: The code extraction module is used to extract components from the front-end code of the target single-page application based on a pre-set code parsing tool, and to obtain the component code information and basic structure code information corresponding to each component. The structuring module is used to extract feature information based on the basic structure code information, construct component structured feature data based on the feature information, and extract page element information based on the component code information, construct element structured feature data based on the page element information. The embedding vector acquisition module is used to input the component structured feature data and the element structured feature data into a pre-built deep learning model to obtain the component embedding vector and the element embedding vector. The similarity calculation module is used to calculate the component similarity between components based on the embedding vectors of each component, and to calculate the element similarity between identical elements based on the embedding vectors of each element within the same component. The code optimization module is used to perform component fusion based on component similarity and element fusion based on element similarity, and to simplify the front-end code based on the fused components and elements within the single-page application.

9. A storage medium, characterized in that, The storage medium stores a program or instructions, which are executed by a processor to implement the steps of the front-end optimization method for a single-page application as described in any one of claims 1 to 7.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the front-end optimization method for a single-page application as described in any one of claims 1 to 7.

Images