Intelligent caching method and device for loading front-end resources as required, equipment and medium

Abstract

The invention relates to the technical field of front-end resources, in particular to an intelligent caching method and device for loading front-end resources on demand, equipment and a medium, and the method comprises the following steps: obtaining user behavior data, predicting an access page, identifying required resources, and constructing a resource dependency graph; calculating resource use frequency and importance, and determining a target resource; selecting a resource format and a compression mode according to the user equipment type; according to the resource dependency relationship graph, loading and caching target resources required by a next page possibly accessed by the user in advance; meanwhile, the caching strategy is dynamically adjusted based on the resource use frequency and the importance index; the method comprises the following steps: monitoring a network condition, dynamically adjusting a resource loading strategy, pre-loading resources before a user requests by using a resource dependency graph and a server pushing technology, and determining a target loading mode when the user accesses. Therefore, the problems that in the prior art, resource loading is low in efficiency, a caching strategy is rigid, environment adaptability is poor, user behavior analysis is insufficient, and performance optimization automation is lack are solved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end resources, and in particular to an intelligent caching method, device, equipment and medium for on-demand loading of front-end resources. Background Art

[0002] With the rapid development of Internet technology, Web applications are becoming more and more complex, and page resources are becoming increasingly large. This leads to slower page loading and a poorer user experience. Traditional resource loading methods usually use a one-time loading of all resources or a simple delayed loading strategy, which is often inefficient in complex Web applications and cannot meet users' needs for fast response.

[0003] Currently, the industry has begun to pay attention to on-demand resource loading technology, but existing solutions still have the following problems: they do not fully utilize user browsing behavior data to predict resource demand, resulting in low preloading efficiency; they fail to effectively build and utilize the dependency graph between resources, affecting the priority and order of resource loading; caching strategies are often static and cannot be dynamically adjusted according to the importance and frequency of use of resources; they rarely consider real-time network conditions to adjust resource loading strategies, and cannot maintain optimal performance under different network environments; there is a lack of continuous monitoring and optimization of loading performance, and it is impossible to achieve closed-loop performance improvement. Summary of the invention

[0004] The present application provides an intelligent caching method, device, equipment and medium for on-demand loading of front-end resources to solve the problems of low efficiency of Web application resource loading, fixed caching strategy, inability to adapt to different network environments, insufficient user behavior analysis and lack of automation in performance optimization in the prior art.

[0005] The first aspect of the present application provides an intelligent caching method for on-demand loading of front-end resources, comprising the following steps: obtaining user behavior data, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click paths, search keywords, page scrolling depth, dwell time distribution, and interactive event sequences; predicting the next page that the user will visit based on the user behavior data, identifying the resources required for the next page, and constructing a resource dependency graph based on the resources required for the next page; calculating the usage frequency and importance index of each resource based on the user behavior data and the resource dependency graph, and determining the target resource based on a predetermined threshold; selecting the target resource format and compression format based on the user device type, operating system, and browser version; method, wherein the resource format and compression method are suitable for the resources required for the next page; based on the resources required for the next page, the resource dependency graph, and the resource format and compression method, the target resources required for the next page that the user may visit are loaded and cached in advance; based on the usage frequency and importance index of each resource, the cache strategy is dynamically adjusted, wherein the cache strategy includes cache priority, cache time and cache capacity; the resource loading strategy is dynamically adjusted by monitoring the network status, and the resources are pre-loaded before the user's request according to the resource dependency graph and the server push technology, and when the user accesses the target resource, the target loading method is determined according to the cache strategy, the resource format, the compression method and the network status.

[0006] Preferably, the resource loading strategy is dynamically adjusted by monitoring the network status, including: monitoring the network status, preloading resources if the network is sufficient, and optimizing transmission according to the resource format and compression method, wherein the optimized transmission includes adjusting the transmission rate and the number of concurrent connections, and if the network is limited, caching the target resources according to the resource usage frequency and importance index, and using the compression method to reduce the cache capacity of the target resources.

[0007] Preferably, based on the user behavior data analysis, predicting the next page visited by the user includes: training a prediction model based on historical user behavior data; serializing the current user's behavior data and inputting it into the prediction model to obtain a probability distribution of the next visited page; and determining the next page visited by the user based on a target value in the probability distribution.

[0008] Preferably, a resource dependency graph is constructed based on the resources required for the next page, including: obtaining external resource references and dynamically loaded resources; establishing a resource dependency list based on the external resource references and the dynamically loaded resources, and using a graph traversal algorithm to construct a resource dependency tree structure based on the resource dependency list; converting the resource dependency tree structure into a directed acyclic graph, and assigning weights to each resource node in displaying page rendering according to the directed acyclic graph, resource type, and loading order.

[0009] Preferably, the usage frequency and importance index of each resource are calculated according to the user behavior data and the resource dependency graph, including: obtaining the number of times each resource is used and the most recent use time in historical access based on the user behavior data; using the number of times and the most recent use time, using a time decay function to calculate the usage frequency score of each resource;

[0010] Analyze the role of each resource in page rendering, and evaluate the functional importance of the resource in combination with the resource dependency graph; measure the loading time of each resource to evaluate its impact on the overall page performance; and calculate the comprehensive importance index of each resource using a weighted algorithm based on the usage frequency score, the functional importance, and the performance impact.

[0011] Preferably, based on the usage frequency and importance index of each resource, the cache strategy is dynamically adjusted, including: monitoring resource loading performance and user experience indexes, wherein the user experience indexes include page loading time, first content drawing time and interactive time; based on the resource loading performance and the user experience indexes, analyzing the degree of influence of resource loading on user experience; adjusting the usage frequency and importance index of resources according to the degree of influence of the user experience, and optimizing resource preloading strategy and cache strategy; based on the optimized resource preloading strategy and cache strategy, re-executing the resource loading and caching process, and generating a performance report containing original indicators, optimization strategy and optimized indicators; according to the optimization results in the performance report, automatically adjusting the resource loading threshold and cache parameters to achieve continuous closed-loop optimization.

[0012] The second aspect of the present application provides an intelligent caching device for on-demand loading of front-end resources, including: an acquisition module for acquiring user behavior data, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click paths, search keywords, page scrolling depth, dwell time distribution, and interactive event sequences; a construction module for predicting the next page visited by the user based on the user behavior data, identifying the resources required for the next page, and constructing a resource dependency graph based on the resources required for the next page; a calculation module for calculating the usage frequency and importance index of each resource based on the user behavior data and the resource dependency graph, and determining the target resource based on a predetermined threshold; and selecting a resource. A selection module selects a target resource format and compression method according to the user device type, operating system and browser version, wherein the resource format and compression method are suitable for the resources required for the next page; a dynamic adjustment module dynamically adjusts the cache strategy based on the usage frequency and importance index of each resource, wherein the cache strategy includes cache priority, cache time and cache capacity; a loading module monitors the network status and dynamically adjusts the resource loading strategy, pre-loads resources before the user request according to the resource dependency graph and server push technology, and determines the target loading method according to the cache strategy, the resource format, the compression method and the network status when the user accesses the target resource.

[0013] The third aspect of the present application provides an electronic device, 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 an intelligent caching method for on-demand loading of front-end resources as in the above-mentioned embodiment.

[0014] The fourth aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, which is executed by a processor to implement an intelligent caching method for on-demand loading of front-end resources as in the above-mentioned embodiment.

[0015] The fifth aspect of the present application provides a computer program product, including a computer program or instructions, for implementing an intelligent caching method for on-demand loading of front-end resources as in the above-mentioned embodiment.

[0016] Therefore, this application includes the following beneficial effects:

[0017] The embodiment of the present application realizes intelligent preloading and on-demand loading of resources by deeply analyzing user behavior data, accurately predicting user access paths, and combining resource dependency graphs. When the network condition is good, the system preloads the resources that may be needed; when the network is limited, the loading strategy is dynamically adjusted according to the importance of the resources. At the same time, through adaptive caching strategies and resource format optimization, the resource loading efficiency and cache hit rate are significantly improved. In addition, the method also realizes real-time monitoring and automatic optimization of performance indicators, and continuously improves the loading strategy. These measures effectively reduce page loading time, improve the response speed and user experience of Web applications in various network environments and devices, and reduce unnecessary data transmission and server load. As a result, the problems of low resource loading efficiency, fixed caching strategies, inability to adapt to different network environments, insufficient user behavior analysis, and lack of automation in performance optimization in the prior art are solved, which greatly improves the overall performance and user satisfaction of Web applications.

[0018] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which: Figure 1 A flowchart of an intelligent caching method for on-demand loading of front-end resources provided according to an embodiment of the present application; Figure 2 A flowchart of a method for calculating resource usage frequency and importance index according to an embodiment of the present application; Figure 3 A schematic diagram of dynamic cache strategy adjustment provided according to an embodiment of the present application; Figure 4 A flowchart of network status monitoring and resource loading strategy adjustment provided according to an embodiment of the present application; Figure 5 A flowchart of an intelligent caching method for on-demand loading of front-end resources provided according to an embodiment of the present application; Figure 6 A schematic diagram of user behavior data analysis and page prediction provided according to an embodiment of the present application; Figure 7 A schematic diagram of a resource dependency diagram provided according to an embodiment of the present application; Figure 8 A schematic diagram of the structure of an intelligent cache device for on-demand loading of front-end resources provided in accordance with an embodiment of the present application; Fig. 9 It is a schematic diagram of the structure of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0020] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present application, and should not be construed as limiting the present application.

[0021] The following describes the intelligent caching method, device, equipment and medium for on-demand loading of front-end resources in the embodiments of the present application with reference to the accompanying drawings. In view of the problems of low resource loading efficiency and fixed caching strategy mentioned in the above background technology, the present application provides an intelligent caching method for on-demand loading of front-end resources. In this method, by deeply analyzing user behavior data, accurately predicting user access paths, and combining resource dependency graphs, intelligent preloading and on-demand loading of resources are achieved. At the same time, through adaptive caching strategies and resource format optimization, the resource loading efficiency and cache hit rate are significantly improved. This method effectively reduces page loading time, improves the response speed and user experience of Web applications in various network environments and devices, and reduces unnecessary data transmission and server load. As a result, the problems of low resource loading efficiency, fixed caching strategy, inability to adapt to different network environments, insufficient user behavior analysis, and lack of automation in performance optimization in the prior art are solved.

[0022] Specifically, Figure 1 A flow chart of an intelligent caching method for on-demand loading of front-end resources provided in an embodiment of the present application.

[0023] like Figure 1 As shown, the intelligent caching method for on-demand loading of front-end resources includes the following steps:

[0024] In step S101, user behavior data is obtained, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click paths, search keywords, page scroll depth, dwell time distribution, and interactive event sequence.

[0025] Among them, user behavior data refers to the various operations and behavior records of users in Web applications, including but not limited to page visit sequence, dwell time, interactive operations, etc.

[0026] It can be understood that the embodiments of the present application provide a rich data basis for subsequent resource prediction and optimization by comprehensively collecting user behavior data, which helps to more accurately understand user usage patterns and preferences.

[0027] It should be noted that user behavior analysis can predict the user's possible next action, thereby achieving smarter resource preloading. At the same time, by analyzing detailed information such as the user's search keywords and page scrolling depth, the content areas that the user is most interested in can be identified, and resources in these areas can be loaded first to further improve the user experience. In addition, the analysis of the distribution of dwell time and the sequence of interactive events can help the system identify the user's usage habits and the key functional areas of the page, so as to make more targeted optimizations in the resource loading strategy, ultimately achieving faster page loading speeds and smoother user interaction experiences.

[0028] In step S102, the next page that the user visits is predicted based on the user behavior data, the resources required for the next page are identified, and a resource dependency graph is constructed based on the resources required for the next page.

[0029] Among them, the resource dependency graph is a graphical representation that describes the interdependencies between various resources in a page, such as JavaScript files, CSS style sheets, images, etc.

[0030] It is understandable that the embodiment of the present application predicts the next page that the user may visit by analyzing user behavior data, and identifies the resources required for the page in advance. This predictive loading strategy significantly reduces user waiting time and improves page response speed. By constructing a resource dependency graph, the relationship between resources can be better understood, thereby optimizing the loading order and strategy, and avoiding blocking and redundancy of resource loading. This not only improves page rendering efficiency, but also reduces server load and bandwidth consumption. At the same time, the construction of the resource dependency graph provides an important decision-making basis for subsequent intelligent caching and on-demand loading, allowing the system to more accurately determine which resources need to be loaded or preloaded first, and which resources can be loaded lazily, thereby achieving more efficient resource management and a smoother user experience. In addition, this method also helps developers better understand and optimize the structure of Web applications, and provides an intuitive visualization tool for performance optimization.

[0031] In an embodiment of the present application, based on user behavior data analysis, the next page visited by the user is predicted, including: training a prediction model based on historical user behavior data; serializing the current user's behavior data and inputting it into the prediction model to obtain a probability distribution of the next visited page; and determining the next page visited by the user according to a target value in the probability distribution.

[0032] It is understandable that the embodiment of the present application uses advanced machine learning technology to train an accurate prediction model based on rich historical user behavior data, which can receive and process the current user's behavior data in real time, and output the probability distribution of the user's next possible page after serialization processing. According to the target value in this probability distribution, the next page that the user is about to visit is intelligently predicted and determined. This method not only realizes personalized page recommendations, greatly optimizes the user's browsing experience, but also effectively improves the business indicators of the website or application, such as user retention rate, click-through rate, and conversion rate. At the same time, by predicting and preparing the pages that users may visit in advance, resources can be allocated more efficiently, thereby significantly reducing operating costs and providing users with a more intelligent, smooth and personalized web browsing experience.

[0033] In an embodiment of the present application, a resource dependency graph is constructed based on the resources required for the next page, including: obtaining external resource references and dynamically loaded resources; establishing a resource dependency list based on the external resource references and dynamically loaded resources, and using a graph traversal algorithm to construct a resource dependency tree structure based on the resource dependency list; converting the resource dependency tree structure into a directed acyclic graph, and assigning a weight to each resource node in displaying page rendering according to the directed acyclic graph, resource type, and loading order.

[0034] Among them, external resource references refer to external resources introduced in web pages or applications through links or references. The resource dependency tree structure is a special tree data structure used to represent the dependency relationship between resources. The directed acyclic graph is a special graph structure in which the edges are directional and there are no cycles in the graph.

[0035] It is understandable that the embodiment of the present application can clearly reveal the dependencies between resources by constructing a resource dependency list and a resource dependency tree structure, and then use a graph traversal algorithm to convert these relationships into a directed acyclic graph. On this basis, the method assigns weights to each resource node according to the resource type and loading order, ensuring that key resources are loaded first, thereby significantly improving the page loading speed. In addition, the method also helps to reduce unnecessary resource loading, reduce resource consumption when the page is loaded, and further enhance the user experience. At the same time, a clear representation of resource dependencies also improves the maintainability of the system, allowing developers to more easily understand and maintain the page structure, reducing development costs and maintenance difficulties.

[0036] In step S103, the usage frequency and importance index of each resource are calculated according to the user behavior data and the resource dependency graph, and the target resource is determined based on a predetermined threshold.

[0037] Among them, the frequency of use refers to the number of times the resource is accessed, and the importance index reflects the impact of the resource on the page function and user experience.

[0038] It is understandable that the embodiments of the present application can identify the key resources that have the greatest impact on user experience by calculating the frequency and importance of resource usage. This method not only ensures that the most important resources can be given priority, thereby improving overall loading efficiency and user satisfaction, but also provides a quantitative basis for resource management. By setting a predetermined threshold to determine the target resource, the priority of resource loading can be flexibly adjusted, and the optimal loading decision can be made under different network conditions and user scenarios. This data-driven resource optimization strategy can effectively reduce unnecessary resource loading, reduce bandwidth consumption, and ensure the consistency and fluency of user experience. In addition, this method can also help developers identify resources that may have performance bottlenecks and provide guidance for further performance optimization.

[0039] In the embodiments of the present application, Figure 2 As shown, the usage frequency and importance index of each resource are calculated based on the user behavior data and the resource dependency graph, including: based on the user behavior data, obtaining the number of times each resource is used in historical visits and the most recent usage time; using the number of times and the most recent usage time, using the time decay function to calculate the usage frequency score of each resource; analyzing the role of each resource in page rendering, and combining the resource dependency graph to evaluate the functional importance of the resource; measuring the loading time of each resource to evaluate its impact on the overall page performance; using a weighted algorithm to calculate the comprehensive importance index of each resource based on the usage frequency score, functional importance and performance impact.

[0040] Among them, the frequency of use refers to the number of times the resource is accessed, and the importance index reflects the impact of the resource on the page function and user experience.

[0041] It is understandable that the embodiment of the present application uses a time decay function and a weighted algorithm to accurately calculate the comprehensive importance index of each resource by deeply analyzing user behavior data, comprehensively considering the frequency of resource use, functional importance and its impact on page performance. This process not only optimizes resource allocation and ensures priority processing of key resources, but also effectively identifies and eliminates inefficient or redundant resources, thereby significantly improving page loading speed and user experience.

[0042] In step S104, target resource format and compression method are selected according to the user device type, operating system and browser version, wherein the resource format and compression method are suitable for resources required for the next page.

[0043] The resource formats may include different image formats or script formats, and the compression methods may include Gzip, Brotli, etc.

[0044] It is understandable that the embodiments of the present application can maximize transmission efficiency and provide a better user experience while ensuring resource quality by considering the user's device characteristics and browser capabilities and selecting the most suitable resource format and compression method. This intelligent adaptation strategy can not only significantly reduce the file size of resources and speed up loading, but also ensure the best display effect of resources on different devices.

[0045] For example, for modern browsers that support the WebP format, you can choose a smaller WebP image format; for older devices, you may choose a more compatible JPEG format. At the same time, choosing the appropriate compression method based on network conditions can ensure faster loading speeds even when bandwidth is limited. This flexible resource adaptation strategy not only improves user experience, but also effectively reduces bandwidth consumption and server load, saving costs for website operators.

[0046] In step S105, target resources required for the next page that the user may visit are loaded and cached in advance according to the resources required for the next page, the resource dependency graph, and the resource format and compression method.

[0047] Among them, preloading refers to the process of loading a resource before the user actually requests the resource.

[0048] It is understandable that the embodiment of the present application significantly reduces the user waiting time and improves the page loading speed and responsiveness through intelligent prediction and preloading. This preloading strategy not only takes into account the next page that the user may visit, but also combines the resource dependency graph to ensure that key resources can be loaded in the optimal order, avoiding the blocking and redundancy of resource loading. At the same time, by selecting the appropriate resource format and compression method, the efficiency of the preloading process is further optimized. This method can not only provide a nearly instant page switching experience, but also effectively utilize idle network bandwidth and reduce the waiting time of users in the actual browsing process. In addition, through a reasonable caching strategy, the situation of repeatedly loading the same resource is reduced, the use of network resources is further optimized, and the load pressure of the server is also reduced.

[0049] In step S106, the cache strategy is dynamically adjusted based on the usage frequency and importance index of each resource.

[0050] Among them, the cache strategy includes cache priority, cache time and cache capacity. The cache strategy refers to a series of rules and methods that determine which resources should be cached, how long to cache, and how to manage the cache space.

[0051] It is understandable that the embodiments of the present application can more flexibly adapt to the characteristics of different resources and the user's usage pattern by dynamically adjusting the cache strategy. This method ensures that the most important and most commonly used resources can be retained in the cache for a long time, while infrequently used resources can be cleared in time, thereby optimizing the use efficiency of the cache space. By adjusting the cache priority, the system can give priority to retaining the resources that have the greatest impact on the user experience when the cache space is limited. At the same time, by intelligently adjusting the cache time, the effectiveness of the cache can be maximized while ensuring the freshness of the resources. In addition, dynamically adjusting the cache capacity can flexibly allocate cache space according to the storage capacity and usage of the user's device, which not only avoids frequent reloading caused by insufficient cache, but also prevents excessive caching from occupying too much device storage. This intelligent cache management not only improves the resource loading speed, but also reduces unnecessary network requests, further optimizing the user experience and network resource utilization.

[0052] Specifically, Figure 3 As shown in the figure, the process of dynamic cache policy adjustment includes the following steps: Assign an initial cache priority to each resource based on the resource's usage frequency and importance index. Set an appropriate cache time based on the resource's update frequency and timeliness. Dynamically adjust the cache capacity of each resource considering the device storage capacity and network conditions. Regularly monitor cache hit rate and user experience indicators such as page loading time. Automatically adjust cache policy parameters based on monitoring results, such as increasing the priority of high-hit rate resources or extending their cache time. For resources that have not been used for a long time or whose importance has decreased, reduce their cache priority or reduce their cache capacity.

[0053] In an embodiment of the present application, the cache strategy is dynamically adjusted based on the resource usage frequency and importance index, and also includes: monitoring resource loading performance and user experience index; based on the resource loading performance and user experience index, analyzing the impact of resource loading on user experience; according to the impact on user experience, adjusting the resource usage frequency and importance index, optimizing the resource preloading strategy and cache strategy; based on the optimized resource preloading strategy and cache strategy, re-executing the resource loading and caching process, and generating a performance report containing the original index, optimization strategy and optimized index; according to the optimization results in the performance report, automatically adjusting the resource loading threshold and cache parameters to achieve continuous closed-loop optimization.

[0054] Among them, user experience indicators include page loading time, first content painting time and interactive time.

[0055] It is understandable that the embodiment of the present application comprehensively monitors resource loading performance and user experience indicators, deeply analyzes the specific impact of resource loading on user experience, and adjusts resource usage frequency, importance indicators, and preloading and caching strategies accordingly. By re-executing the resource loading and caching process, a performance report containing original and optimized indicators is generated, and then the loading threshold and cache parameters are automatically adjusted, forming a continuous closed-loop optimization mechanism to continuously improve resource loading performance and user experience.

[0056] In step S107, the network status is monitored to dynamically adjust the resource loading strategy. According to the resource dependency graph and server push technology, resources are pre-loaded before the user's request. When the user accesses the target resource, the target loading method is determined according to the cache strategy, resource format, compression method and network status.

[0057] Among them, server push is a technology that allows the server to actively send resources before the client requests it.

[0058] It is understandable that the embodiments of the present application can maintain good performance in different network environments by monitoring network conditions in real time and dynamically adjusting the loading strategy. When the network condition is good, the system can preload resources more aggressively, and when the network is limited, a more conservative loading strategy can be adopted to prioritize the loading of key resources. Combined with the server-side push technology, the system can preload resources more actively, further reducing user waiting time. At the same time, by comprehensively considering multiple factors such as caching strategy, resource format, compression method, etc., the best loading method is determined to ensure the efficiency and reliability of resource loading. This intelligent loading strategy can not only provide a smoother user experience, but also effectively reduce bandwidth consumption and server load. In addition, this method is also highly adaptable and can automatically adjust according to different network environments and user behavior patterns to provide optimal performance for Web applications in various scenarios.

[0059] Specifically, Figure 4 As shown in the figure, the network status is monitored in real time, including bandwidth, latency and stability; network status is classified into categories, such as "good", "general" and "limited"; different loading strategies are adopted: when the network status is good, resources are actively preloaded and parallel loading technology is used; when the network status is general: key resources are loaded first and non-key resources are loaded lazily; when the network is limited: only the most basic resources are loaded and more aggressive compression methods are used; combined with the resource dependency graph, the order of resource loading is optimized to avoid blocking; server-side push technology is used to actively push key resources under appropriate network conditions; the priority of ongoing resource loading tasks is dynamically adjusted according to real-time network status and user interaction; performance indicators such as loading time and first content drawing time are continuously monitored during the resource loading process, and loading strategies are further optimized based on these indicators.

[0060] In an embodiment of the present application, the network status is monitored to dynamically adjust the resource loading strategy, including: monitoring the network status, preloading resources if the network is sufficient, and optimizing transmission according to the resource format and compression method, wherein the optimized transmission includes adjusting the transmission rate and the number of concurrent connections. If the network is limited, the target resources are cached according to the resource usage frequency and importance index, and the cache capacity of the target resources is reduced by using compression.

[0061] It is understandable that the embodiment of the present application realizes dynamic optimization management of network resources by intelligently monitoring network conditions. When the network conditions are sufficient, the system will actively preload resources, and flexibly adjust the transmission rate and the number of concurrent connections for different resource formats and compression methods to achieve optimized transmission of resources. This strategy aims to make full use of network resources, increase the speed of resource loading, and thus improve the user experience. When the network conditions are limited, the system intelligently selects and caches target resources based on the frequency of resource use and importance indicators. At the same time, using effective compression methods, the system can significantly reduce the cache capacity of target resources to alleviate network pressure and optimize the use of storage space.

[0062] The embodiment of the present application provides an intelligent caching method for on-demand loading of front-end resources, which can significantly improve the performance and user experience of Web applications. The method realizes efficient and intelligent resource loading by deeply analyzing user behavior, intelligently predicting resource requirements, dynamically adjusting caching strategies, optimizing resource formats and loading sequences, and flexibly responding to different network environments. This not only reduces page loading time and improves user satisfaction, but also optimizes the use of network resources, reduces server load and operating costs. At the same time, the adaptive characteristics of the method enable it to maintain good performance under various devices and network conditions, providing strong support for the wide application and continuous optimization of Web applications. As a result, the problems of inefficient resource loading, rigid caching strategies, poor environmental adaptability, insufficient user behavior analysis, and lack of performance optimization automation in the prior art are solved.

[0063] The following will describe the intelligent caching method for on-demand loading of front-end resources through a specific embodiment. Figure 5 As shown, including:

[0064] Step 1: Obtain user behavior data.

[0065] Among them, user behavior data includes page visit sequence, dwell time, interactive operations, user click paths, search keywords, page scroll depth, dwell time distribution and interactive event sequence. The data collection time span is one year, involving various pages and functional modules of the website. Data sources include front-end embedding points, server logs and user session records. The collected data is cleaned, including removing outliers, processing missing data and unifying data formats. The number of users analyzed statistically exceeds 1 million, covering multiple user groups and usage scenarios.

[0066] Step 2: Predict the next page the user will visit based on user behavior data.

[0067] like Figure 6 As shown in the figure, we first try four prediction models: Markov chain model, LSTM neural network, random forest and gradient boosting decision tree. Taking LSTM neural network as an example, its basic structure includes input layer, LSTM layer, fully connected layer and output layer. The input layer receives user behavior sequence data, the LSTM layer contains multiple LSTM units to capture temporal dependencies, the fully connected layer maps the output of the LSTM layer to the prediction result, and the output layer outputs the probability distribution of the next possible visited page.

[0068] Among them, the LSTM model is built using a deep learning framework, the appropriate number of layers and neurons are set, and the cross entropy loss function and Adam optimizer are used for model training. The optimal page prediction model is selected by comparing the prediction accuracy and F1 scores of different models.

[0069] Take the Markov chain model as an example. The Markov chain model assumes that the user's next behavior is only related to the current state. Construct a transition probability matrix, in which each element of the matrix represents the probability of transitioning from one page to another. The specific steps include: counting the user's page access sequence; calculating the transition frequency between pages; normalizing the transition frequency to obtain the transition probability; using the transition probability matrix to predict the next page that may be visited;

[0070] Take random forest as an example. Random forest is an integrated learning method composed of multiple decision trees. For page prediction tasks, the random forest model is implemented in the following steps: convert user behavior data into feature vectors, including historical visited pages, dwell time, number of clicks, etc.; build multiple decision trees, each tree uses a randomly selected feature subset; in each decision tree, select the best split feature based on information gain or Gini coefficient; for new input, combine the prediction results of all decision trees and select the page with the most votes as the prediction result.

[0071] Taking the gradient boosting decision tree as an example, it is another powerful ensemble learning method that iteratively trains decision trees to minimize the loss function. The implementation steps are as follows: a) Initialize the model to a constant prediction value; b) For each iteration: calculate the negative gradient of the current model, fit a new decision tree to predict this negative gradient, add the new tree to the model, and update the prediction result; c) Repeat step b until the preset number of iterations is reached or the stopping condition is met; d) Use the final model to make predictions and output the probability scores of each page.

[0072] Step 3: Identify the resources required for the next page and build a resource dependency graph.

[0073] like Figure 7 As shown in the figure, index.html, as the entry node, references main.js, style.css and icon resources respectively; main.js further relies on the utils.js tool library and api.js interface module; style.css nests and references icon resources. After traversing each node through the depth-first search algorithm, the initial dependency relationship formed is: index.html→icon resources, index.html→main.js→utils.js, index.html→main.js→api.js, index.html→style.css→icon resources. In the implementation process, a graph data structure is used to represent resource dependencies. Each resource is a node in the graph, containing attributes such as URL, type, and size. The dependency relationship between resources is represented by edges. The dependency relationship is optimized through the graph algorithm, including removing circular dependencies and calculating node weights, and finally an optimized resource dependency graph is obtained.

[0074] Step 4: Calculate the usage frequency and importance index of each resource.

[0075] Among them, the frequency calculation formula is:

[0076] frequency_score=(num_uses*recency_factor) / total_pageviews

[0077] Among them, the importance index calculation formula is:

[0078] importance_score=(functionality_weight*0.4+performance_impact*0.4+dependency_level*0.2)

[0079] Among them, num_uses is the number of times the resource is used, recency_factor is the time decay factor, total_pageviews is the total page views, functionality_weight is the function importance weight, performance_impact is the performance impact, and dependency_level is the dependency level.

[0080] Step 5: Select the appropriate resource format and compression method.

[0081] Choose the most appropriate resource format and compression method based on the user's device type, operating system, and browser version. For example:

[0082] For modern browsers that support WebP, convert JPEG and PNG images to WebP format; for text resources (HTML, CSS, JavaScript), use Gzip or Brotli compression; for font files, choose WOFF2 or WOFF format depending on browser support. In actual applications, determine browser support based on user agent information, and then choose the most appropriate compression method for each resource type. This process is implemented through a decision function that receives the user agent string and resource type as input and returns the best compression method.

[0083] Step 6: Load and cache target resources in advance.

[0084] Based on the prediction results and resource importance, Service Worker is used to preload and cache resources. The main functions of Service Worker include: installation phase: pre-cache important static resources; activation phase: clear the cache of old versions; intercept request: use the cache to respond to requests first, and obtain the required resources from the network if there is no required resource in the cache. Through these functions of Service Worker, offline caching and fast loading of resources are achieved, significantly improving the performance and user experience of Web applications.

[0085] Step 7: Dynamically adjust the cache strategy.

[0086] Dynamically adjust the cache strategy based on the resource usage frequency and importance index. Specifically, a function is defined to adjust the cache strategy based on the frequency score and importance score of the resource. The function assigns different cache priorities, cache times, and cache capacities to the resource based on the score.

[0087] For resources that are frequently used and of high importance, you can set a high priority, a longer cache time (such as 7 days), and an unlimited cache capacity. For resources that are less frequently used and of low importance, you can set a low priority, a shorter cache time (such as 1 hour), and a limited cache capacity (such as 10MB).

[0088] Through this dynamic adjustment strategy, the present invention more effectively utilizes limited cache space, ensuring that the most important and most frequently used resources can always be quickly loaded, while also avoiding caching too many unnecessary resources.

[0089] In summary, the present invention realizes a comprehensive and efficient front-end resource intelligent loading and caching method, which can not only accurately predict the user's next operation, but also perform intelligent preloading and on-demand loading according to the importance and frequency of use of resources. By constructing an accurate resource dependency graph, the loading order of resources is optimized, and the blocking time of page rendering is effectively reduced. At the same time, the dynamically adjusted cache strategy ensures that the most critical resources always maintain high availability, and infrequently used resources are cleaned up in time, thereby maximizing the utilization of limited cache space. In addition, the present invention significantly reduces the amount of data transmission and further improves the loading speed by selecting the most suitable resource format and compression method. The combined effect of these optimization measures not only greatly improves the loading speed and responsiveness of Web applications, but also greatly improves the user experience, especially in mobile environments with unstable network conditions. By reducing unnecessary data transmission and server requests, bandwidth consumption and server load are effectively reduced, saving operating costs for enterprises and providing users with a smoother, faster and more reliable online experience.

[0090] Next, the intelligent cache device for on-demand loading of front-end resources proposed in the embodiment of the present application is described with reference to the accompanying drawings.

[0091] Figure 8 It is a block diagram of an intelligent cache device for on-demand loading of front-end resources according to an embodiment of the present application.

[0092] like Figure 8 As shown, the intelligent cache device 10 for on-demand loading of front-end resources includes: an acquisition module 100 , a construction module 200 , a calculation module 300 , a selection module 400 , a loading module 500 , an adjustment module 600 and a monitoring module 700 .

[0093] Among them, the acquisition module 100 is used to obtain user behavior data, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click path, search keywords, page scrolling depth, dwell time distribution and interactive event sequence; the construction module 200 is used to predict the next page visited by the user based on the user behavior data, identify the resources required for the next page, and build a resource dependency graph based on the resources required for the next page; the calculation module 300 is used to calculate the usage frequency and importance index of each resource based on the user behavior data and the resource dependency graph, and determine the target resource based on a predetermined threshold; the selection module 400 is used to select the target resource format and compression method according to the user device type, operating system and browser version, and In the example, the resource format and compression method are suitable for the resources required for the next page; the loading module 500 is used to load and cache the target resources required for the next page that the user may visit in advance according to the resources required for the next page, the resource dependency graph, and the resource format and compression method; the adjustment module 600 is used to dynamically adjust the cache strategy based on the usage frequency and importance index of each resource, wherein the cache strategy includes cache priority, cache time and cache capacity; the monitoring module 700 is used to monitor the network status and dynamically adjust the resource loading strategy, pre-load resources before the user request according to the resource dependency graph and server push technology, and determine the target loading method according to the cache strategy, resource format, compression method and network status when the user accesses the target resource.

[0094] It should be noted that the above explanation of the embodiment of the intelligent caching method for on-demand loading of front-end resources is also applicable to the intelligent caching device for on-demand loading of front-end resources of this embodiment, and will not be repeated here.

[0095] According to the intelligent caching device for on-demand loading of front-end resources proposed in the embodiment of the present application, the next page that the user may visit is accurately predicted by intelligently analyzing user behavior data and resource dependencies, and the resource loading and caching strategies are dynamically adjusted according to device characteristics and network conditions. This method not only significantly improves the loading speed and responsiveness of Web applications, but also effectively reduces unnecessary data transmission and server load. In particular, when network conditions are unstable or bandwidth is limited, the device can prioritize loading and caching of the most important resources to ensure the availability of core functions. Through an adaptive caching strategy, the device can also dynamically adjust the cache priority and time of resources according to the actual usage of the user to maximize the cache efficiency. As a result, the problems of low resource loading efficiency, fixed caching strategies, inability to adapt to different network environments, insufficient user behavior analysis, and lack of automation in performance optimization in the prior art are solved, and the overall performance and user experience of Web applications are improved.

[0096] Fig. 9A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device may include:

[0097] A memory 901 , a processor 902 , and a computer program stored in the memory 901 and executable on the processor 902 .

[0098] When the processor 902 executes the program, the intelligent caching method for on-demand loading of front-end resources provided in the above embodiment is implemented.

[0099] Furthermore, the electronic device further comprises:

[0100] The communication interface 903 is used for communication between the memory 901 and the processor 902 .

[0101] The memory 901 is used to store computer programs that can be executed on the processor 902 .

[0102] The memory 901 may include a high-speed RAM (Random Access Memory) memory, and may also include a non-volatile memory, such as at least one disk memory.

[0103] If the memory 901, the processor 902 and the communication interface 903 are implemented independently, the communication interface 903, the memory 901 and the processor 902 can be connected to each other through a bus and communicate with each other. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig. 9 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0104] Optionally, in a specific implementation, if the memory 901, the processor 902 and the communication interface 903 are integrated on a chip, the memory 901, the processor 902 and the communication interface 903 can communicate with each other through an internal interface.

[0105] The processor 902 may be a CPU (Central Processing Unit), or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application.

[0106] An embodiment of the present application also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the intelligent caching method for on-demand loading of front-end resources as described above is implemented.

[0107] In addition, an embodiment of the present application also provides a computer program product, including a computer program or instructions, which, when executed, implements the above-mentioned intelligent caching method for on-demand loading of front-end resources.

[0108] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms is not necessarily for the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0109] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, "plurality" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0110] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or more executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.

[0111] It should be understood that the various parts of the present application can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or a combination thereof: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0112] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0113] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limitations on the present application. Ordinary technicians in this field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. An intelligent caching method for on-demand loading of front-end resources, characterized in that: The method comprises: Obtaining user behavior data, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click paths, search keywords, page scroll depth, dwell time distribution, and interactive event sequence; Predicting the next page visited by the user based on the user behavior data, identifying resources required for the next page, and constructing a resource dependency graph based on the resources required for the next page; Calculate the usage frequency and importance index of each resource according to the user behavior data and the resource dependency graph, and determine the target resource based on a predetermined threshold; Selecting a target resource format and compression method according to the user device type, operating system, and browser version, wherein the resource format and compression method are suitable for the resources required for the next page; According to the resources required by the next page, the resource dependency graph, and the resource format and compression method, pre-load and cache the target resources required for the next page that the user may visit; Based on the usage frequency and importance index of each resource, dynamically adjust the cache strategy, wherein the cache strategy includes cache priority, cache time and cache capacity; Monitor the network status and dynamically adjust the resource loading strategy. According to the resource dependency graph and server push technology, preload resources before the user's request. When the user accesses the target resource, determine the target loading method according to the cache strategy, the resource format, the compression method and the network status.

2. The intelligent caching method for on-demand loading of front-end resources according to claim 1 is characterized in that: Monitor network conditions and dynamically adjust resource loading strategies, including: Monitor the network status, preload resources if the network is sufficient, and optimize transmission according to the resource format and compression method, wherein the optimized transmission includes adjusting the transmission rate and the number of concurrent connections. If the network is limited, cache the target resources according to the resource usage frequency and importance index, and use the compression method to reduce the cache capacity of the target resources.

3. The intelligent caching method for on-demand loading of front-end resources according to claim 1 is characterized in that: Based on the user behavior data analysis, predict the next page that the user will visit, including: Train prediction models based on historical user behavior data; The behavior data of the current user is serialized and input into the prediction model to obtain the probability distribution of the next visited page; Determine the next page the user visits based on the target value in the probability distribution.

4. The intelligent caching method for on-demand loading of front-end resources according to claim 1 is characterized in that: A resource dependency graph is constructed based on the resources required for the next page, including: Get external resource references and dynamically loaded resources; Based on the external resource references and the dynamically loaded resources, a resource dependency list is established, and a resource dependency tree structure is constructed based on the resource dependency list using a graph traversal algorithm; The resource dependency tree structure is converted into a directed acyclic graph, and a weight is assigned to each resource node in the display page rendering according to the directed acyclic graph, resource type and loading order.

5. The intelligent caching method for on-demand loading of front-end resources according to claim 1 is characterized in that: According to the user behavior data and the resource dependency graph, the usage frequency and importance index of each resource are calculated, including: Based on the user behavior data, obtain the number of times each resource has been used and the most recent time of use in historical accesses; Calculate the usage frequency score of each resource using the usage count and the most recent usage time using a time decay function; Analyze the role of each resource in page rendering and evaluate the functional importance of the resource in combination with the resource dependency graph; Measure the loading time of each resource to assess its impact on overall page performance; A comprehensive importance index of each resource is calculated using a weighted algorithm according to the usage frequency score, the function importance and the performance impact degree.

6. The intelligent caching method for on-demand loading of front-end resources according to claim 1 is characterized in that: Based on the usage frequency and importance index of each resource, the cache strategy is dynamically adjusted, including: Monitor resource loading performance and user experience indicators, where the user experience indicators include page loading time, first content painting time and interactive time; Based on the resource loading performance and the user experience index, analyzing the impact of resource loading on user experience; Adjust resource usage frequency and importance indicators according to the impact of the user experience, and optimize resource preloading strategy and caching strategy; Based on the optimized resource preloading strategy and caching strategy, re-execute the resource loading and caching process, and generate a performance report including the original indicators, the optimization strategy and the optimized indicators; According to the optimization results in the performance report, resource loading thresholds and cache parameters are automatically adjusted to achieve continuous closed-loop optimization.

7. An intelligent cache device for on-demand loading of front-end resources, characterized in that: include: An acquisition module is used to acquire user behavior data, wherein the user behavior data includes page access sequence, dwell time, interactive operations, user click paths, search keywords, page scroll depth, dwell time distribution, and interactive event sequence; A construction module predicts the next page visited by the user based on the user behavior data, identifies the resources required for the next page, and constructs a resource dependency graph based on the resources required for the next page; A calculation module, used to calculate the usage frequency and importance index of each resource according to the user behavior data and the resource dependency graph, and determine the target resource based on a predetermined threshold; A selection module, used to select a target resource format and compression method according to the user device type, operating system and browser version, wherein the resource format and compression method are suitable for the resources required for the next page; A loading module, used to load and cache the target resources required for the next page that the user may visit in advance according to the resources required for the next page, the resource dependency graph, and the resource format and compression method; An adjustment module, configured to dynamically adjust a cache strategy based on the usage frequency and importance index of each resource, wherein the cache strategy includes a cache priority, a cache time, and a cache capacity; The monitoring module is used to monitor the network status and dynamically adjust the resource loading strategy. According to the resource dependency graph and the server push technology, the resource is pre-loaded before the user's request. When the user accesses the target resource, the target loading method is determined according to the cache strategy, the resource format, the compression method and the network status.

8. An electronic device, characterized in that: include: 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 intelligent caching method for on-demand loading of front-end resources as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program or instruction stored thereon, characterized in that: When the computer program or instruction is executed, the intelligent caching method for on-demand loading of front-end resources as described in any one of claims 1-6 is implemented.

10. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed, the intelligent caching method for on-demand loading of front-end resources as described in any one of claims 1-6 is implemented.

Images