Front-end resource management method and device, equipment and medium

Abstract

The invention discloses a front-end resource management method and device, equipment and a medium, and relates to the technical field of computers, and the method comprises the steps: determining a to-be-loaded page resource based on current behavior data; reading and loading a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a pre-loading resource list in the cache; the preloaded resource list comprises page sub-resources meeting priority conditions in different page resources; the priority condition is that the priority of the page sub-resources is within a target priority range; the target priority range is a plurality of priorities screened from all priorities according to a high-to-low screening sequence of the priorities; and after the first to-be-loaded page sub-resource is loaded, calling a rear-end interface to load a second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource, and adding the second to-be-loaded page sub-resource which does not exist in the pre-loaded resource list in the cache and meets the cache requirement into the pre-loaded resource list in the cache. The page loading efficiency can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end resource management method, device, equipment and medium. Background Art

[0002] With the current boom in internet technology, the complexity of front-end applications is growing exponentially. Against this backdrop, the page loading speed and performance of front-end applications have become key indicators of user experience. The current loading process suffers from the following issues: First, cache loading is redundant. During the initial page load phase, all relevant resources, including but not limited to JavaScript script files, CSS (Cascading Style Sheets) style sheets, and various image resources, are loaded all at once. This loading method significantly prolongs the initial page load time, significantly impacting user access to page content. Second, cache utilization and filtering are low. The browser's caching strategy is relatively simple, only utilizing already cached resources. This results in a poor match between cached resources and user needs, and cache space is not fully and effectively utilized, hindering page loading speed.

[0003] In summary, how to improve page loading efficiency is an urgent problem to be solved. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a front-end resource management method, device, equipment and medium, which can improve page loading efficiency. The specific solution is as follows:

[0005] In a first aspect, the present application discloses a front-end resource management method, comprising:

[0006] Determine the page resources to be loaded based on the current user's current behavior data;

[0007] Reading and loading a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet a priority condition among different page resources; the priority condition is that the priority of the page sub-resource is within a target priority range; the target priority range is a number of priorities screened from all priorities in a screening order from high to low priority;

[0008] After the first to-be-loaded page sub-resource is loaded, the back-end interface is called to load the second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource, and the second to-be-loaded page sub-resource that meets the cache requirements is added to the preloaded resource list in the cache; the second to-be-loaded page sub-resource is a resource that does not exist in the preloaded resource list in the cache.

[0009] Optionally, before reading and loading the first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from the preloaded resource list in the cache, the method further includes:

[0010] Use machine learning models to predict the priority of page sub-resources based on the current user's historical behavior data to obtain prediction results;

[0011] The preloaded resource list is constructed based on the prediction result, and the preloaded resource list is stored in the cache.

[0012] Optionally, adding the second to-be-loaded page sub-resource that meets the cache requirement to the preloaded resource list in the cache includes:

[0013] Determine target parameters of the second to-be-loaded page sub-resource; the target parameters include maximum content drawing, first interaction delay, and first drawn content;

[0014] If any of the target parameters is greater than the corresponding target time period, the second to-be-loaded page sub-resource is loaded into the pre-loaded resource list in the cache.

[0015] Optionally, the cached page sub-resources stored in the cache are stored in a preset resource optimization method; the preset resource optimization method includes compressing and merging static resources, formatting images, and determining resource display methods according to device requirements.

[0016] Optionally, the front-end resource management method further includes:

[0017] Record and update in real time the latest read time and / or latest cache time of each cached page sub-resource in the preloaded resource list in the cache;

[0018] Accordingly, the front-end resource management method further includes:

[0019] Determine the latest access time of each cached page sub-resource in the preloaded resource list in the cache; the latest access time is the latest read time or the latest cache time, and remove the cached page sub-resources whose time difference is greater than a preset time length from the preloaded resource list in the cache; the time difference is the difference between the current time and the latest read time or the latest cache time;

[0020] Among them, if the cached page sub-resource has the latest read time, the latest access time is determined to be the latest read time; if the cached page sub-resource does not have the latest read time, the latest access time is determined to be the latest cache time.

[0021] Optionally, the front-end resource management method further includes:

[0022] The priority of the cached page sub-resource is adjusted based on the access frequency corresponding to each cached page sub-resource in the preloaded resource list in the cache, and the cached page sub-resource whose priority does not meet the target rule is removed from the preloaded resource list in the cache; the target rule is that the priority of the cached page sub-resource is at a preset proportion among the priorities of all cached page sub-resources sorted from high to low.

[0023] Optionally, the front-end resource management method further includes:

[0024] The first to-be-loaded page sub-resource and the second to-be-loaded page sub-resource are loaded based on an intelligent lazy loading method.

[0025] In a second aspect, the present application discloses a front-end resource management device, comprising:

[0026] A resource determination module is used to determine the page resources to be loaded based on the current behavior data of the current user;

[0027] a first loading module, configured to read and load a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a preloaded resource list in a cache; the preloaded resource list includes page sub-resources that meet a priority condition among different page resources; the priority condition is that the priority of the page sub-resource is within a target priority range; the target priority range is a number of priorities screened from all priorities in a screening order from high to low priority;

[0028] The second loading module is used to call the back-end interface to load the second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource after the first to-be-loaded page sub-resource is loaded, and add the second to-be-loaded page sub-resource that meets the cache requirements to the pre-loaded resource list in the cache; the second to-be-loaded page sub-resource is a resource that does not exist in the pre-loaded resource list in the cache.

[0029] In a third aspect, the present application discloses an electronic device, comprising:

[0030] Memory, used to store computer programs;

[0031] The processor is used to execute the computer program to implement the front-end resource management method disclosed above.

[0032] In a fourth aspect, the present application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the front-end resource management method disclosed above is implemented.

[0033] It can be seen that the present application determines the page resource to be loaded based on the current behavior data of the current user; reads and loads the first page sub-resource to be loaded corresponding to the page resource to be loaded from the preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet the priority conditions in different page resources; the priority condition is that the priority of the page sub-resource is within the target priority range; the target priority range is a number of priorities screened from all priorities in the order of high to low priority; after the first page sub-resource to be loaded is loaded, the back-end interface is called to load the second page sub-resource to be loaded corresponding to the page resource to be loaded, and the second page sub-resource to be loaded that meets the cache requirements is added to the preloaded resource list in the cache; the second page sub-resource to be loaded is a resource that does not exist in the preloaded resource list in the cache. It can be seen that the present application determines the page sub-resources with higher priority (within the priority range) in different pages and stores them in the cache. When loading a page, the page sub-resources in the cache are loaded first, that is, the first page sub-resource to be loaded with higher priority is loaded first, and then the second page sub-resource to be loaded with lower priority is loaded, so as to avoid the long waiting time when loading a page at one time, thereby improving the efficiency of page loading and the user experience. The present application will add the second page sub-resource to be loaded that meets the cache requirements to the pre-loaded resource list in the cache, update the cache according to the user's current behavior, improve the matching degree between the cache resources and the user's needs, and help improve the subsequent loading efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0035] Figure 1 A flow chart of a front-end resource management method disclosed in this application;

[0036] Figure 2 This is a schematic diagram of the structure of a front-end resource management device disclosed in this application;

[0037] Figure 3 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0038] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0039] With the current booming development of Internet technology, the complexity of front-end applications is growing exponentially. In this context, the loading speed and performance of front-end application pages have become key indicators for measuring the quality of user experience. The following problems exist in the current loading process: First, cache loading is redundant. During the initial loading phase of the page, all related resources, including but not limited to JavaScript script files, CSS style sheet files, and various image resources, are loaded at once. This loading method significantly prolongs the first screen loading time, greatly affecting the efficiency of users in obtaining page content. Second, cache utilization filtering is low. The caching strategy adopted by the browser is relatively simple and can only utilize cached resources. As a result, the cache resources do not match user needs well, and the cache space is not fully and effectively utilized, which is not conducive to improving page loading speed.

[0040] To this end, an embodiment of the present application proposes a front-end resource management solution that can improve page loading efficiency.

[0041] The present application embodiment discloses a front-end resource management method, see Figure 1 As shown, the method includes:

[0042] Step S11: Determine the page resources to be loaded based on the current behavior data of the current user.

[0043] In this embodiment, the current behavior data includes click URL (Uniform Resource Locator) path, page dwell time, click button, device type, operation trigger time, etc.

[0044] Step S12: Read and load the first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from the preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet the priority conditions in different page resources; the priority condition is that the priority of the page sub-resource is within the target priority range; the target priority range is a number of priorities filtered out from all priorities in the order of filtering from high to low priority, specifically, it can be the priority of the top target proportion among all priorities.

[0045] In this embodiment, before reading and loading the first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from the preloaded resource list in the cache, it also includes: using a machine learning model and predicting the page sub-resource priority based on the current user's historical behavior data to obtain a prediction result; constructing the preloaded resource list based on the prediction result, and storing the preloaded resource list in the cache.

[0046] It should be noted that historical behavior data should be collected first. Specifically, user behavior data is pre-collected through front-end tracking, including click URL paths, page dwell time, button clicks, device type, operation trigger time, etc. Feature extraction is then performed to extract user behavior characteristics (such as access frequency, URL path, time period distribution) and page structure characteristics (such as DOM (Document Object Model) hierarchy and key element location), and resource classification is performed: page resources are divided according to access stage (homepage, secondary page, deep page) (specifically, different pages are divided according to the page sub-resources of each page), and marked as key resources (page sub-resources) (such as homepage CSS / JS, where JS represents JavaScript) and non-key resources (page sub-resources) (such as secondary page images); model prediction is then performed, specifically using machine learning models (including but not limited to Markov chains and random forests) to analyze user behavior patterns, predict the probability distribution of subsequent access paths, and generate resource priority results. It should be noted that feature extraction and resource classification operations are also required when utilizing current behavior data.

[0047] It should be pointed out that the resource priority result includes all necessary and non-essential resources, that is, critical and non-critical resources. The initial preloaded resource list includes page sub-resources that meet the priority conditions in different page resources, and other resources can be added or existing resources can be cleared later; specifically, the preloaded resource list can include necessary resources and critical resources, and other resources can be added or existing resources can be cleared later according to the specific situation.

[0048] It should be pointed out that there may be a critical resource and a non-critical resource both belonging to the sub-resources of the first page to be loaded, or there may be a critical resource and a non-critical resource both belonging to the sub-resources of the second page to be loaded. When both belong to the sub-resources of the first page to be loaded, the priority of the non-critical resource may be higher than that of the critical resource. Therefore, it is necessary to set the async / defer attribute on the non-critical resource to delay the loading of the non-critical resource.

[0049] It should be noted that the loading method of this step can be through <link rel="preload / prefetch">Or fetch API loads resources asynchronously according to priority, that is, sub-resources are loaded in sequence according to the priority of sub-resources in the pre-loaded resource list in the cache. The priority also needs to be adjusted when other resources are added or existing resources are cleared. The newly added resource can be placed at the end of the list, that is, the priority is the lowest in the list. The priority will be changed later according to the access frequency of the sub-resource. Among them, API is Application Programming Interface, which is also the application programming interface.

[0050] In this embodiment, the present application can adjust the priority of the cached page sub-resource based on the access frequency corresponding to each cached page sub-resource in the preloaded resource list in the cache. Specifically, the higher the access frequency, the higher the priority. Subsequently, the cached page sub-resource whose priority does not meet the target rule needs to be cleared from the preloaded resource list in the cache; the target rule is that the priority of the cached page sub-resource is at a preset proportion of the priorities of all cached page sub-resources sorted from high to low. It should be pointed out that the access frequency can be calculated by the number of visits within a certain time period from the current time to a previous time.

[0051] In this embodiment, it is necessary to record and update the latest read time and / or latest cache time of each cached page sub-resource in the preloaded resource list in the cache in real time, so as to facilitate the determination of sub-resources that need to be cleared based on time based on the LRU (Least Recently Used) algorithm (the principle involved in the LRU algorithm is: if a piece of data has not been accessed in the recent period of time, then the possibility of being accessed in the future is also very small, so it can be cleared). Specifically, the latest access time of each cached page sub-resource in the preloaded resource list in the cache is determined; the latest access time is the latest read time or the latest cache time, and the cached page sub-resources with a time difference greater than a preset time length are cleared from the preloaded resource list in the cache; the time difference is the difference between the current time and the latest read time or the latest cache time; wherein, if the cached page sub-resource has the latest read time, the latest access time is determined to be the latest read time; if the cached page sub-resource does not have the latest read time, the latest access time is determined to be the latest cache time. It should be noted that if the time difference is greater than the preset time length, it indicates that it has not been used for a long time and can be directly cleared to save cache resources. It should be noted that max-age and stale-while-revalidate are used to determine the cache validity period (preset time length). Based on the cache validity period, it is regularly determined whether to clear the cached page sub-resources that need to be cleared from the cache.

[0052] Step S13: After the first to-be-loaded page sub-resource is loaded, call the back-end interface to load the second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource, and add the second to-be-loaded page sub-resource that meets the cache requirements to the pre-loaded resource list in the cache; the second to-be-loaded page sub-resource is a resource that does not exist in the pre-loaded resource list in the cache.

[0053] In this embodiment, the second step of adding the second to-be-loaded page sub-resource that meets the cache requirements to the pre-loaded resource list in the cache includes: determining the target parameters of the second to-be-loaded page sub-resource; the target parameters include maximum content drawing, first interaction delay, and first drawing content; if any of the target parameters is greater than the corresponding target time period, the second to-be-loaded page sub-resource is loaded into the pre-loaded resource list in the cache. It should be pointed out that the front end collects core indicators (LCP, FID, FCP) through the Lighthouse API or Web Vitals library, and implements data collection in combination with APIs such as performance.getEntriesByType; reports the indicator data to the monitoring platform, and performs root cause analysis in combination with log analysis tools. The reason may be that the file is too large, etc. If the file is too large and the LCP exceeds the threshold, the priority of the file is adjusted to high priority (that is, stored in the list), and the file is placed in the cache. LCP (Largest Contentful Paint) represents the maximum contentful paint (time), with a target time period of 2.5 seconds (the first target time period). FID (First Input Delay) represents the first interaction delay, also known as the first input delay, with a target time period of 100ms (the second target time period). FCP (First Contentful Paint) represents the first contentful paint (time), with a target time period of 1 second (the third target time period). It's important to note that resource loading priorities (indicating the process of storing previously non-cached page sub-resources into the cache, adjusting the priority of these sub-resources) and caching policies can be adjusted dynamically based on monitoring data. When any target parameter exceeds the corresponding target time period, an alert is sent through the monitoring system and notified to the operations and development team. Caching policies include prioritizing cache reads, storing cached resources after reading them through an interface when they don't exist in the cache and updating the access time, supporting preloading, adjusting priorities using the LRU algorithm, controlling cache expiration times, and periodically clearing low-priority cached resources. Dynamic adjustments can adjust both priorities and cache durations, or add other rules to the caching process.

[0054] It should be noted that the cached page sub-resources stored in the cache are stored in a preset resource optimization method; the preset resource optimization method includes compressing and merging static resources, formatting images, and determining the resource display method according to device requirements. Specifically, the preset resource optimization method includes: 1. Code compression: compress JS / CSS code through build tools (such as Webpack), enable Gzip / Brotli compression to reduce transmission volume. 2. Resource merging: merge CSS files to reduce the number of requests, and use sprites to merge image resources. 3. Image format optimization: (1) WebP conversion: convert traditional image formats (JPG (JPEG, Joint Photographic Experts Group, an image format) / PNG (Portable Network Graphics, a lossless compressed bitmap image format)) to WebP format, through <picture>The tag provides multi-format support; (2) On-demand loading: Combine srcset and responsive images to adapt to different resolutions.

[0055] It should be noted that the sub-resource newly added to the cache can be placed at the end of the list, that is, the priority is the lowest in the list. The priority will be changed later based on the access frequency of the sub-resource. Specifically, after determining the change scheduling strategy, the resource loading priority can be adjusted through the Priority Hints API.

[0056] It should be pointed out that the present application can adjust the priority of the cached page sub-resources based on the access frequency corresponding to each cached page sub-resource in the preloaded resource list in the cache. Specifically, the higher the access frequency, the higher the priority. Subsequently, the cached page sub-resources whose priorities do not meet the target rules need to be cleared from the preloaded resource list in the cache; the target rule is that the priority of the cached page sub-resource is at a preset proportion among the priorities of all cached page sub-resources sorted from high to low.

[0057] In this embodiment, the application loads the first to-be-loaded page sub-resource and the second to-be-loaded page sub-resource based on an intelligent lazy loading method. Specifically, the intelligent lazy loading (Intersection Observer) process is as follows: (1) Viewport monitoring: using the Intersection Observer API to monitor events when a target element (such as an image or component) enters the viewport; (2) Dynamically triggered loading: triggering resource loading when an element enters the viewport, replacing the element path or dynamically loading content through fetch.

[0058] In summary, the above content can also be divided into modules, including resource loading module, cache management module, resource optimization module, monitoring feedback module, and database. Different modules have different work contents. The database is mainly used to save various information of the system, including user behavior data, website resource data, system configuration and other tables. The resource loading module is responsible for executing dynamic loading and delayed loading tasks of resources to ensure timely and reasonable resource loading (specifically including user behavior data collection and analysis, resource prediction and preloading, intelligent lazy loading methods, and non-critical resource delayed loading rules, resource priority adjustment process); the cache management module is mainly used for the full life cycle management of cache resources, covering storage, update and invalidation processing (specifically including the cache strategy mentioned above); the resource optimization module is mainly for deep optimization of resources, including compression, merging and format conversion operations; the monitoring feedback module is mainly for collecting and deeply analyzing performance data (that is, target parameters) to provide data support for the dynamic optimization of the system (using the analysis results of the target parameters to propose vertical and horizontal priorities and cache strategies and issue alarms when the target parameters meet the corresponding conditions). In addition, the cache management module uses Service Worker for offline caching and preloading, dynamically adjusts cache priorities using the LRU algorithm, and regularly clears low-priority cached resources. The resource optimization module compresses JS / CSS code using build tools (such as Webpack), uses compression technology to reduce transmission volume, and merges CSS files and image resources to reduce the number of requests. The monitoring feedback module collects core performance metrics through the Lighthouse API or the Web Vitals library and automatically adjusts resource loading priorities based on this monitoring data to ensure optimal page performance.

[0059] Specifically, through accurate prediction of user behavior and in-depth analysis of page structure, the order and timing of resource loading are intelligently determined, and the loading of non-critical resources is delayed to ensure that high-priority core content is loaded first. Based on the user's diverse access patterns, the priority of cached resources is intelligently and dynamically adjusted to achieve efficient use of cached resources. Resource optimization technology is used to compress, merge, and convert static resources to reduce resource size and improve loading efficiency. A real-time performance monitoring and feedback system is built to capture page performance data in real time. Based on the monitoring results, resource loading and caching strategies are dynamically optimized to ensure that page performance is always in the best state. Through the above innovative methods, page loading speed can be effectively improved, network request overhead can be significantly reduced, and users can enjoy a smooth and efficient front-end experience.

[0060] In summary, this application addresses the challenges of redundant resource loading, insufficient cache utilization, and high network overhead in existing front-end optimization technologies. By proposing a front-end performance optimization method (also known as a resource management method) based on dynamic resource loading and caching strategies, this method addresses the core issues of redundant resource loading, low cache utilization, and high network overhead in traditional technologies through intelligent prediction, dynamic scheduling, and a closed-loop feedback mechanism (adjusting sub-resources in the cache list), providing an efficient performance optimization solution for modern, highly complex front-end applications. This method uses machine learning models (such as Markov chains and random forests) to analyze user behavior and page structure to accurately predict resource loading priorities. Combining preloading (preload / fetch) and lazy loading (Intersection Observer) techniques, this method prioritizes the loading of critical first-page resources (CSS / JS) and delays the loading of non-essential resources (such as images and deep components), significantly reducing first-page load times and improving website responsiveness. Furthermore, the ServiceWorker-based intelligent caching strategy employs dynamic priority management (LRU algorithm) and preloading mechanisms to improve cache hit rates for high-frequency resources and effectively reduce duplicate requests. In addition, the real-time performance monitoring system (Lighthouse API, Web Vitals) dynamically collects core metrics such as LCP and FID, and combines this with alerting mechanisms and adaptive strategy (caching strategy) adjustments to ensure continuous optimization of page performance. The system also supports multi-device compatibility through responsive images (srcset) and modular design, supporting seamless integration with existing toolchains (Webpack (code compilation tool), CDN (Content Delivery Network)) and strong scalability. Compared to traditional technologies, this invention achieves the coordinated optimization of resource loading efficiency, cache utilization, and user experience, providing a stable, low-latency front-end performance solution for high-concurrency scenarios, with significant commercial value and technical universality.

[0061] It can be seen that the present application determines the page resource to be loaded based on the current behavior data of the current user; reads and loads the first page sub-resource to be loaded corresponding to the page resource to be loaded from the preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet the priority conditions in different page resources; the priority condition is that the priority of the page sub-resource is within the target priority range; the target priority range is a number of priorities screened from all priorities in the order of high to low priority; after the first page sub-resource to be loaded is loaded, the back-end interface is called to load the second page sub-resource to be loaded corresponding to the page resource to be loaded, and the second page sub-resource to be loaded that meets the cache requirements is added to the preloaded resource list in the cache; the second page sub-resource to be loaded is a resource that does not exist in the preloaded resource list in the cache. It can be seen that the present application determines the page sub-resources with higher priorities (within the priority range) in different pages and stores them in the cache. When loading a page, the page sub-resources in the cache are loaded first, that is, the first page sub-resource to be loaded with higher priority is loaded first, and then the second page sub-resource to be loaded with lower priority is loaded, so as to avoid the long waiting time when loading a page at one time, thereby improving the efficiency of user page loading and the user experience. The present application will add the second page sub-resource to be loaded that meets the cache requirements to the pre-loaded resource list in the cache, update the cache according to the user's current behavior, improve the matching degree between the cache resources and the user's needs, and help improve the subsequent loading efficiency. In addition, the present application can determine the sub-resources newly stored in the cache according to the target parameters, clear the sub-resources that need to be cleared in the cache according to the time difference, and adjust the priority and clear the sub-resources that need to be cleared in the cache according to the access frequency, thereby realizing real-time adjustment of resources in the cache, improving the matching degree between the cache resources and the user's needs, and helping to improve loading efficiency.

[0062] Correspondingly, the embodiment of the present application also discloses a front-end resource management device, see Figure 2 As shown, the device includes:

[0063] A resource determination module 11 is used to determine the page resources to be loaded based on the current behavior data of the current user;

[0064] A first loading module 12 is configured to read and load a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a preloaded resource list in a cache; the preloaded resource list includes page sub-resources that meet a priority condition among different page resources; the priority condition is that the priority of the page sub-resource is within a target priority range; the target priority range is a number of priorities selected from all priorities in descending order of priority;

[0065] The second loading module 13 is used to call the back-end interface to load the second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource after the first to-be-loaded page sub-resource is loaded, and add the second to-be-loaded page sub-resource that meets the cache requirements to the pre-loaded resource list in the cache; the second to-be-loaded page sub-resource is a resource that does not exist in the pre-loaded resource list in the cache.

[0066] Among them, the more specific working processes of the above modules can refer to the corresponding contents disclosed in the above embodiments, which will not be repeated here.

[0067] It can be seen that the present application determines the page resource to be loaded based on the current behavior data of the current user; reads and loads the first page sub-resource to be loaded corresponding to the page resource to be loaded from the preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet the priority conditions in different page resources; the priority condition is that the priority of the page sub-resource is within the target priority range; the target priority range is a number of priorities screened from all priorities in the order of high to low priority; after the first page sub-resource to be loaded is loaded, the back-end interface is called to load the second page sub-resource to be loaded corresponding to the page resource to be loaded, and the second page sub-resource to be loaded that meets the cache requirements is added to the preloaded resource list in the cache; the second page sub-resource to be loaded is a resource that does not exist in the preloaded resource list in the cache. It can be seen that the present application determines the page sub-resources with higher priority (within the priority range) in different pages and stores them in the cache. When loading a page, the page sub-resources in the cache are loaded first, that is, the first page sub-resource to be loaded with higher priority is loaded first, and then the second page sub-resource to be loaded with lower priority is loaded, so as to avoid the long waiting time when loading a page at one time, thereby improving the efficiency of page loading and the user experience. The present application will add the second page sub-resource to be loaded that meets the cache requirements to the pre-loaded resource list in the cache, update the cache according to the user's current behavior, improve the matching degree between the cache resources and the user's needs, and help improve the subsequent loading efficiency.

[0068] Furthermore, an embodiment of the present application also provides an electronic device. Figure 3 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram should not be considered as any limitation to the scope of application of the present application.

[0069] Figure 3 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a display screen 23, an input / output interface 24, a communication interface 25, a power supply 26, and a communication bus 27. The memory 22 is used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps of the front-end resource management method disclosed in any of the aforementioned embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0070] In this embodiment, the power supply 26 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 25 can create a data transmission channel between the electronic device 20 and the external device. The communication protocol it follows is any communication protocol that can be applied to the technical solution of this application and is not specifically limited here; the input and output interface 24 is used to obtain external input data or output data to the outside world. Its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0071] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, a magnetic disk, or an optical disk, etc. The resources stored thereon can include a computer program 221, which can be stored in a temporary or permanent manner. In addition to including a computer program capable of implementing the front-end resource management method executed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 221 can further include a computer program capable of implementing other specific tasks.

[0072] Furthermore, an embodiment of the present application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the front-end resource management method disclosed above is implemented.

[0073] The specific steps of the method can be referred to the corresponding contents disclosed in the above embodiments, and will not be repeated here.

[0074] The various embodiments in this application are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple, and the relevant parts can be referred to the method part.

[0075] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0076] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0077] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprise," "include," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus comprising a set of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of additional identical elements in the process, method, article, or apparatus comprising the element.

[0078] The above is a detailed introduction to the front-end resource management method, device, equipment, and storage medium provided by this application. Specific examples are used in this article to illustrate the principles and implementation methods of this application. The description of the above embodiments is only used to help understand the method of this application and its core ideas. At the same time, for general technical personnel in this field, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on this application.< / picture>

Claims

1. A front-end resource management method, characterized in that: include: Determine the page resources to be loaded based on the current user's current behavior data; Reading and loading a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a preloaded resource list in the cache; the preloaded resource list includes page sub-resources that meet a priority condition among different page resources; the priority condition is that the priority of the page sub-resource is within a target priority range; The target priority range is a number of priorities screened from all priorities in descending order of priority; After the first to-be-loaded page sub-resource is loaded, calling the backend interface to load the second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource, and adding the second to-be-loaded page sub-resource that meets the cache requirements to the preloaded resource list in the cache; The second to-be-loaded page sub-resource is a resource that does not exist in the pre-loaded resource list in the cache.

2. The front-end resource management method according to claim 1, characterized in that: Before reading and loading the first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from the preloaded resource list in the cache, the method further includes: Use machine learning models to predict the priority of page sub-resources based on the current user's historical behavior data to obtain prediction results; The preloaded resource list is constructed based on the prediction result, and the preloaded resource list is stored in the cache.

3. The front-end resource management method according to claim 1, characterized in that: The adding the second to-be-loaded page sub-resource that meets the cache requirement to the pre-loaded resource list in the cache includes: Determine target parameters of the second to-be-loaded page sub-resource; the target parameters include maximum content drawing, first interaction delay, and first drawn content; If any of the target parameters is greater than the corresponding target time period, the second to-be-loaded page sub-resource is loaded into the pre-loaded resource list in the cache.

4. The front-end resource management method according to claim 1, characterized in that: The cached page sub-resources stored in the cache are stored in a preset resource optimization method; the preset resource optimization method includes compressing and merging static resources, formatting images, and determining resource display methods according to device requirements.

5. The front-end resource management method according to claim 1, characterized in that: Also includes: Record and update in real time the latest read time and / or latest cache time of each cached page sub-resource in the preloaded resource list in the cache; Accordingly, the front-end resource management method further includes: Determine the latest access time of each cached page sub-resource in the preloaded resource list in the cache; the latest access time is the latest read time or the latest cache time, and remove the cached page sub-resources whose time difference is greater than a preset time length from the preloaded resource list in the cache; the time difference is the difference between the current time and the latest read time or the latest cache time; Among them, if the cached page sub-resource has the latest read time, the latest access time is determined to be the latest read time; if the cached page sub-resource does not have the latest read time, the latest access time is determined to be the latest cache time.

6. The front-end resource management method according to claim 1, characterized in that: Also includes: The priority of the cached page sub-resource is adjusted based on the access frequency corresponding to each cached page sub-resource in the preloaded resource list in the cache, and the cached page sub-resource whose priority does not meet the target rule is removed from the preloaded resource list in the cache; the target rule is that the priority of the cached page sub-resource is at a preset proportion among the priorities of all cached page sub-resources sorted from high to low.

7. The front-end resource management method according to claim 1, characterized in that: Also includes: The first to-be-loaded page sub-resource and the second to-be-loaded page sub-resource are loaded based on an intelligent lazy loading method.

8. A front-end resource management device, characterized in that: include: A resource determination module is used to determine the page resources to be loaded based on the current behavior data of the current user; a first loading module, configured to read and load a first to-be-loaded page sub-resource corresponding to the to-be-loaded page resource from a preloaded resource list in a cache; the preloaded resource list includes page sub-resources that meet a priority condition among different page resources; the priority condition being that the priority of the page sub-resource is within a target priority range; The target priority range is a number of priorities screened from all priorities in descending order of priority; A second loading module is configured to, after the first to-be-loaded page sub-resource is loaded, call a backend interface to load a second to-be-loaded page sub-resource corresponding to the to-be-loaded page resource, and add the second to-be-loaded page sub-resource that meets the cache requirements to the preloaded resource list in the cache; The second to-be-loaded page sub-resource is a resource that does not exist in the pre-loaded resource list in the cache.

9. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor, configured to execute the computer program to implement the front-end resource management method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that Used to store a computer program; wherein, when the computer program is executed by a processor, the front-end resource management method according to any one of claims 1 to 7 is implemented.

Images