Web application instantaneous loading method and system based on behavior prediction and resource preloading, equipment and medium

Abstract

The invention relates to the field of Web page interaction, and particularly discloses a Web application instantaneous loading method and system based on behavior prediction and resource preloading, equipment and a medium, mainly comprising basic behavior data of a user side in a current acquisition period; establishing a behavior prediction model, taking a link of a current browser interface as a preloading target, predicting a plurality of preloading targets based on the behavior prediction model, and outputting click probabilities of different preloading targets; and sorting the click probabilities from large to small, and selecting the preloading targets corresponding to the first or a plurality of click probabilities sorted in the front for preloading. By means of the method, manual configuration of developers is not depended on, client user behavior data (such as a mouse moving track, a click tendency, a rolling speed, residence time and the like) are collected, the behavior prediction model is used, and a page or a function module which is most likely to be accessed by a user in the next step is locally predicted in real time; and data necessary for executing the module is automatically and asynchronously preloaded.

Description

Technical Field

[0001] This invention relates to the field of web page interaction, and specifically discloses a method, system, device, and medium for instant loading of web applications based on behavior prediction and resource preloading. Background Technology

[0002] Current web applications strive for rich interactivity and complex single-page application (SPA) experiences, but this brings with it issues like first-screen loading time (FSP) and subsequent route switching latency. Existing optimization techniques include: Regular preloading (Preload / Prefetch): Requires developers to manually specify resources to be preloaded, lacking flexibility and easily wasting user bandwidth (preloading resources the user will never access). Code splitting: Divides code into multiple chunks and loads them on demand, but loading still requires network request time, resulting in perceived latency for the user. Lazy loading: Effective for content not on the first screen, but ineffective for upcoming user interactions.

[0003] Existing preloading strategies are passive or static, and cannot be dynamically adjusted intelligently according to the real-time behavioral intentions of the current user, resulting in limited optimization effects or waste of network resources. Summary of the Invention

[0004] The purpose of this invention is to provide a method, system, device, and medium for instant loading of web applications based on behavior prediction and resource preloading, and to solve the following problem: The specific solution is as follows: In a first aspect, the present invention provides a method for instant loading of web applications based on behavior prediction and resource preloading, comprising: Set the collection period and collect basic user behavior data within the current collection period; Establish a behavior prediction model, take the links on the current browser interface as preload targets, predict several preload targets based on the behavior prediction model, and output the click probability of different preload targets; Sort the click probabilities from highest to lowest, and select the first or several click probabilities corresponding to the preloaded targets for preloading.

[0005] Preferred options also include: Different preloading levels can be set. The preloading levels are divided into first preloading level, second preloading level and third preloading level based on the content that needs to be loaded based on the preloading target. The content that needs to be loaded in the first preloading level, second preloading level and third preloading level increases in that order. Each preloading level corresponds to a threshold judgment range. Based on the threshold judgment range where the click probability of the current preloading target falls, the corresponding preloading level is obtained, and the measures corresponding to different preloading levels are executed.

[0006] Preferably, the third preloading level is to trigger full preloading, including loading JS code blocks, CSS modules and API data; The second preloading level triggers partial preloading, including loading CSS modules and JS skeleton screen code: The first preload level is to perform no action.

[0007] Preferably, the establishment of the behavior prediction model includes:

[0008] In the formula, Let i be the click probability of the i-th preloaded target. For the number of clicks on all preloaded targets, The number of clicks for the i-th preloaded target. The time spent in all preloaded targets, The time spent in the i-th preloaded target. The number of times the pulley rolls across all preloaded targets. Let i be the number of times the pulley rolls within the i-th preloaded target. , and As the first weighting coefficient, .

[0009] Preferably, the setting of the data acquisition period includes:

[0010] In the formula, For the collection period, This is the initial default collection period. This refers to the average device usage time of users over several data collection periods. This refers to the user's device usage time during the previous data collection period. This represents the average network bandwidth used by the user terminal over several data collection periods. This represents the average network bandwidth used by the user during the previous data collection period.

[0011] Preferably, the step of selecting the first or several click probabilities corresponding to the preloaded targets for preloading includes: Obtain the current network bandwidth and CPU utilization, establish a selection model, output a selection index based on the network bandwidth and CPU utilization, and set a selection threshold. The desired number of selections is obtained by choosing an index and a selection threshold.

[0012] Preferably, the establishment of the selection model includes:

[0013] In the formula, To select an index, The currently used network bandwidth, Total network bandwidth , This is the second weighting coefficient. , This represents the current CPU utilization rate. Set a first selection threshold and a second selection threshold, when When the value exceeds the second selection threshold, the first preloaded target in the sorted order is selected for loading; when When the second selection threshold is greater than or equal to the first selection threshold, the top three preloaded targets in the sorted order are selected for loading. when If the target is less than or equal to the first selection threshold, select all preloaded targets for loading.

[0014] Secondly, the present invention provides a Web application instant loading system based on behavior prediction and resource preloading, used to execute the aforementioned Web application instant loading method based on behavior prediction and resource preloading, comprising: The data acquisition module is configured to set a collection period and collect basic behavioral data of users within the current collection period; The preloading module is configured to build a behavior prediction model, take the links on the current browser interface as preloading targets, predict several preloading targets based on the behavior prediction model, and output the click probability of different preloading targets; sort the click probabilities from largest to smallest, and select the first or several preloading targets corresponding to the highest click probabilities for preloading.

[0015] Thirdly, the present invention also 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 computer program to implement the above-described method for instant loading of a web application based on behavior prediction and resource preloading.

[0016] Fourthly, a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method for instant loading of a web application based on behavior prediction and resource preloading.

[0017] The technical solution of the present invention has at least the following advantages and beneficial effects: The method provided by this invention mainly includes collecting basic user behavior data within the current collection period; establishing a behavior prediction model, using links on the current browser interface as preloading targets, predicting several preloading targets based on the behavior prediction model, and outputting the click probability of different preloading targets; sorting the click probabilities from largest to smallest, and selecting the first or several preloading targets corresponding to the highest click probabilities for preloading. Through this method, without relying on manual configuration by developers, it collects client-side user behavior data (such as mouse movement trajectory, click tendency, scrolling speed, dwell time, etc.), uses the behavior prediction model to predict the page or functional module that the user is most likely to visit next in real time locally, and automatically and asynchronously preloads the necessary JS, CSS, data, and other resources for executing that module. When the user actually performs an operation, the required resources have already been loaded or only require a very short time to complete rendering, thus achieving an "instant loading" experience. Attached Figure Description

[0018] Figure 1 This is a schematic diagram of the process of the present invention.

[0019] Figure 2 This is a schematic diagram of the system structure of the present invention. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0021] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. The naming or numbering of steps in this application does not imply that the steps in the method flow must be executed in the time / logical order indicated by the naming or numbering. The execution order of named or numbered process steps can be changed according to the desired technical purpose, as long as the same or similar technical effect is achieved. The module division in this application is a logical division; in actual applications, other division methods may be used. For example, multiple modules may be combined or integrated into another system, or some features may be ignored or not executed.

[0022] like Figures 1-2 As shown, this invention provides a method for instant loading of web applications based on behavior prediction and resource preloading, including: S101: Set the collection period and collect basic user behavior data within the current collection period; In this embodiment, a collection period is set, and the current execution decision is updated based on the set collection period to better match the user's usage habits. Secondly, user behavior data includes mouse movement trajectory, click tendency, scrolling speed, dwell time, etc.

[0023] Data collection metrics include: precise mouse movement trajectory coordinates, speed, and acceleration; hovering duration on interactive elements; scrolling speed and direction; dwell time in different areas of the page; and the focus switching order of the keyboard's Tab keys.

[0024] Performance considerations: Debounce and throttle techniques must be used for high-frequency events to ensure that data collection does not affect page performance (such as mousemove events).

[0025] Data standardization: Transforming raw behavioral data (such as pixel coordinates) into resolution-independent feature values. For example, normalizing the distance the mouse travels from the left side of the screen to a button into a percentage of the total width.

[0026] S102: Establish a behavior prediction model, take the links on the current browser interface as preload targets, predict several preload targets based on the behavior prediction model, and output the click probability of different preload targets; Local Prediction Engine: A lightweight (small model file) prediction model embedded in a web application.

[0027] Receive real-time data streams from the behavioral data acquisition layer.

[0028] The model calculates and outputs a probability list to predict the N target pages / modules that the user is most likely to visit next (e.g., 90% probability of going to "Personal Center" and 5% probability of going to "Shopping Cart").

[0029] Intelligent Preload Controller: The preloading strategy is determined based on the probability results given by the prediction engine.

[0030] S103: Sort the click probabilities from largest to smallest, and select the first or several click probabilities corresponding to the preloaded targets for preloading.

[0031] The method provided by this invention mainly includes: collecting basic user behavior data within the current collection period; establishing a behavior prediction model, using links on the current browser interface as preloading targets, predicting several preloading targets based on the behavior prediction model, and outputting the click probability of different preloading targets; sorting the click probabilities from largest to smallest, and selecting the first or several preloading targets corresponding to the highest click probabilities for preloading. Through this method, without relying on manual configuration by developers, it collects client-side user behavior data (such as mouse movement trajectory, click tendency, scrolling speed, dwell time, etc.), uses the behavior prediction model to predict the page or functional module that the user is most likely to visit next in real time locally, and automatically and asynchronously preloads the necessary JS, CSS, data, and other resources for executing that module. When the user actually performs an operation, the required resources have already been loaded or only require a very short time to complete rendering, thus achieving an "instant loading" experience.

[0032] Intelligence and Adaptability: From "manual configuration" to "automatic prediction", the system will learn more and more about the user's habits as it is used, and the predictions will become more accurate.

[0033] Ultimate user experience: It greatly eliminates the waiting time for page switching and function opening, and realizes an instant interactive experience of "what you think is what you get".

[0034] Efficient resource utilization: Compared to blindly preloading all possible paths, this solution is based on probabilistic decision-making, which significantly reduces unnecessary network requests and bandwidth waste, making it more friendly to users' mobile data traffic.

[0035] Privacy and security: All behavioral data collection, analysis, and prediction are completed locally in the user's browser, without uploading to a server, thus protecting user privacy.

[0036] High versatility: This solution can be packaged into a standalone SDK or Webpack plugin, making it easy to integrate into any existing SPA (React, Vue, Angular, etc.) project.

[0037] In one implementation, it also includes: Different preloading levels can be set. The preloading levels are divided into first preloading level, second preloading level and third preloading level based on the content that needs to be loaded based on the preloading target. The content that needs to be loaded in the first preloading level, second preloading level and third preloading level increases in that order. Each preloading level corresponds to a threshold judgment range. Based on the threshold judgment range where the click probability of the current preloading target is located, the corresponding preloading level is obtained, and the measures corresponding to different preloading levels are executed.

[0038] For example, the threshold for the third preloading level is a click probability greater than 90%, the threshold for the second preloading level is a click probability greater than 50% and less than or equal to 90%, and the threshold for the first preloading level is a click probability less than or equal to 50%. If the current click probability is 78%, then the second preloading level's loading content will be executed on the current preloading target.

[0039] Specifically, the third preloading level triggers full preloading, including loading JS code blocks, CSS modules, and API data; The second preloading level triggers partial preloading, including loading CSS modules and JS skeleton screen code: The first preload level is to perform no action.

[0040] In one embodiment, establishing the behavior prediction model includes:

[0041] In the formula, Let i be the click probability of the i-th preloaded target. For the number of clicks on all preloaded targets, The number of clicks for the i-th preloaded target. The time spent in all preloaded targets, The time spent in the i-th preloaded target. The number of times the pulley rolls across all preloaded targets. Let i be the number of times the pulley rolls within the i-th preloaded target. , and As the first weighting coefficient, .

[0042] By using the user's usage data mentioned above, we can make probabilistic predictions about the current preloading target to obtain more accurate results, and then perform preloading accordingly. , and The settings can be adjusted according to specific circumstances; this embodiment does not impose any restrictions.

[0043] In one embodiment, setting the data collection period includes:

[0044] In the formula, For the collection period, This is the initial default collection period. This refers to the average device usage time of users over several data collection periods. This refers to the user's device usage time during the previous data collection period. This represents the average network bandwidth used by the user terminal over several data collection periods. This represents the average network bandwidth used by the user during the previous data collection period.

[0045] By setting a floating collection period, we can make the collection period as reasonable as possible, avoid wasting the device's computing power, and at the same time, minimize the omission of user data.

[0046] In one embodiment, the step of selecting the first or several click probabilities corresponding to the preloaded targets for preloading includes: Obtain the current network bandwidth and CPU utilization, establish a selection model, output a selection index based on the network bandwidth and CPU utilization, and set a selection threshold. The desired number of selections is obtained by choosing an index and a selection threshold.

[0047] Preferably, the establishment of the selection model includes:

[0048] In the formula, To select an index, The currently used network bandwidth, Total network bandwidth , This is the second weighting coefficient. , This represents the current CPU utilization rate. Set a first selection threshold and a second selection threshold, when When the value exceeds the second selection threshold, the first preloaded target in the sorted order is selected for loading; when When the second selection threshold is greater than or equal to the first selection threshold, the top three preloaded targets in the sorted order are selected for loading. when If the target is less than or equal to the first selection threshold, select all preloaded targets for loading.

[0049] in, It can be set to 0.8. It can be set to 0.2, taking into account bandwidth and CPU load, to influence the execution of preloading, making preloading more reasonable and avoiding affecting the user experience due to preloading. The first selection threshold is less than the second selection threshold.

[0050] Secondly, the present invention provides a Web application instant loading system based on behavior prediction and resource preloading, used to execute the aforementioned Web application instant loading method based on behavior prediction and resource preloading, comprising: The data acquisition module is configured to set a collection period and collect basic behavioral data of users within the current collection period; The preloading module is configured to build a behavior prediction model, take the links on the current browser interface as preloading targets, predict several preloading targets based on the behavior prediction model, and output the click probability of different preloading targets; sort the click probabilities from largest to smallest, and select the first or several preloading targets corresponding to the highest click probabilities for preloading.

[0051] It also includes a Data Collection Layer: which listens to user interaction events such as mousemove, click, hover, scroll, and focus.

[0052] Build-time integration: This could be a Webpack / Rollup / Vite plugin. During project build, this plugin analyzes code split points (import()) and automatically generates a "resource mapping table" that tells the preload controller "which JS chunk corresponds to page A".

[0053] Runtime integration: A lightweight SDK (JavaScript library) is provided. This SDK includes data acquisition, model loading, prediction, and resource loading functions, which developers only need to import and initialize.

[0054] Degradation Solution: Design an elegant degradation mechanism. If the user's browser does not support certain features or the model fails to load, the system should be able to silently switch back to the traditional lazy loading mode without affecting core functionality.

[0055] Secondly, to make the system more intelligent, a mechanism can be designed to allow the model deployed on the client to perform incremental learning or periodically retrieve updated models from the cloud.

[0056] Anonymous data aggregation: After obtaining user consent, fully anonymized and desensitized behavioral patterns and final results (whether the user actually clicked) are encrypted and sent to the server.

[0057] Cloud-based model retraining: The server periodically retrains the model using massive amounts of anonymized data to generate a new, more accurate version of the model.

[0058] Model differential update: The differential increment of model parameters (instead of the entire model) is pushed to the client, and the local model on the client is merged and updated, reducing network transmission volume.

[0059] Furthermore, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0060] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. This computer software product, stored in a storage medium, includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0061] The above are merely preferred embodiments of the present invention and are not intended to limit the present invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for instant loading of a web application based on behavior prediction and resource preloading, characterized in that, The method comprises the following steps: setting a collection period, and collecting basic behavior data of the user terminal in the current collection period; establishing a behavior prediction model, taking links in the current browser interface as preloading targets, predicting a plurality of preloading targets based on the behavior prediction model, and outputting click probabilities of different preloading targets; sorting the click probabilities from large to small, and selecting the preloading targets corresponding to the first or a plurality of click probabilities in the order to perform preloading.

2. The method of claim 1, wherein the method further comprises: The method further comprises the following steps: setting different preloading levels, including first, second, and third preloading levels based on the content required to be loaded by the preloading targets, and the content required to be loaded by the first, second, and third preloading levels increases in turn; setting a threshold judgment range for each preloading level, obtaining the corresponding preloading level based on the threshold judgment range in which the click probability of the current preloading target is located, and executing measures corresponding to different preloading levels based on the preloading level in which the click probability of the current preloading target is located. 3.The web application instant loading method based on behavior prediction and resource preloading according to claim 2, characterized in that, The third preloading level triggers full preloading, including loading JS code blocks, CSS modules, and API data; The second preloading level triggers partial preloading, including loading CSS modules and JS skeleton screen code: The first preloading level does not perform any action.

4. The method of claim 3, wherein the method further comprises: The step of establishing a behavior prediction model comprises the following steps: wherein, is the click probability of the i-th preload target, is the number of clicks of all preload targets, is the number of clicks of the i-th preload target, is the time spent within all preload targets, is the time spent within the i-th preload target, is the number of times the wheel is scrolled within all preload targets, is the number of times the wheel is scrolled within the i-th preload target, , and is the first weight coefficient, .

5. The method of claim 3, wherein the method further comprises: The step of setting a collection period comprises the following steps: In the formula, is a collection period, is an initial default collection period, is an average device usage duration of the user end in a plurality of collection periods, is a device usage duration of the user end in a last collection period, is an average network bandwidth occupied by the user end in a plurality of collection periods, is an average network bandwidth occupied by the user end in a last collection period.

6. The method of claim 5, wherein the method further comprises: The step of selecting the preloading targets corresponding to the first or a plurality of click probabilities in the order to perform preloading comprises the following steps: obtaining the current network bandwidth and CPU occupancy, establishing a selection model, outputting a selection index based on the network bandwidth and CPU occupancy through the selection model, and setting a selection threshold; obtaining the number to be selected through the selection index and the selection threshold.

7. The method of claim 5, wherein the method further comprises: The step of establishing a selection model comprises the following steps: In the formula, is a selected index, is a current occupied network bandwidth, is a total network bandwidth, , is a second weight coefficient, , is a current CPU occupancy rate; The first selection threshold and the second selection threshold are set, and when When the first selection threshold is greater than the second selection threshold, the first preloaded target in the front of the sequence is selected for loading. When When the second selected threshold is greater than the first selected threshold, the three preloaded targets in the front are selected for loading. When All preloaded targets are selected for loading when less than or equal to a first selected threshold.

8. A web application instant loading system based on behavior prediction and resource preloading, characterized in that, The method for performing the method for instant loading of a Web application based on behavior prediction and resource preloading according to any one of claims 1-7 comprises the following steps: a data collection module configured to set a collection period and collect basic behavior data of the user terminal in the current collection period; a preloading module configured to establish a behavior prediction model, take links in the current browser interface as preloading targets, predict a plurality of preloading targets based on the behavior prediction model, output click probabilities of different preloading targets, sort the click probabilities from large to small, and select the preloading targets corresponding to the first or a plurality of click probabilities in the order to perform preloading.

9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the computer program to implement the method for instant loading of a Web application based on behavior prediction and resource preloading according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer program is stored on the computer readable storage medium, and the computer program is executed by the processor to implement the method for instant loading of a Web application based on behavior prediction and resource preloading according to any one of claims 1-7.

Images