Intelligent resource loading method and device and storage medium

Abstract

The invention relates to the field of front-end page display, and discloses an intelligent resource loading method and device and a storage medium, and the method comprises the following steps: obtaining user browsing behavior data; inputting the user browsing behavior data into a pre-trained machine learning model to obtain a predicted browsing behavior of the user; resource loading is carried out based on the browsing behavior predicted by the user, the preloading strategy, the delay loading strategy and the condition loading strategy; after the resources are loaded, the resources are cached, and according to the real-time state of the user, the same resources are loaded by quickly applying the cache during the next browsing. According to the method, the user experience can be improved, the resource utilization is optimized, the page performance is improved, the flexibility is enhanced, and offline browsing and intelligent cache management are supported.

Description

Technical Field

[0001] The present invention relates to the field of front-end page display, and in particular to an intelligent resource loading method. Background Art

[0002] During promotional events, holidays, etc., e-commerce websites will have a large number of users visiting at the same time, resulting in increased server load and slower page loading; product pages usually contain a large number of high-resolution images and videos, and the loading of these resources will significantly affect page performance; or when browsing social and content sharing platforms, they contain a large number of user-uploaded pictures, videos, and articles that need to be loaded and displayed efficiently.

[0003] Users want to get the latest updates and content in real time, so loading speed is crucial. If there is a solution that can reduce website loading time, provide a smooth browsing experience, and reduce bandwidth, it can provide users with a good user experience and reduce traffic costs.

[0004] The scheme adopted in the prior art is as follows:

[0005] Solution 1: Resource preloading, preloading resources that may be used in subsequent pages. Preloading is done by using HTML tags or JavaScript. Its disadvantages include:

[0006] Resource waste: If the prediction is inaccurate, unnecessary resources will be loaded, wasting bandwidth and memory;

[0007] Low accuracy: It is difficult to accurately predict the user’s next action, and preloaded resources may not be used.

[0008] Solution 2: Dynamic loading, loading JavaScript modules and resources on demand. Dynamically load the code for specific interactions or page parts, using ES6's import() syntax or the code splitting function of packaging tools such as Webpack. Its disadvantages include:

[0009] Complex configuration: Additional configuration and packaging tool support is required, which may increase implementation complexity.

[0010] Loading delay: Loading starts after the user triggers the loading event, which may cause a short loading delay. Summary of the invention

[0011] The purpose of the present invention is to propose an intelligent resource loading method to solve the technical problem in the prior art that both timeliness and accuracy cannot be taken into account when loading resources.

[0012] An intelligent resource loading method comprises the following steps:

[0013] S1. Obtain user browsing behavior data;

[0014] S2. Input the user browsing behavior data into the pre-trained machine learning model to obtain the user's predicted browsing behavior;

[0015] S3, resource loading based on user predicted browsing behavior and delayed loading strategy and conditional loading strategy;

[0016] S4. After the resource is loaded, it is cached, and based on the user's real-time status, the cache is quickly used to load the same resource during the next browsing.

[0017] A storage medium stores instructions and data for implementing an intelligent resource loading method.

[0018] An intelligent resource loading device comprises: a processor and the storage medium; the processor loads and executes instructions and data in the storage medium to implement an intelligent resource loading method.

[0019] The beneficial effects provided by the present invention are: improving user experience: improving user satisfaction by reducing page loading time and providing a smooth browsing experience; optimizing resource utilization: reducing unnecessary resource loading through intelligent prediction and dynamic adjustment, saving bandwidth and memory; improving page performance: on-demand loading and delayed loading technology reduce initial page loading time and improve page response speed; enhancing flexibility: dynamically adjusting loading strategies according to user network conditions and device performance to adapt to different user environments; offline support: providing offline browsing capabilities through cache management and Service Worker, improving application reliability and user experience; intelligent cache management: through intelligent cache strategies and dynamic network request interception mechanisms, the present invention significantly improves the efficiency of resource loading and the reliability of the system. In addition, through reasonable cache management, server load and bandwidth consumption can be further reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 It is a schematic flow chart of the method of the present invention;

[0021] Figure 2 It is a working schematic diagram of the hardware device of the present invention. DETAILED DESCRIPTION

[0022] To make the objectives, technical solutions and advantages of the present invention more clear, the embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0023] Before formally describing the present invention, the scheme of the present invention is first generally described for easy understanding.

[0024] Please refer to Figure 1 , Figure 1It is a schematic flow diagram of the method of the present invention;

[0025] The present invention provides an intelligent resource loading method, comprising the following steps:

[0026] S1. Obtain user browsing behavior data;

[0027] It should be noted that the user browsing behavior data in step S1 includes: page access sequence, click behavior and scrolling behavior.

[0028] As an embodiment, the present invention uses a unique data collection mechanism to collect user browsing behavior data in real time, including page access sequence, click behavior, scrolling behavior, etc. These data are integrated into a unified data processing platform. The platform uses front-end embedding technology to record every click, scroll and navigation operation of the user on the page, and uploads it to the background in real time for processing and analysis.

[0029] It should be noted that the unique data collection mechanism in the present invention refers to:

[0030] Front-end tracking technology: embed tracking codes in key locations and interactive elements of the page to collect users' clicks, scrolling, and navigation behaviors in real time.

[0031] Real-time data transmission: User behavior data is instantly uploaded to the server for processing via WebSocket or other real-time communication technologies.

[0032] S2. Input the user browsing behavior data into the pre-trained machine learning model to obtain the user's predicted browsing behavior;

[0033] It should be noted that the machine learning model in step S2 adopts a decision tree, a random forest or a neural network.

[0034] As an embodiment, the present invention designs a machine learning model specifically for resource loading optimization. When the model is implemented, algorithms such as decision trees, random forests or neural networks can be used. The machine learning model in the present invention predicts the user's next operation by analyzing the user's historical behavior data.

[0035] The model training process includes steps such as data preprocessing, feature extraction and model training, and the model is optimized and verified in combination with actual data. In order to reduce technical costs, the present invention optimizes the model complexity and adopts a lightweight model to balance the demand for computing resources and the accuracy of prediction. At the same time, by using a third-party machine learning platform, the cost of self-built infrastructure and maintenance can be reduced.

[0036] S3, loading resources based on the user's predicted browsing behavior and preloading strategy, delayed loading strategy, and conditional loading strategy;

[0037] It should be noted that the preloading strategy in step S3 specifically refers to: loading the resources corresponding to the predicted browsing behavior of the user in advance so as to display them quickly when the user browses.

[0038] Specifically, the present invention proposes a dynamic preloading strategy based on the prediction results of the machine learning model. Unlike the existing static preloading, the preloading strategy of the present invention can be dynamically adjusted according to the user's real-time behavior. In specific implementation, the system will continue to run the prediction model in the background. When the user's behavior is identified as about to access certain resources, the system will load these resources in advance to ensure that the user can display them quickly when accessing.

[0039] It should be noted that the delayed loading strategy in step S3 includes: lazy loading.

[0040] The lazy loading specifically means that the corresponding resources are loaded only when the preloaded resources enter the user's window.

[0041] As an embodiment, the present invention uses Intersection Observer API to implement an efficient lazy loading mechanism. Only when the page element enters the viewport, the corresponding resource is loaded, which reduces the initial page loading time and reduces bandwidth consumption. By adopting existing APIs and tools to reduce development complexity, and implementing and gradually optimizing the lazy loading algorithm in stages, costs can be effectively controlled.

[0042] It should be noted that preloading and lazy loading are not contradictory in actual applications. In fact, they are two strategies that can be used complementary to optimize resource loading in different scenarios.

[0043] As an example, the following are their usage strategies and combinations:

[0044] Preloading is based on predicting user behavior and loading resources before users actually access them. This method is suitable for the following scenarios:

[0045] Key assets: such as content above the fold or the next page a user is likely to visit.

[0046] High-priority resources: such as the main functional modules of the website, which users are likely to access in a short period of time.

[0047] Lazy loading means loading resources only when they enter the viewport. This method is suitable for the following scenarios:

[0048] Non-critical resources: such as images or secondary functional modules further down the page.

[0049] Uncertainly accessed resources: For example, the middle or end of a long page, where users may not necessarily scroll to.

[0050] The strategies used in combination in the present invention are as follows:

[0051] In practical applications, preloading and lazy loading can be used in combination to achieve optimal performance optimization through intelligent resource loading algorithms. The specific strategies are as follows:

[0052] Initial loading: Use lazy loading to reduce the initial page loading time and increase the first screen loading speed.

[0053] Behavior prediction: Based on user behavior prediction, preload key resources that users are likely to access to ensure a smooth user experience.

[0054] Hierarchical loading: preload and lazy load resources in different levels according to their priority and importance:

[0055] High-priority resources: Use preloading (such as pages to be visited, important interactive modules).

[0056] Medium and low priority resources: Use lazy loading (e.g. the lower half of a long page, ancillary content).

[0057] The policy priorities in the actual process are:

[0058] In practice, you can select strategies based on the following priorities:

[0059] Accurate prediction of user behavior: If the machine learning model predicts user behavior accurately (the prediction rate reaches the preset value), the preloading strategy can be used first to load the key resources that the user is about to access in advance.

[0060] Inaccurate or unpredictable user behavior prediction: For resources that you are not sure whether users will access, use a lazy loading strategy to ensure that these resources are loaded only when needed to avoid wasting bandwidth.

[0061] On-demand loading specifically means: monitoring the user's mouse and click behavior, predicting and loading the resources that the user will need in real time.

[0062] As an embodiment, the present invention proposes a new on-demand loading method, which combines user scrolling and interactive behaviors to predict and load the resources that the user will need in real time. By monitoring user scrolling and clicking events, when the user is about to scroll to certain areas or click certain buttons, the corresponding resources are loaded in advance, thereby improving response speed and resource utilization.

[0063] It should be noted that traditional on-demand loading refers to: based on the user's explicit operation, such as clicking a button or scrolling to a specific area, resource loading is triggered. This method relies on direct user interaction and has a relatively slow response speed.

[0064] The new on-demand loading in the present invention refers to: based on the prediction results of the machine learning model, the resources that the user is about to need are loaded in real time and dynamically. By monitoring the user's scrolling and clicking events, the corresponding resources are loaded in advance when the user is about to scroll to certain areas or click certain buttons, thereby improving the response speed and resource utilization. The new on-demand loading method combines user behavior prediction, can load resources more accurately and in advance, and improves the system's response speed and user experience.

[0065] It should be noted that the conditional loading strategy specifically includes: resource loading through two means: network status detection and device performance detection.

[0066] As an embodiment, the network status detection specifically refers to: detecting the user's network status in real time through the Network Information API, and using the detection result as an important basis for resource loading strategy. Obtaining the network type and download speed through the navigator.connection object, and adjusting the priority and quantity of resource loading.

[0067] As an embodiment, device performance detection specifically refers to: obtaining the performance parameters of the user's device (such as memory, processor, etc.) in real time through a unique device performance detection mechanism, using JavaScript's Performance API to obtain device information, and dynamically adjusting resource loading strategies to ensure optimal performance in various environments.

[0068] S4. After the resource is loaded, it is cached, and based on the user's real-time status, the cache is quickly used to load the same resource during the next browsing.

[0069] As an embodiment, the present invention uses Service Worker to implement an efficient cache management mechanism, defines a cache strategy in Service Worker, caches commonly used resources locally, and preferentially loads resources from the cache when the user visits again.

[0070] On the other hand, by intercepting network requests through Service Worker and combining the user's real-time status, it is dynamically decided whether to load or re-request resources from the cache. The fetch event is intercepted in Service Worker, and it is decided whether to read resources from the cache based on the network conditions and cache status.

[0071] Finally, the present invention designs an offline support mechanism, which provides users with stable offline access capabilities through Service Worker and cache management. Necessary resources are pre-cached in Service Worker, and these resources can still be provided when the user is offline, ensuring the normal use of basic application functions.

[0072] See also Figure 2 , Figure 2 It is a schematic diagram of the working of the hardware device of an embodiment of the present invention, and the hardware device specifically includes: an intelligent resource loading device 401, a processor 402 and a storage medium 403.

[0073] An intelligent resource loading device 401: The intelligent resource loading device 401 implements the intelligent resource loading method.

[0074] Processor 402: The processor 402 loads and executes instructions and data in the storage medium 403 to implement the intelligent resource loading method.

[0075] Storage medium 403: The storage medium 403 stores instructions and data; the storage medium 403 is used to implement the intelligent resource loading method.

[0076] The beneficial effects of the present invention are: improving user experience: improving user satisfaction by reducing page loading time and providing a smooth browsing experience; optimizing resource utilization: reducing unnecessary resource loading through intelligent prediction and dynamic adjustment, saving bandwidth and memory; improving page performance: on-demand loading and delayed loading technology reduce initial page loading time and improve page response speed; enhancing flexibility: dynamically adjusting loading strategies according to user network conditions and device performance to adapt to different user environments; offline support: providing offline browsing capabilities through cache management and Service Worker, improving application reliability and user experience; intelligent cache management: through intelligent cache strategies and dynamic network request interception mechanisms, the present invention significantly improves the efficiency of resource loading and the reliability of the system. In addition, through reasonable cache management, server load and bandwidth consumption can be further reduced.

[0077] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. An intelligent resource loading method, characterized in that: The following steps are involved: S1. Obtain user browsing behavior data; S2. Input the user browsing behavior data into the pre-trained machine learning model to obtain the user's predicted browsing behavior; S3, loading resources based on the user's predicted browsing behavior and preloading strategy, delayed loading strategy, and conditional loading strategy; S4. After the resource is loaded, it is cached, and based on the user's real-time status, the cache is quickly used to load the same resource during the next browsing.

2. The intelligent resource loading method according to claim 1, characterized in that: The user browsing behavior data in step S1 includes: page access sequence, click behavior and scrolling behavior.

3. The intelligent resource loading method according to claim 1, characterized in that: The machine learning model in step S2 adopts a decision tree, a random forest or a neural network.

4. The intelligent resource loading method according to claim 1, characterized in that: The preloading strategy in step S3 specifically refers to: loading resources corresponding to the predicted browsing behavior of the user in advance so as to display them quickly when the user browses.

5. The intelligent resource loading method according to claim 1, characterized in that: The delayed loading strategy described in step S3 adopts lazy loading.

6. The energy resource loading method according to claim 5, characterized in that: The lazy loading specifically means that the corresponding resources are loaded only when the corresponding resources enter the user's window.

7. The intelligent resource loading method according to claim 5, characterized in that: The preloading strategy and lazy loading strategy are used in combination, as follows: when the user browsing behavior prediction result based on the machine learning model reaches the preset probability, the preloading strategy is adopted, otherwise the lazy loading strategy is adopted.

8. The intelligent resource loading method according to claim 1, characterized in that: The conditional loading strategy specifically includes: resource loading through two means: network status detection and device performance detection.

9. A storage medium, characterized in that: The storage medium stores instructions and data for implementing an intelligent resource loading method as described in any one of claims 1 to 8.

10. An intelligent resource loading device, characterized in that: include: Processor and storage medium; the processor loads and executes instructions and data in the storage medium to implement an intelligent resource loading method as described in any one of claims 1 to 8.

Images