Front-end resource dynamic preloading method, system, equipment and medium

Abstract

The invention provides a front-end resource dynamic preloading method, system and device and a medium, and belongs to the technical field of front-end engineering. The method comprises the following steps: constructing and training a user behavior prediction model based on a Transform time sequence model architecture, and deploying the user behavior prediction model to a browser side after compression processing; the method comprises the following steps: acquiring behavior data of a user by monitoring a user interaction event, constructing a time sequence operation sequence, and collecting network information and equipment performance information; inputting the time sequence operation sequence into the model, outputting probability distribution of the next operation, and determining related resources; based on the probability distribution, the resource type and the network information, calculating the priority of the resource, and generating a resource priority queue; according to the network information and the equipment performance information, determining a pre-loaded resource type, and adjusting a resource priority queue to generate a pre-loading strategy; a cache rule is defined, a cache configuration file is generated, and a CDN cache is used for preloading resources; and executing the preloading strategy, and carrying out rollback processing after loading fails.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of front-end engineering, and more particularly to a front-end resource dynamic preloading method, system, device and medium. BACKGROUND

[0002] With the iterative development of Internet technology, single-page applications (SPAs) and complex Web applications have become the mainstream form of front-end architecture. Such applications dynamically render page content through JavaScript, enabling an interactive experience close to that of native applications, but also face performance bottlenecks such as long first-screen loading time and user interaction delay. The current industry widely adopted optimization methods such as code splitting, lazy loading, and static caching strategies can partially alleviate the loading pressure, but still have multi-dimensional technical defects in actual application.

[0003] First, the dynamic disconnection between preloading logic and user behavior constitutes the primary technical pain point. Existing solutions mostly rely on fixed rules or static configurations such as viewport resource loading and route level preloading, lacking real-time awareness of user operation patterns. For example, traditional lazy loading only triggers image loading when the user scrolls to a specific area, unable to predict potential click paths; static caching strategies are based on "popular resources" pre-set loading lists, making it difficult to adapt to different users' personalized operation habits. This "rule solidification" preloading mode often results in key resources not being loaded in advance, and unnecessary resources being loaded redundantly, directly affecting the smoothness of interaction.

[0004] Second, the lack of device and network environment adaptation capability further exacerbates performance loss. The preloading mechanism under fixed rules cannot obtain real-time environment parameters such as device memory capacity and network bandwidth, causing a disconnection between resource scheduling and actual environment. In low-end devices or weak network scenarios, blindly preloading a large number of images or non-core scripts can significantly increase memory usage and bandwidth consumption, even causing page lag or application crashes; traditional strategies lack the ability to dynamically adjust preloading granularity, making resource waste problems continue to worsen in complex environments.

[0005] Third, the inability to respond to content updates and behavior mutations is a inherent defect of static strategies. For e-commerce platforms, information websites and other applications with high-frequency content updates, static caching strategies cannot update content in real time, resulting in users still needing to load the latest resources when accessing, increasing interaction delay. At the same time, when users exhibit sudden high-frequency clicks, irregular path jumps and other behavior mutations, traditional solutions lack real-time strategy adjustment mechanisms, making preloaded resources and actual needs severely disconnected, making it difficult to ensure the smoothness of the interactive experience. SUMMARY

[0006] To solve the above problems, the application aims to provide a front-end resource dynamic preloading method, system, device and medium, which realizes intelligent prediction of user behavior through a lightweight Transformer model, dynamically adjusts the preloading strategy in combination with real-time environment perception, and adopts intelligent cache management and failure fallback mechanism to significantly improve the front-end resource loading efficiency and user experience consistency while ensuring system stability.

[0007] To achieve the above-mentioned purposes, the application realizes the above-mentioned purposes through the following technical solutions: In a first aspect, the application provides a front-end resource dynamic preloading method, comprising: A user behavior prediction model is constructed and trained based on a Transformer time series model architecture, the user behavior prediction model is compressed, a lightweight prediction model is generated and deployed to the browser end; By listening to user interaction events, user behavior data is obtained, user operation sequences are generated, time series operation sequences are constructed, and network information and device performance information are collected in real time; The time series operation sequence is input into the lightweight prediction model, the probability distribution of the next operation of the user is output, and the related resources are determined; Based on the probability distribution, resource type and network information, the priority of the resource is calculated, and a resource priority queue is generated; According to the network information and device performance information, the resource type to be preloaded is determined, the resource priority queue is adjusted to generate a preloading strategy; Based on the preloading strategy, cache rules are defined and a cache configuration file is generated, preloaded resources are cached by CDN, and device cache is optimized; The preloading strategy is executed, and fallback processing is performed after loading failure.

[0008] In an optional embodiment, the user behavior prediction model is constructed and trained based on the Transformer time series model architecture, the user behavior prediction model is compressed, a lightweight prediction model is generated and deployed to the browser end, comprising: A user behavior prediction model is constructed using a Transformer time series model architecture; After preprocessing, the historical user behavior data is generated into a time series operation sequence; The time series operation sequence is input into the user behavior prediction model for model training; The model weight of the user behavior prediction model is converted from 32-bit floating-point data to 8-bit integer data, the neurons with weight values lower than a preset threshold are removed, and a lightweight prediction model is generated; Convert the light prediction model into a web format using TensorFlow.jsConverter, deploy it to a CDN, split the light prediction model into model shards according to the routing module, and load the model shards in the background using WebWorker.

[0009] In an optional embodiment, the user's behavior data is obtained by monitoring user interaction events, the user operation sequence is generated, the timing operation sequence is constructed, and the network information and device performance information are collected in real time, including: Listen to user click events and mouse hover events through JavaScript, record the XPath or CSS selector of the clicked element and the hover duration; According to the hover duration, the user behavior is identified, and the user's behavior data is obtained; Based on the user's behavior data, the user operation sequence, user ID and IP address are extracted; The user operation sequence is converted into a time window, the operation frequency and path jump mode are counted, the user ID and IP address are hashed, and the timing operation sequence is generated; Get the network's downlink bandwidth through the Navigator API to identify the network status; wherein, the network status includes 4G / 5G, 3G, 2G and offline; Monitor the device's memory usage through the Chrome Performance API, and determine the current device running memory.

[0010] In an optional embodiment, the priority of the resource is calculated based on the probability distribution, resource type and network information, and the resource priority queue is generated, including: Based on the probability distribution, the prediction probability of each resource and the corresponding resource type are obtained; the resource type includes routing components, pictures, non-critical scripts and API data; Calculate the priority score of each resource using the formula F=G×Q×W; wherein, G is the prediction probability, Q is the resource weight corresponding to the resource type, and W is the network coefficient corresponding to the network status; Sort the priority scores of each resource in descending order, and generate the resource priority queue based on the sorting result.

[0011] In an optional embodiment, the resource type for preloading is determined according to the network information and device performance information, the resource priority queue is adjusted to generate a preloading strategy, including: Get the network status and the current device running memory; If the network status is 4G / 5G and the current device running memory is greater than 2GB, the resource types for preloading are routing components, pictures and API data; If the network state is 3G, and the current device running memory is greater than 1GB and less than 2GB, the preloaded resource type is API data; If the network state is 2G, and the current device running memory is less than 1GB, the preloading is suspended. The determined preloaded resource type is filtered out from the resource priority queue to generate a preloading strategy.

[0012] In an optional embodiment, the preloading strategy is used to define a cache rule and generate a cache configuration file, the preloaded resources are cached by a CDN, and the device cache is optimized, including: The resource loading order in the preloading strategy is used to determine a resource cache order, and the resource cache order is adjusted according to a preset resource cache priority as a cache rule and a cache configuration file are generated; wherein the cache priority of the routing component > the cache priority of the API data > the cache priority of the picture > the cache priority of the non-key script; The cache configuration file is stored to the CDN, and the cache rule is injected and managed by Workbox according to the cache configuration file to cache the preloaded resources; The LRU-K algorithm is used to record the timestamps of the last K accesses of each cache item, and when the cache capacity reaches the upper limit and needs to be discarded, the cache item with the longest access interval among the last K accesses is selected and deleted by the ServiceWorker.

[0013] In an optional embodiment, the preloading strategy is executed, and a fallback process is performed after a loading failure, including: The preloading strategy is executed, if the current preloaded resource is a static resource, the static resource is preloaded by using the prefetch attribute of the link tag; if the current preloaded resource is dynamic API data, the priority attribute is set by using the fetch API to adjust the request priority to avoid blocking the first screen loading; If the resource preloading fails, the resource is marked as unpreloadable, and the resource is not preloaded again within 24 hours.

[0014] In a second aspect, the embodiments of the present application also provide a front-end resource dynamic preloading system, including: A model construction and deployment module is configured to construct and train a user behavior prediction model based on a Transformer time series model architecture, compress the user behavior prediction model, generate a light prediction model, and deploy the light prediction model to a browser end; A data acquisition and preprocessing module is configured to acquire user behavior data by listening to user interaction events, generate user operation sequences, construct time series operation sequences, and acquire network information and device performance information in real time; a prediction module configured to input a time sequence operation sequence into a light prediction model, output a probability distribution of a next operation of a user, and determine related resources; a priority queue generation module configured to calculate a priority of the resources based on the probability distribution, resource types, and network information, and generate a resource priority queue; a preloading strategy generation module configured to determine a preloaded resource type according to the network information and device performance information, adjust the resource priority queue, and generate a preloading strategy; a resource caching module configured to define a caching rule based on the preloading strategy, generate a caching configuration file, cache the preloaded resources by using a CDN, and optimize device caching; a preloading module configured to execute the preloading strategy and perform fallback processing after a loading failure.

[0015] In a third aspect, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the front-end resource dynamic preloading method according to any one of the above aspects when executing the program.

[0016] In a fourth aspect, a storage medium is provided, which stores a computer program, and the computer program is executable on a processor to implement the steps of the front-end resource dynamic preloading method according to any one of the above aspects.

[0017] As can be seen from the above technical solutions, the present application has the following advantages: In the front-end resource dynamic preloading method provided by the present application, a light Transformer time sequence model is constructed and deployed to a browser end to realize real-time learning and behavior prediction of a user operation sequence, and a self-adaptive resource priority scheduling mechanism is formed in combination with dynamically collected network status and device performance data. The method generates a priority queue based on resource types and prediction probabilities, dynamically adjusts a preloading strategy according to different network environments and device memories, optimizes cache management by using a CDN cache and an LRU-K algorithm, and executes intelligent fallback when a loading failure occurs. The whole solution effectively solves problems such as insufficient user behavior adaptation, lack of device network environment sensing, and lag in response to content updates and behavior mutations in the traditional preloading strategy, realizes intelligent prediction and accurate loading of front-end resources, reduces invalid resource requests, improves resource utilization efficiency, guarantees smooth running of front-end applications under complex network and device conditions, and optimizes user interaction experience.

[0018] The application builds a user behavior prediction model based on the Transformer architecture, can efficiently capture the timing operation mode, significantly improve the prediction accuracy of the next user behavior, and thus accurately pre-load key resources (such as routing components and API data), reduce invalid resource loading, and optimize bandwidth utilization.

[0019] The application realizes low-overhead deployment on the browser side through model compression and WebWorker fragmentation loading technology, avoids blocking the main thread, combines device performance to dynamically adjust the pre-loading strategy, and ensures smooth operation of low-performance devices.

[0020] The application dynamically selects the pre-loading resource type by real-time sensing of network status and bandwidth, adjusts the resource priority through network coefficient, and ensures the consistency of loading efficiency and user experience under different network conditions.

[0021] The application uses LRU-K algorithm and differential cache priority, combines CDN and ServiceWorker to manage cache rules, improves the hit rate of high-priority resources, reduces repeated downloads, and speeds up secondary access to pages.

[0022] The application disables retries within 24 hours of failed resource loading to avoid invalid requests, dynamically adjusts the loading priority of static / dynamic resources through prefetch and fetchpriority, prevents blocking of first-screen rendering, and builds a high-fault-tolerant and low-risk pre-loading mechanism. BRIEF DESCRIPTION OF DRAWINGS

[0023] In order to more clearly illustrate the technical solutions of the present application, the following will briefly introduce the drawings needed to be used in the description. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0024] Figure 1 The flowchart of the front-end resource dynamic pre-loading method provided by the present application.

[0025] Figure 2 The structural diagram of the front-end resource dynamic pre-loading system provided by the present application.

[0026] Figure 3 The structural diagram of the electronic device provided by the present application. DETAILED DESCRIPTION

[0027] Various embodiments of the disclosure will be described in detail below with reference to the drawings. The disclosure can have various embodiments, and adjustments and changes can be made therein. However, it should be understood that there is no intention to limit various embodiments of the disclosure to the specific embodiments disclosed herein, but the disclosure should be understood to encompass all adjustments, equivalents, and / or alternatives falling within the spirit and scope of various embodiments of the disclosure.

[0028] Hereinafter, the term "include" or "may include" used in various embodiments of the disclosure indicates the presence of the disclosed functions, operations, or elements, and does not limit the addition of one or more functions, operations, or elements. In addition, as used in various embodiments of the disclosure, the terms "include", "have", and their conjugates merely mean to indicate the presence of specific features, numbers, steps, operations, elements, components, or combinations of the foregoing, and should not be understood as excluding the presence or addition of one or more other features, numbers, steps, operations, elements, components, or combinations of the foregoing in advance.

[0029] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, not all. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0030] Please refer to Figure 1 The method flowchart of a front-end resource dynamic preloading method in a specific embodiment is shown, and the method comprises: S1: based on the Transformer time series model architecture, a user behavior prediction model is constructed and trained, the user behavior prediction model is compressed, a light prediction model is generated and deployed to the browser end.

[0031] In the specific embodiment, the user behavior prediction model is constructed using the Transformer time series model architecture. When training and optimizing the model, first, the historical user behavior data is obtained, and after preprocessing, a time series operation sequence is generated; then the time series operation sequence is input into the user behavior prediction model, and the output is the probability distribution of the next operation, to perform model training and optimization.

[0032] After the model training is completed, the model is compressed. Specifically, the model weights of the user behavior prediction model are converted from 32-bit floating-point data to 8-bit integer data (TensorFlow.js uint8 quantization), and neurons with low weight values are removed to sparsify the model, generating a light prediction model.

[0033] After the above processing is completed, the light prediction model is converted into a web format using TensorFlow.js Converter, deployed to a CDN, split into model shards according to a routing module, and loaded in the background using WebWorker.

[0034] S2: By listening to user interaction events, obtaining user behavior data, generating user operation sequences, constructing time series operation sequences, and collecting network information and device performance information in real time.

[0035] In the specific embodiment, first, the user click event and mouse hover event are listened to through JavaScript, and the XPath or CSS selector of the clicked element and the hover duration are recorded. Specifically, the hover duration is calculated through the mouse enter and leave events, and if the hover duration exceeds 500 ms, the relevant operation is considered as a potential operation intention, and the relevant data is extracted as the user's behavior data.

[0036] In addition, for the click event, the duration of the click can be calculated by recording the timestamps of the start and end of the click. If the duration of the click is less than 100 milliseconds, it is considered to be a false touch and should be ignored. For the scroll event, the position change of the starting point and the ending point of the scroll needs to be tracked. If the distance of the scroll (whether in the vertical direction or in the horizontal direction) is less than 50 pixels, it can be considered to be invalid scrolling and should be ignored.

[0037] Among them, the user's behavior data includes user operation sequence, user ID and IP address. For the user operation sequence, time series feature construction is performed, including: converting the user operation sequence into a time window, and counting the operation frequency and path jump mode. For the user ID and IP address, data desensitization processing is performed, including: hashing the user ID and IP address to meet the GDPR privacy compliance requirements.

[0038] At this time, the time series operation sequence is generated based on the processed user behavior data.

[0039] On the other hand, in this step, device and network information is also collected in real time, including: The downlink bandwidth of the network is obtained through the Navigator API to identify the network status; wherein the network status includes 4G / 5G, 3G, 2G and offline; The memory usage of the device is monitored through the Chrome Performance API, and the current device running memory is determined.

[0040] The above data can be stored and uploaded by data aggregation. Using IndexedDB, a large amount of structured data can be stored in the user's browser, which is suitable for temporarily storing user behavior data. By setting a timing task, these data are uploaded to the analysis server in batches every 5 minutes to avoid performance and resource waste caused by frequent requests.

[0041] S3: input the time series operation sequence into the light prediction model, output the probability distribution of the next operation of the user, and determine the related resources.

[0042] In a specific embodiment, the time series operation sequence is input into the user behavior prediction model after sparse processing, i.e., the light prediction model. This model is based on the Transformer architecture and has been deployed on the browser side. It uses its powerful time series data processing capability to analyze the user's historical operation mode to predict the probability distribution of the user's next operation, and then determines the resource list related to the high-probability operation to provide data support for subsequent preloading decisions.

[0043] S4: Based on the probability distribution, resource type and network information, the priority of the resource is calculated, and a resource priority queue is generated.

[0044] In a specific embodiment, first, the predicted probability of each resource and the corresponding resource type are obtained based on the probability distribution; the resource type includes routing components, pictures, non-critical scripts, and API data.

[0045] Then, the priority score of each resource is calculated using the formula F=GxQxW; where G is the predicted probability, Q is the resource weight corresponding to the resource type, and W is the network coefficient corresponding to the network state. Specifically, the resource weight of the routing component is 1.0, the resource weight of the picture is 0.7, the resource weight of the non-critical script is 0.4; the network coefficient of 4G / 5G is 1.0, the network coefficient of 3G is 0.6, and the network coefficient of 2G is 0.2.

[0046] Finally, the priority scores of each resource are sorted in descending order, and a resource priority queue is generated based on the sorting result.

[0047] S5: Determine the preloading resource type according to the network information and device performance information, and adjust the resource priority queue to generate a preloading strategy.

[0048] In a specific embodiment, the resource priority queue generated according to the prediction result is combined with the current network state and device performance to dynamically adjust the preloading strategy.

[0049] Specifically, the network state is obtained through the Navigator API, and the running memory information is obtained through the Device Memory API.

[0050] Then, the preloaded resource types are screened according to the following mechanism for adjusting the resource priority queue to generate the preloading strategy: If the network state is 4G / 5G, and the current device running memory is greater than 2GB, the preloaded resource types are routing components, pictures and API data; If the network state is 3G, and the current device running memory is greater than 1GB and less than 2GB, the preloaded resource type is API data; If the network state is 2G, and the current device running memory is less than 1GB, the preloading is suspended, and the degradation cache is enabled.

[0051] Finally, the determined preloaded resource types are screened from the resource priority queue to generate the preloading strategy.

[0052] S6: Define cache rules based on the preloading strategy and generate a cache configuration file, cache the preloaded resources using CDN, and optimize device cache.

[0053] In the specific embodiment, this step uses Workbox to implement dynamic cache rules, and preferentially caches high-priority resources. The LRU-K algorithm is used to eliminate low-frequency resources to balance cache hit rate and storage efficiency.

[0054] First, determine the resource cache order based on the resource loading order in the preloading strategy, and adjust the resource cache order according to the preset resource cache priority to generate a cache configuration file as a cache rule; wherein the cache priority of the routing component > the cache priority of the API data > the cache priority of the picture > the cache priority of the non-key script.

[0055] Then, store the cache configuration file to the CDN, and inject and manage the cache rules according to the cache configuration file through Workbox to cache the preloaded resources. Wherein the cache rules are defined as configuration files stored in the CDN, and the ServiceWorker checks the rule version number every time it starts, and reloads the rules if it is updated.

[0056] It should be noted that this step can add associated resources to the cache in advance according to the high-probability access path output by the user behavior prediction model. When caching, a network state-aware cache strategy is used: combined with the network state (such as 4G, 3G, offline), it is determined whether to enable cache or degradation strategy.

[0057] Finally, the LRU-K algorithm is used in real time to record the timestamps of the last K accesses of each cache item. When the cache capacity reaches the upper limit and needs to be evicted, the cache item with the longest interval between the last K accesses is selected and deleted by the ServiceWorker. By using the LRU-K algorithm (last K access record) instead of the traditional LRU, the efficiency of long-term caching is avoided by high-frequency short-term access interference.

[0058] S7: Perform the preloading strategy and perform fallback processing after loading fails.

[0059] In the specific embodiment, the prefetch attribute of the link tag can be used to preload static resources, and the priority attribute (or other methods) is set when the request is initiated through the fetch API to adjust the priority of the request, so that the acquisition of dynamic API data has a lower priority, thereby not affecting the first page loading speed.

[0060] If the resource preloading fails, the resource is marked as "unpreloadable", and the resource will not be preloaded for 24 hours.

[0061] In this embodiment, the lightweight Transformer model is used to accurately predict user behavior, the preloading strategy is dynamically adjusted based on real-time network and device performance data, the intelligent cache management and LRU-K algorithm are used to optimize resource priority, the CDN cache configuration file is used to realize real-time synchronization of content, and intelligent fallback is performed when loading fails. These technical innovations break through the limitations of traditional fixed rule preloading, effectively solve the problems of key resource lag, redundant loading, and insufficient adaptation in weak network environment, significantly improve the consistency of front-end resource loading efficiency and user experience, and are especially suitable for complex Web applications with high-frequency content updates.

[0062] As shown in Figure 2 The following is an embodiment of a front-end resource dynamic preloading system provided by the embodiments of the present disclosure. The system and the front-end resource dynamic preloading method described above belong to the same inventive concept. Details not described in the embodiment of the front-end resource dynamic preloading system can be referred to the embodiment of the front-end resource dynamic preloading method described above.

[0063] A front-end resource dynamic preloading system comprises: A model construction and deployment module is configured to construct and train a user behavior prediction model based on a Transformer time series model architecture, compress the user behavior prediction model, generate a lightweight prediction model, and deploy the lightweight prediction model to a browser end.

[0064] The data acquisition and preprocessing module is configured to acquire behavior data of a user by monitoring user interaction events, generate a user operation sequence, construct a time sequence operation sequence, and acquire network information and device performance information in real time.

[0065] The prediction module is configured to input the time sequence operation sequence into a user behavior prediction model, output a probability distribution of a next operation of the user, and determine related resources.

[0066] The priority queue generation module is configured to calculate a priority of the resources based on the probability distribution, resource types, and network information, and generate a resource priority queue.

[0067] The preloading strategy generation module is configured to determine a preloaded resource type according to the network information and device performance information, adjust the resource priority queue, and generate a preloading strategy.

[0068] The resource caching module is configured to define a caching rule based on the preloading strategy, generate a caching configuration file, cache preloaded resources by using a CDN, and optimize device caching.

[0069] The preloading module is configured to execute the preloading strategy and perform fallback processing after a loading failure.

[0070] The front-end resource dynamic preloading system provided by the embodiment predicts user behavior by using a lightweight model, dynamically adjusts a preloading strategy in combination with real-time network and device state, utilizes intelligent caching and failure fallback mechanisms, realizes accurate prediction and efficient loading of resources, and effectively improves front-end performance and optimizes user experience.

[0071] Figure 3 A hardware structure schematic diagram of an electronic device for implementing various embodiments of the present application.

[0072] The front-end resource dynamic preloading method provided by the embodiment can be applied to an electronic device. Those skilled in the art can understand that the electronic device structure involved in the embodiments of the present application does not constitute a limitation on the electronic device, and the electronic device can include more or fewer components than the diagram, or combine certain components, or different component arrangements. In the embodiments of the present application, the electronic device includes but is not limited to a laptop computer, a desktop computer, a workstation, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as a personal digital processor, a cellular phone, a smart phone, a wearable device, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of the present application described and / or claimed herein.

[0073] The electronic device can include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, a key, a camera, a display screen, and a SIM card interface, and the like.

[0074] The processor can include one or more processing units, such as: the processor can include a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), and the like. Among them, different processing units can be independent devices, or can be integrated in one or more processors.

[0075] Among them, the processor can be the nerve center and command center of the electronic device. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions.

[0076] The memory can also be provided in the processor, used to store instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory can save instructions or data that the processor has just used or repeatedly uses. If the processor needs to use the instructions or data again, it can directly call from the memory. Avoiding repeated access, reducing the waiting time of the processor, thus improving the efficiency of the system.

[0077] The external memory interface can be used to connect an external memory card, such as a MicroSD card, to realize the expansion of the storage capacity of the electronic device. The external memory card communicates with the processor through the external memory interface to realize the data storage function. For example, save music, video and other files in the external memory card.

[0078] The internal memory can be used to store computer executable program codes including instructions. The processor performs various function applications and data processing of the electronic device by running the instructions stored in the internal memory. The internal memory can include a program storage area and a data storage area. The internal memory can include a high-speed random access memory, and can further include a non-volatile memory such as at least one of a magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0079] The wireless communication function of the electronic device can be implemented through an antenna, a wireless communication module, a modem processor, and a baseband processor, etc.

[0080] The wireless communication module can provide a wireless communication solution including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc. applied to the electronic device.

[0081] The electronic device can implement an audio function, etc. through an audio module, a speaker, a receiver, a microphone, a headphone interface, and an application processor, etc.

[0082] The electronic device can implement a photographing function through an ISP, a camera, a video codec, a GPU, a display screen, and an application processor, etc.

[0083] The electronic device can implement a display function through a GPU, a display screen, and an application processor, etc.

[0084] The GPU is a microprocessor for image processing, which is connected to the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor can include one or more GPUs, which execute program instructions to generate or change display information.

[0085] The display screen is used to display images, videos, etc. The display screen includes a display panel.

[0086] The electronic device realizes the front-end resource dynamic preloading method, and through constructing a lightweight Transformer time sequence model, user behavior is predicted, a preloading strategy is dynamically adjusted in combination with real-time network and device performance, cache management is optimized based on resource priority and LRU-K algorithm, and loading failure fallback processing is performed, so that the beneficial effects of accurately predicting resource loading demand, adapting to different environmental conditions, improving cache utilization efficiency, reducing invalid requests, and guaranteeing front-end performance and user experience are achieved.

[0087] In the storage medium provided in the application, a program product capable of realizing the front-end resource dynamic preloading method is stored.

[0088] The front-end resource dynamic preloading method comprises: A user behavior prediction model is constructed and trained based on a Transformer time sequence model architecture, the user behavior prediction model is compressed, a lightweight prediction model is generated and deployed to a browser end; By listening to user interaction events, user behavior data is obtained, user operation sequences are generated, time sequence operation sequences are constructed, and network information and device performance information are collected in real time; The time sequence operation sequence is input into the user behavior prediction model, the probability distribution of the next operation of the user is output, and related resources are determined; Based on the probability distribution, resource type and network information, the priority of the resource is calculated, and a resource priority queue is generated; According to the network information and the device performance information, the type of the preloaded resource is determined, the resource priority queue is adjusted to generate a preloading strategy; Cache rules are defined based on the preloading strategy, a cache configuration file is generated, preloaded resources are cached by using a CDN cache, and device cache is optimized; The preloading strategy is executed, and fallback processing is performed after loading failure.

[0089] In some possible implementation manners, the front-end resource dynamic preloading method of the present disclosure can be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to make the terminal device execute the steps according to various exemplary embodiments of the present disclosure described in the above “exemplary method” part of the specification.

[0090] The storage medium of the present disclosure can employ any combination of one or more computer-readable media. The computer-readable media can be a computer- readable signal medium or a computer-readable storage medium. A computer-readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium include the following: an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0091] The foregoing description of the disclosed embodiments enables a person skilled in the art to implement or use the invention. Various modifications to these embodiments will be apparent to those skilled in the art, and the generic principles defined herein can be applied to other embodiments without departing from the spirit or scope of the invention. Accordingly, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end resource dynamic preloading method, characterized in that: include: Build and train a user behavior prediction model based on the Transformer time series model architecture, compress the user behavior prediction model, generate a lightweight prediction model, and deploy it to the browser. By monitoring user interaction events, we can obtain user behavior data, generate user operation sequences, build time-series operation sequences, and collect network information and device performance information in real time. Input the time series operation sequence into the lightweight prediction model, output the probability distribution of the user's next operation, and determine the relevant resources; Calculating resource priorities based on the probability distribution, resource types, and network information, and generating a resource priority queue; Determine the type of preloaded resources based on network information and device performance information, and adjust the resource priority queue to generate a preload strategy; Define caching rules based on preloading strategies and generate cache configuration files, use CDN cache to preload resources, and optimize device cache; Execute the preload strategy and perform fallback processing after loading fails.

2. The front-end resource dynamic preloading method according to claim 1, characterized in that: The method of building and training a user behavior prediction model based on the Transformer time series model architecture, compressing the user behavior prediction model, generating a lightweight prediction model, and deploying it to the browser side includes: Use the Transformer time series model architecture to build a user behavior prediction model; Obtain historical user behavior data and generate a time series operation sequence after preprocessing; Input the time series operation sequence into the user behavior prediction model for model training; Convert the model weights of the user behavior prediction model from 32-bit floating-point data to 8-bit integer data, remove neurons with weight values ​​below a preset threshold, and generate a lightweight prediction model; Use TensorFlow.jsConverter to convert the lightweight prediction model into web format and deploy it to CDN. Split the lightweight prediction model into model shards based on the routing module, and use WebWorker to load the model shards in the background.

3. The front-end resource dynamic preloading method according to claim 1, characterized in that: The method of monitoring user interaction events, obtaining user behavior data, generating user operation sequences, constructing time-series operation sequences, and collecting network information and device performance information in real time includes: Use JavaScript to monitor user click events and mouse hover events, and record the XPath or CSS selector of the clicked element and the hover duration; Identify user behavior based on hover duration and obtain user behavior data; Extract user operation sequence, user ID and IP address based on user behavior data; The user operation sequence is converted into a time window, the operation frequency and path jump pattern are counted, the user ID and IP address are hashed, and a time-series operation sequence is generated; Obtain the network's downlink bandwidth through the Navigator API to identify the network status. Network status includes 4G / 5G, 3G, 2G, and offline. Monitor device memory usage through the Chrome Performance API and determine the current device running memory.

4. The front-end resource dynamic preloading method according to claim 3, characterized in that: The calculating the priority of the resource based on the probability distribution, resource type and network information and generating the resource priority queue includes: Obtaining the predicted probability and corresponding resource type of each resource based on the probability distribution; resource types include routing components, images, non-critical scripts, and API data; The priority score of each resource is calculated using the formula F=G×Q×W, where G is the predicted probability, Q is the resource weight corresponding to the resource type, and W is the network coefficient corresponding to the network status. The priority scores of each resource are sorted in descending order, and a resource priority queue is generated based on the sorting results.

5. The front-end resource dynamic preloading method according to claim 4, characterized in that: The method of determining the preloaded resource type based on the network information and the device performance information and adjusting the resource priority queue to generate the preload strategy includes: Get the network status and current device running memory; If the network status is 4G / 5G and the current device running memory is greater than 2GB, the preloaded resource types are routing components, images, and API data; If the network status is 3G and the current device running memory is greater than 1GB and less than 2GB, the preloaded resource type is API data; If the network status is 2G and the current device running memory is less than 1GB, preloading will be suspended; The determined preloaded resource types are filtered out from the resource priority queue and a preload strategy is generated.

6. The front-end resource dynamic preloading method according to claim 5, characterized in that: The method of defining cache rules based on the preloading strategy and generating a cache configuration file, using CDN cache to preload resources, and optimizing device cache includes: The resource caching order is determined based on the resource loading order in the preloading strategy, and the resource caching order is adjusted according to the preset resource caching priority. This is used as the caching rule and a cache configuration file is generated. The cache priority of routing components is > the cache priority of API data > the cache priority of images > the cache priority of non-critical scripts. Store the cache configuration file in the CDN, and use Workbox to inject and manage cache rules based on the cache configuration file to cache preloaded resources. The LRU-K algorithm is used to record the timestamps of the last K accesses to each cache item. When the cache capacity reaches the upper limit and needs to be eliminated, the cache item with the longest interval between the last K accesses is selected and deleted through ServiceWorker.

7. The front-end resource dynamic preloading method according to claim 6, characterized in that: The execution of the preloading strategy and the fallback process after the loading fails include: Execute the preloading strategy. If the currently preloaded resource is a static resource, use the prefetch attribute of the link tag to preload the static resource. If the currently preloaded resource is dynamic API data, adjust the request priority by setting the priority attribute through the fetchAPI to avoid blocking the first screen loading. If resource preloading fails, the resource is marked as non-preloadable and no further attempts are made to preload the resource within 24 hours.

8. A front-end resource dynamic preloading system, characterized in that: The system adopts the front-end resource dynamic preloading method according to any one of claims 1 to 7; The system comprises: The model building and deployment module is used to build and train a user behavior prediction model based on the Transformer time series model architecture, compress the user behavior prediction model, generate a lightweight prediction model, and deploy it to the browser; The data collection and preprocessing module is used to obtain user behavior data by monitoring user interaction events, generate user operation sequences, construct time-series operation sequences, and collect network information and device performance information in real time; The prediction module is used to input the time series operation sequence into the lightweight prediction model, output the probability distribution of the user's next operation, and determine the relevant resources; A priority queue generation module is used to calculate the priority of resources based on the probability distribution, resource type and network information, and generate a resource priority queue; A preloading strategy generation module is used to determine the preloading resource type based on network information and device performance information, and adjust the resource priority queue to generate a preloading strategy; The resource cache module is used to define cache rules and generate cache configuration files based on preloading strategies, preload resources using CDN cache, and optimize device cache; The preloading module is used to execute the preloading strategy and perform fallback processing after loading fails.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the front-end resource dynamic preloading method according to any one of claims 1 to 7 are implemented.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the front-end resource dynamic preloading method according to any one of claims 1 to 7 are implemented.

Images