Front-end resource dynamic loading and caching optimization method based on user behavior prediction

Abstract

The invention provides a front-end resource dynamic loading and caching optimization method based on user behavior prediction. According to the dynamic resource loading and caching strategy, a resource loading and caching elimination mechanism based on user behavior prediction is achieved through four core modules, and the incidence relation between user behaviors and resource access is established by recording the route access history, the page dwell time and the element click behavior; a priority scoring model is provided for different resources, resource priority scores are dynamically calculated to decide whether to be preloaded or not, preloading trigger mechanism judgment is added, and intelligent cache management is achieved. Finally, the problems of performance bottleneck and resource redundancy of traditional static loading are solved, user experience, resource efficiency and system stability are balanced, and the method is particularly suitable for large-scale application and complex user scenes.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction. Background Technology

[0002] As the resource explosion and performance conflict intensify in front-end web applications, front-end resources have jumped from the "KB level" to the "MB level." A complex front-end application may contain hundreds of JS modules, CSS files, and other resources such as images. Early "full load all at once" and "fixed caching strategies" are no longer sufficient to cope with this resource explosion. Furthermore, with the widespread adoption of mobile internet, users' tolerance for page response speed has decreased dramatically. Research shows that every 1-second delay in page loading can lead to a 7% user churn rate. Additionally, mobile users may face varying network environments (2G / 3G / 4G / 5G), resulting in significant bandwidth fluctuations. Fixed loading strategies can lead to resource loading failures in weak network environments or underutilization of resources in strong network environments. The maturity of front-end engineering toolchains, the gradual enhancement of browser native APIs, and the widespread adoption of user behavior analysis technologies have made dynamic resource optimization possible.

[0003] The existing technology has the following technical disadvantages: Slow initial page loading: In the traditional mode, the page loads all related resources (JS / CSS / images, etc.) at once, regardless of whether the user needs them, which causes the initial page rendering to be blocked. This results in a poor user experience, especially in weak network environments, and also causes bandwidth waste and memory consumption.

[0004] Chaotic cache space management: Traditional caching strategies (such as fixed cache size and simple expiration time) can lead to low-priority resources (such as infrequently accessed advertising scripts) occupying space, while high-priority resources (such as core functional JS) may be frequently evicted.

[0005] Static resources cannot adapt to personalized needs: Different users have different access paths (e.g., in e-commerce, some users buy directly while others browse repeatedly), and static loading strategies cannot adapt to personalized needs.

[0006] Network environment volatility: In weak network or high latency environments, the probability of resource loading failure or timeout increases, directly affecting the availability of functions.

[0007] Memory leaks and cache bloat: In long-running single-page applications (SPAs), uncleaned cache resources will gradually accumulate, leading to excessive memory usage and even causing page lag or crashes. Summary of the Invention

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

[0009] Therefore, the first objective of this invention is to propose a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction.

[0010] The second objective of this invention is to propose a front-end resource dynamic loading and caching optimization device based on user behavior prediction.

[0011] To achieve the above objectives, a first aspect of the present invention proposes a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction, comprising: S1. Obtain user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlation relationships, train a user behavior prediction model based on historical data to output resource access probability and priority score. S2 monitors the user's current behavior, browser idle status, and network bandwidth in real time, inputs the monitoring data into the prediction model to calculate the priority score of the target resource, and filters and preloads candidate resources according to preset thresholds. S3 dynamically adjusts the preloading triggering conditions based on the browser idle state detection results and network type, and performs asynchronous preloading operations on the selected candidate resources; S4 employs a hybrid strategy of priority scoring and least recently used algorithm to manage cache space, dynamically evicting low-priority resources and updating cache version information based on resource priority, access frequency, and resource size; S5, record the actual resource usage and loading time data, input the feedback information into the prediction model, wherein the feedback information includes whether the resource is actually used, the number of loading failures, and the loading time, and dynamically adjust the model parameter weights to optimize the subsequent prediction results.

[0012] In one embodiment of the present invention, S1 further includes: S11 uses the v-track-click directive to mark key interactive elements and collects user click events, route navigation paths, and page dwell time as behavioral data. S12 uses a decision tree algorithm or Markov chain model to perform feature association analysis on the collected data, generating a dynamic mapping relationship between user behavior and resource access.

[0013] In one embodiment of the present invention, S2 further includes: S21, detects the browser's main thread idle state through the requestIdleCallback API, and triggers the resource prediction process when the user has no operation for 3 consecutive seconds. S22 dynamically adjusts the priority threshold based on network type. In a 5G environment, resources with a priority score greater than 60 are loaded, while in a 2G environment, only core resources with a priority score greater than 80 are loaded.

[0014] In one embodiment of the present invention, S3 further includes: S31 employs a concurrency control strategy to limit the number of resources preloaded simultaneously. In a 5G environment, it allows three resources to be loaded concurrently, while in a 2G environment, it limits them to one resource. S32 uses the fetch API to load resources asynchronously and sets the loading timeout threshold to 1.5 times the current average network latency.

[0015] In one embodiment of the present invention, S4 further includes: S41, calculate the resource eviction priority, set the priority score weight to 60%, the LRU time weight to 40%, and prioritize the eviction of low-priority resources that have not been accessed for a long time. S42 verifies the version of cached resources by comparing hash values. When a resource hash value is found to be inconsistent with the latest version on the server, a cache update is triggered and the new version metadata is marked.

[0016] To achieve the above objectives, a second aspect of the present invention provides a front-end resource dynamic loading and caching optimization device based on user behavior prediction, comprising: The data acquisition and feature modeling module is used to acquire user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlations, and train a user behavior prediction model based on historical data to output resource access probability and priority score. The real-time monitoring and priority filtering module is used to monitor the user's current behavior status, browser idle status and network bandwidth in real time, input the monitoring data into the prediction model to calculate the priority score of the target resource, and filter and preload candidate resources according to the preset threshold. The dynamic preloading trigger control module is used to dynamically adjust the preloading trigger conditions based on the browser idle state detection results and network type, and perform asynchronous preloading operations on the selected candidate resources. The cache space hybrid management module is used to manage the cache space using a hybrid strategy of priority scoring and least recently used algorithm. It dynamically evicts low-priority resources and updates cache version information based on resource priority, access frequency and resource size. The model feedback optimization module is used to record the actual resource usage and loading time data, and input the feedback information into the prediction model. The feedback information includes whether the resource is actually used, the number of loading failures, and the loading time. The module dynamically adjusts the model parameter weights to optimize the subsequent prediction results.

[0017] This invention discloses a method and apparatus for dynamic loading and caching optimization of front-end resources based on user behavior prediction. By using a resource priority scoring model based on user behavior prediction and a hybrid cache eviction mechanism, it achieves intelligent preloading and dynamic cache management of front-end resources, effectively improving the first-screen loading speed, optimizing cache space utilization, and reducing memory usage, thereby achieving a balance between user experience, resource efficiency, and system stability.

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

[0019] The above and / or additional aspects and advantages of the present invention will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein: Figure 1 This is a flowchart of a front-end resource dynamic loading and caching optimization method based on user behavior prediction according to an embodiment of the present invention; Figure 2 This is an architecture diagram of a front-end resource dynamic loading and caching optimization method based on user behavior prediction according to an embodiment of the present invention; Figure 3 This is a structural diagram of a front-end resource dynamic loading and caching optimization device based on user behavior prediction according to an embodiment of the present invention. Detailed Implementation

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

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

[0022] The following description, with reference to the accompanying drawings, describes a method and apparatus for dynamic loading and caching optimization of front-end resources based on user behavior prediction, according to an embodiment of the present invention.

[0023] Figure 1 This is a flowchart of a front-end resource dynamic loading and caching optimization method based on user behavior prediction according to an embodiment of the present invention, including: S1. Obtain user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlation relationships, train a user behavior prediction model based on historical data to output resource access probability and priority score. S2 monitors the user's current behavior, browser idle status, and network bandwidth in real time, inputs the monitoring data into the prediction model to calculate the priority score of the target resource, and filters and preloads candidate resources according to preset thresholds. S3 dynamically adjusts the preloading triggering conditions based on the browser idle state detection results and network type, and performs asynchronous preloading operations on the selected candidate resources; S4 employs a hybrid strategy of priority scoring and least recently used algorithm to manage cache space, dynamically evicting low-priority resources and updating cache version information based on resource priority, access frequency, and resource size; S5, record the actual resource usage and loading time data, input the feedback information into the prediction model, wherein the feedback information includes whether the resource is actually used, the number of loading failures, and the loading time, and dynamically adjust the model parameter weights to optimize the subsequent prediction results.

[0024] This invention discloses a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction. By using a resource priority scoring model based on user behavior prediction and a hybrid cache eviction mechanism, it achieves intelligent preloading and dynamic cache management of front-end resources, effectively improving the first-screen loading speed, optimizing cache space utilization, and reducing memory usage, thereby achieving a balance between user experience, resource efficiency, and system stability.

[0025] The following describes in detail, with reference to the accompanying drawings, a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction according to an embodiment of the present invention.

[0026] This invention provides a method for dynamic loading and caching optimization of front-end resources based on user behavior prediction. The specific solution is as follows: System components: User behavior tracking module: Record route access history, page dwell time, and element click behavior. Use the v-track-click directive to mark key interactive elements and establish a correlation between user behavior and resource access.

[0027] Resource priority scoring model: Taking into account historical access frequency (30%), path relevance (25%), resource performance impact (20%), and current user behavior (25%), the resource priority score (0-100) is dynamically calculated to determine whether to preload and to set differentiated expiration policies for different types of resources.

[0028] Preloading trigger timing determination: Based on user idle state detection (default 3 seconds of no operation), and combined with resource priority scores (only resources with a score of 60 or above are loaded), concurrent preloading control of batch resources is implemented.

[0029] Intelligent cache management: It adopts the LRU (Least Recently Used) eviction algorithm, dynamically adjusts the cache space based on the resource size, and supports automatic cleanup of expired resources.

[0030] Core processes, such as Figure 2 As shown: S10. Data Acquisition and Model Training (Offline / Near Real-Time): This includes using the v-track-click command to mark key interactive elements, collecting user click events, route jump paths, and page dwell time as behavioral data; and using decision tree algorithms or Markov chain models to perform feature association analysis on the collected data to generate a dynamic mapping relationship between user behavior and resource access.

[0031] S101. User behavior data collection: Collect user interaction behaviors (such as route jumps, click events, dwell time), resource access records (such as the path of loaded JS / CSS, loading time), and environmental data (such as network type, device performance).

[0032] Example: The action of a user clicking from the "Product List Page" to the "Product Details Page" will be marked as a path data.

[0033] S102. Feature Extraction and Association Analysis: Extract key features from the collected data, such as: path features: probability of jumping from page A to page B, average dwell time; resource features: resource size, loading frequency, and weight of impact on page performance; user features: new users / old users, frequently accessed modules.

[0034] S103. Prediction Model Training: Train a user behavior prediction model based on historical data (such as using a decision tree, Markov chain, or simple statistical probability model), and output "the probability that a user will access a certain page / module in the current state" and "the priority score of the resources required by the page".

[0035] S20, Real-time Prediction and Decision-Making (Runtime on Frontend), including detecting the browser's main thread idle state through the requestIdleCallback API, triggering the resource prediction process when the user has no operation for 3 consecutive seconds; dynamically adjusting the priority threshold according to the network type, loading resources with a priority of ≥60 in 5G environment, and only loading core resources with a priority of ≥80 in 2G environment.

[0036] S201, Real-time Status Awareness: Monitor current user behavior (such as the current page, recent clicked operations) and system status (such as browser idle status, network bandwidth, and remaining cache space).

[0037] S202 Resource Demand Forecasting: Input the real-time status into the forecasting model to calculate "the page / module that the user is most likely to visit next" and extract the list of resources (JS / CSS / images, etc.) required for these pages.

[0038] S203. Resource Priority Ranking: Based on a preset scoring model (comprehensive access probability, resource size, performance impact, etc.), each predicted resource is scored (0-100 points), and high-scoring resources (e.g., ≥60 points) are selected as pre-loading candidates.

[0039] S204. Loading Timing Determination: Based on the system's idle state (e.g., detecting browser main thread idleness via requestIdleCallback) and network conditions (e.g., prioritizing loading in 5G environments and only loading core resources in 2G environments), determine whether to trigger preloading.

[0040] S30, Resource Loading and Cache Management (Execution and Feedback), including using concurrency control strategies to limit the number of resources preloaded simultaneously. In a 5G environment, three resources are allowed to be loaded concurrently, while in a 2G environment, only one resource is allowed. Asynchronous loading of resources is implemented through the fetch API, and the loading timeout threshold is set to 1.5 times the current average network latency.

[0041] When calculating resource eviction priority, the priority score weight is set to 60%, the LRU time weight is set to 40%, and low-priority resources that have not been accessed for a long time are prioritized for eviction. The cached resource version is verified by hash comparison. When the resource hash value is detected to be inconsistent with the latest version of the server, the cache is updated and the new version metadata is marked.

[0042] S301, Preload Execution: Selected high-priority resources are loaded asynchronously via link rel="preload" or fetchAPI to avoid blocking the rendering of the current page.

[0043] S302. Cache storage and priority marking: After loading, the resource is stored in CacheStorage and its priority, access time, size and other metadata are marked for subsequent cache management.

[0044] S303, Cache Eviction and Update: When cache space is insufficient, resources are evicted based on a hybrid strategy of "priority + Least Recently Used (LRU)" (e.g., prioritizing the deletion of low-priority resources that have not been accessed for a long time); at the same time, resource versions are periodically checked (e.g., through hash comparison) to ensure that cached resources are consistent with the latest version.

[0045] S304, Data Feedback: Feedback the loading results (such as whether the resource was actually used and the loading time) to the data acquisition module for optimizing the prediction model (such as adjusting the jump probability weight of a certain path).

[0046] To implement the above embodiments, such as Figure 3 As shown, this embodiment also provides a front-end resource dynamic loading and cache optimization device 10 based on user behavior prediction. The device 10 includes a data acquisition and feature modeling module 100, a real-time monitoring and priority filtering module 200, a dynamic preloading trigger control module 300, a cache space hybrid management module 400, and a model feedback optimization module 500.

[0047] The data acquisition and feature modeling module 100 is used to acquire user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlation relationships, and train a user behavior prediction model based on historical data to output resource access probability and priority score. The real-time monitoring and priority filtering module 200 is used to monitor the user's current behavior status, browser idle status and network bandwidth in real time, input the monitoring data into the prediction model to calculate the priority score of the target resource, and filter and preload candidate resources according to the preset threshold. The dynamic preloading trigger control module 300 is used to dynamically adjust the preloading trigger conditions based on the browser idle state detection results and network type, and perform asynchronous preloading operations on the selected candidate resources. The cache space hybrid management module 400 is used to manage the cache space using a hybrid strategy of priority scoring and least recently used algorithm. It dynamically eliminates low-priority resources and updates cache version information based on resource priority, access frequency and resource size. The model feedback optimization module 500 is used to record the actual usage of resources and loading time data, and input the feedback information into the prediction model. The feedback information includes whether the resources are actually used, the number of loading failures, and the loading time. The module dynamically adjusts the model parameter weights to optimize the subsequent prediction results.

[0048] Furthermore, the aforementioned data acquisition and feature modeling module 100 is also used for: Key interactive elements are marked using the v-track-click directive, and user click events, route navigation paths, and page dwell time are collected as behavioral data. Decision tree algorithms or Markov chain models are used to perform feature association analysis on the collected data to generate a dynamic mapping relationship between user behavior and resource access.

[0049] Furthermore, the aforementioned cross-modal timing fusion module 200 is also used for: The browser's main thread is idle by detecting the requestIdleCallback API, and the resource prediction process is triggered when the user has no operation for 3 consecutive seconds. Priority thresholds are dynamically adjusted based on network type. In 5G environments, resources with a priority score greater than 60 are loaded, while in 2G environments, only core resources with a priority score greater than 80 are loaded.

[0050] Furthermore, the aforementioned causal-driven intention inference and decision-making module 300 is also used for: A concurrency control strategy is adopted to limit the number of resources preloaded simultaneously. In a 5G environment, three resources are allowed to be loaded concurrently, while in a 2G environment, it is limited to one resource. Asynchronous loading of resources is achieved through the fetch API, and the loading timeout threshold is set to 1.5 times the current average network latency.

[0051] Furthermore, the aforementioned cache space hybrid management module 400 also includes: Calculate resource eviction priority, set the priority score weight to 60%, the LRU time weight to 40%, and prioritize the eviction of low-priority resources that have not been accessed for a long time. The cached resource version is verified by hash comparison. When the resource hash value is found to be inconsistent with the latest version on the server, the cache is updated and the new version metadata is marked.

[0052] This invention discloses a front-end resource dynamic loading and cache optimization device based on user behavior prediction. By using a resource priority scoring model based on user behavior prediction and a hybrid cache eviction mechanism, it achieves intelligent preloading and dynamic cache management of front-end resources, effectively improving the first screen loading speed, optimizing cache space utilization, and reducing memory usage, thereby achieving a balance between user experience, resource efficiency, and system stability.

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

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

Claims

1. A method for dynamic loading and caching optimization of front-end resources based on user behavior prediction, characterized in that, include: S1. Obtain user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlation relationships, train a user behavior prediction model based on historical data to output resource access probability and priority score. S2 monitors the user's current behavior, browser idle status, and network bandwidth in real time, inputs the monitoring data into the prediction model to calculate the priority score of the target resource, and filters and preloads candidate resources according to preset thresholds. S3 dynamically adjusts the preloading triggering conditions based on the browser idle state detection results and network type, and performs asynchronous preloading operations on the selected candidate resources; S4 employs a hybrid strategy of priority scoring and least recently used algorithm to manage cache space, dynamically evicting low-priority resources and updating cache version information based on resource priority, access frequency, and resource size; S5, record the actual resource usage and loading time data, input the feedback information into the prediction model, wherein the feedback information includes whether the resource is actually used, the number of loading failures, and the loading time, and dynamically adjust the model parameter weights to optimize the subsequent prediction results.

2. The method as described in claim 1, characterized in that, S1 further includes: S11 uses the v-track-click directive to mark key interactive elements and collects user click events, route navigation paths, and page dwell time as behavioral data. S12 uses a decision tree algorithm or Markov chain model to perform feature association analysis on the collected data, generating a dynamic mapping relationship between user behavior and resource access.

3. The method as described in claim 1, characterized in that, The S2 further includes: S21, detect the browser's main thread idle state through the requestIdleCallback API, and trigger the resource prediction process when the user has no operation for 3 consecutive seconds. S22 dynamically adjusts the priority threshold based on network type. In a 5G environment, resources with a priority score greater than 60 are loaded, while in a 2G environment, only core resources with a priority score greater than 80 are loaded.

4. The method as described in claim 1, characterized in that, The S3 further includes: S31 employs a concurrency control strategy to limit the number of resources preloaded simultaneously. In a 5G environment, it allows three resources to be loaded concurrently, while in a 2G environment, it limits them to one resource. S32 uses the fetch API to load resources asynchronously and sets the loading timeout threshold to 1.5 times the current average network latency.

5. The method as described in claim 1, characterized in that, The S4 further includes: S41, calculate the resource eviction priority, set the priority score weight to 60%, the LRU time weight to 40%, and prioritize the eviction of low-priority resources that have not been accessed for a long time. S42 verifies the version of cached resources by comparing hash values. When a resource hash value is found to be inconsistent with the latest version on the server, a cache update is triggered and the new version metadata is marked.

6. A device for dynamic loading and caching optimization of front-end resources based on user behavior prediction, characterized in that, include: The data acquisition and feature modeling module is used to acquire user behavior data, resource access records and environmental parameters, extract path features, resource features and user features and establish correlations, and train a user behavior prediction model based on historical data to output resource access probability and priority score. The real-time monitoring and priority filtering module is used to monitor the user's current behavior status, browser idle status and network bandwidth in real time, input the monitoring data into the prediction model to calculate the priority score of the target resource, and filter and preload candidate resources according to the preset threshold. The dynamic preloading trigger control module is used to dynamically adjust the preloading trigger conditions based on the browser idle state detection results and network type, and perform asynchronous preloading operations on the selected candidate resources. The cache space hybrid management module is used to manage the cache space using a hybrid strategy of priority scoring and least recently used algorithm. It dynamically evicts low-priority resources and updates cache version information based on resource priority, access frequency and resource size. The model feedback optimization module is used to record the actual resource usage and loading time data, and input the feedback information into the prediction model. The feedback information includes whether the resource is actually used, the number of loading failures, and the loading time. The module dynamically adjusts the model parameter weights to optimize the subsequent prediction results.

7. The apparatus as claimed in claim 6, characterized in that, The data acquisition and feature modeling module is also used for: Key interactive elements are marked using the v-track-click directive, and user click events, route navigation paths, and page dwell time are collected as behavioral data. Decision tree algorithms or Markov chain models are used to perform feature association analysis on the collected data to generate a dynamic mapping relationship between user behavior and resource access.

8. The apparatus as claimed in claim 6, characterized in that, The cross-modal timing fusion module is also used for: The browser's main thread is idle by detecting the requestIdleCallback API, and the resource prediction process is triggered when the user has no operation for 3 consecutive seconds. Priority thresholds are dynamically adjusted based on network type. In 5G environments, resources with a priority score greater than 60 are loaded, while in 2G environments, only core resources with a priority score greater than 80 are loaded.

9. The apparatus as claimed in claim 6, characterized in that, The causal-driven intent inference and decision-making module is also used for: A concurrency control strategy is adopted to limit the number of resources preloaded simultaneously. In a 5G environment, three resources are allowed to be loaded concurrently, while in a 2G environment, it is limited to one resource. Asynchronous loading of resources is achieved through the fetch API, and the loading timeout threshold is set to 1.5 times the current average network latency.

10. The apparatus as claimed in claim 6, characterized in that, The cache space hybrid management module also includes: Calculate resource eviction priority, set the priority score weight to 60%, the LRU time weight to 40%, and prioritize the eviction of low-priority resources that have not been accessed for a long time. The cached resource version is verified by hash comparison. When the resource hash value is found to be inconsistent with the latest version on the server, the cache is updated and the new version metadata is marked.

Images