Page dynamic resource preloading method and device
By performing dynamic resource preloading during user operations, the problems of long loading time and resource waste in traditional H5 page preloading solutions are solved, and more efficient page loading is achieved.
Patent Information
- Application Number
- CN202510903376.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-01
- Publication Date
- 2025-10-14
AI Technical Summary
Traditional H5 page preloading solutions load all static and dynamic resources at once when the app starts, resulting in a long initial loading time. A large amount of preloaded data is not accessed by users, wasting network resources and possibly expiring, making preloading meaningless.
Preloading of dynamic resources is performed only when a user touches the page jump control. The configuration items of the page to be jumped to are obtained through the dynamic resource preloading configuration file, a dynamic resource request is generated and the response data is cached. After the static resources are loaded, they are injected into the page to be jumped to for rendering.
It reduces the amount of preloaded dynamic resources, avoids data expiration, reduces network resource consumption, and improves page loading efficiency and user experience.
Smart Images

Figure CN120780377A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of Internet technology, in particular to the field of page display technology, and more particularly to a method and device for preloading dynamic resources of a page. Background Art
[0002] In current internet applications, users' demands for H5 (Hyper Text Markup Language 5) page loading speeds continue to increase, and a "second-load" experience has become a core indicator of user experience. Industry research data shows that the majority of platform user churn is directly related to loading delays. This is especially true in time-sensitive scenarios such as e-commerce transactions and financial information display, where loading efficiency directly impacts user experience. To address this demand, preloading technology has gradually developed into a key solution.
[0003] However, the traditional H5 preloading solution loads all static and dynamic resources at once during the App startup phase, resulting in a long initial loading time. In addition, there is a situation where a large amount of preloaded data is ultimately not actually accessed by the user. At this time, the preloaded data expires due to long-term non-use, resulting in a waste of network resources and the need for re-request, which makes the preloading meaningless. Summary of the Invention
[0004] In view of this, the embodiments of the present application provide a method, apparatus, device, medium and product for preloading dynamic resources of a page, which can improve the preloading process of dynamic resources, enhance preloading efficiency and reduce preloading network resource consumption.
[0005] In the first aspect, an embodiment of the present application provides a method for preloading dynamic resources of a page, which is applied to a client, and the method includes: when the APP is started, by calling the target configuration interface, obtaining a dynamic resource preloading configuration file, wherein the dynamic resource preloading configuration file includes configuration items corresponding to the page URLs of multiple H5 pages in the APP, and each configuration item is used to define the key information required when requesting the dynamic resources of the corresponding H5 page, and the key information includes the interface address of the request interface for requesting dynamic resources, the request type, and the request parameter name and request header name required when requesting dynamic resources; when the user's touch operation on the page jump control is monitored, the target page URL of the page to be jumped is obtained, and the configuration item corresponding to the target page URL is queried by reading the dynamic resource preloading configuration file; based on the configuration item corresponding to the target page URL, a dynamic resource request for the page to be jumped is generated, and the response data returned by the dynamic resource request is cached to obtain preloaded dynamic data; when the static resources of the page to be jumped are loaded, the preloaded dynamic data is obtained, and the preloaded dynamic data is injected into the page to be jumped for dynamic resource rendering.
[0006] In the second aspect, an embodiment of the present application provides a page dynamic resource preloading device, which is applied to a client, and the device includes: an acquisition module, which is used to obtain a dynamic resource preloading configuration file by calling a target configuration interface when the APP is started, wherein the dynamic resource preloading configuration file includes configuration items corresponding to the page URLs of multiple H5 pages in the APP, and each configuration item is used to define the key information required when requesting the dynamic resources of the corresponding H5 page, and the key information includes the interface address of the request interface for requesting dynamic resources, the request type, and the request parameter name and request header name required when requesting dynamic resources; a query module, which is used to obtain the target page URL of the page to be jumped to when a user touch operation on the page jump control is detected, and query the configuration item corresponding to the target page URL by reading the dynamic resource preloading configuration file; a preloading module, which is used to generate a dynamic resource request for the page to be jumped to based on the configuration item corresponding to the target page URL, and cache the response data returned by the dynamic resource request to obtain preloaded dynamic data; a rendering module, which is used to obtain the preloaded dynamic data after the static resources of the page to be jumped are loaded, and inject the preloaded dynamic data into the page to be jumped to perform dynamic resource rendering.
[0007] In a third aspect, an embodiment of the present application provides an electronic device comprising: a processor and a memory storing computer program instructions; when the processor executes the computer program instructions, the steps of the page dynamic resource preloading method of the first aspect are implemented.
[0008] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the steps of the page dynamic resource preloading method of the first aspect are implemented.
[0009] In a fifth aspect, an embodiment of the present application provides a computer program product, which is stored in a non-volatile storage medium. When the computer program product is executed by a processor, it implements the steps of the page dynamic resource preloading method as in the first aspect.
[0010] In a sixth aspect, an embodiment of the present application provides a chip comprising a processor and a communication interface, wherein the communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the steps of the page dynamic resource preloading method as in the first aspect.
[0011] The present application provides a method, device, equipment, medium and product for preloading dynamic resources of a page. The preloading step of dynamic resources is performed only when the user's touch operation on the page jump control is detected, that is, the dynamic resource is requested only when it is needed. The preloading timing has changed. On the one hand, the amount of preloaded dynamic resources is reduced. On the other hand, the preloaded data will not expire due to long-term non-use, which can reduce the consumption of preloaded network resources. On this basis, the preloading step of dynamic resources has also changed. Specifically, the present application pre-loads the key information required for dynamic resources of multiple H5 pages in the APP in the dynamic resource preloading configuration file, and each H5 page is associated with a configuration item. In this way, when the user's touch operation triggers a page jump, the target page url of the page to be jumped can be used to query the configuration item corresponding to the page to be jumped from the dynamic resource preloading configuration file, and the key information contained in the configuration item can be used to generate a dynamic resource request for the page to be jumped, thereby using the dynamic resource request to obtain the dynamic resource data in the page to be jumped. After caching it, the preloaded dynamic data that has been loaded can be obtained. In this way, when the static resources of the page to be jumped to are loaded, the preloaded dynamic data can be directly reused and injected into the page to be jumped to for dynamic resource rendering. The timing of dynamic resource preloading is reasonably arranged, and the blocking of resource loading is avoided, thereby improving the page loading efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0012] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following briefly introduces the drawings in the embodiments of the present application.
[0013] Figure 1 This is a flow chart of a method for preloading dynamic resources on a page provided in one embodiment of the present application;
[0014] Figure 2 This is a flow chart of a method for preloading dynamic resources on a page provided by another embodiment of the present application;
[0015] Figure 3 This is a structural diagram of a device for preloading dynamic resources on a page provided by an embodiment of the present application;
[0016] Figure 4 This is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0017] The principles and spirit of the present application will be described below with reference to several exemplary embodiments. It should be understood that the purpose of providing these embodiments is to make the principles and spirit of the present application clearer and more thorough, so that those skilled in the art can better understand and implement the principles and spirit of the present application. The exemplary embodiments provided herein are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments herein, all other embodiments obtained by those of ordinary skill in the art without creative work are within the scope of protection of this application.
[0018] In this document, terms such as first, second, and third are only used to distinguish one entity (or operation) from another entity (or operation), and are not intended to require or imply any order or relationship between these entities (or operations).
[0019] The following is a brief description of the concepts, technical terms and other related contents that may be involved in the embodiments of this application.
[0020] Static resources (fixed content, direct distribution) refer to digital files whose content is pre-generated on the server and remains fixed within a specific period of time. For example, they may include Hypertext Markup Language (HTML) file frames, Cascading Style Sheet (CSS) rendering rule definitions, JavaScript script code libraries, image binary encoding files (PNG / JPEG format), etc.
[0021] Dynamic resources (content can be changed, generated in real time) refer to interactive data entities whose real-time content generation depends on server-side state variables and context parameters. They are context-sensitive. When resource content responds to client requests, specific session state parameters must be injected to achieve personalized content generation. These specific session state parameters include user identity credentials (OAuth tokens), real-time database query statements (such as SQL conditional filtering), and server-side calculation process outputs (such as AI recommendation results).
[0022] Before describing the technical solutions provided by the embodiments of the present application, in order to facilitate understanding of the embodiments of the present application, the present application first specifically describes the problems existing in the related art:
[0023] In related technologies, traditional H5 page preloading solutions usually load all static and dynamic resources at once when the APP is started, which results in a long initial loading time. A large amount of preloaded data is ultimately not accessed by users, wasting traffic and memory. The preloaded data may not be used for a long time and is prone to expiration (cache failure), resulting in a waste of network resources and the need for re-request, which makes preloading meaningless.
[0024] In view of the above research findings of the inventors, the embodiments of the present application provide a method, device, equipment, medium and product for preloading dynamic resources of a page, aiming to solve the problem that the current H5 page preloading solution is time-consuming and wastes network resources.
[0025] The following describes in detail the page dynamic resource preloading method provided by the embodiment of the present application through specific embodiments and application scenarios in conjunction with the accompanying drawings.
[0026] Figure 1 This is a flow chart of a method for preloading dynamic resources on a page provided by an embodiment of the present application. The execution subject of the method for preloading dynamic resources on a page may be a client.
[0027] The following takes the execution subject of the page dynamic resource preloading method as the client as an example to illustrate the page dynamic resource preloading method of this application. It should be noted that the above execution subject and application scenario do not constitute a limitation of this application.
[0028] like Figure 1 As shown, the page dynamic resource preloading method provided by the embodiment of the present application may include steps 110 to 140.
[0029] Step 110: When the APP is started, the target configuration interface is called to obtain the dynamic resource preloading configuration file;
[0030] Step 120: When a user touch operation on a page jump control is detected, the URL of the target page to be jumped to is obtained, and a configuration item corresponding to the target page URL is queried by reading a dynamic resource preloading configuration file;
[0031] Step 130: Generate a dynamic resource request for the page to be redirected based on the configuration item corresponding to the target page URL, and cache the response data returned by the dynamic resource request to obtain preloaded dynamic data;
[0032] Step 140: After the static resources of the page to be redirected are loaded, the preloaded dynamic data is obtained and injected into the page to be redirected to perform dynamic resource rendering.
[0033] The page dynamic resource preloading method provided by the embodiment of the present application only executes the preloading step of dynamic resources when the user's touch operation on the page jump control is detected, that is, the dynamic resource is requested only when it is needed, and the preloading timing has changed. On the one hand, the amount of preloaded dynamic resources is reduced, and on the other hand, the preloaded data will not expire due to long-term non-use, which can reduce the preloading network resource consumption. On this basis, the preloading step of dynamic resources has also changed. Specifically, the present application pre-configures the key information required for loading the dynamic resources of multiple H5 pages in the APP in the dynamic resource preloading configuration file, and each H5 page is associated with a configuration item. In this way, when the user's touch operation triggers a page jump, the target page url of the page to be jumped can be used to query the configuration item corresponding to the page to be jumped from the dynamic resource preloading configuration file, and the key information contained in the configuration item is used to generate a dynamic resource request for the page to be jumped, thereby using the dynamic resource request to obtain the dynamic resource data in the page to be jumped. After caching it, the preloaded dynamic data can be obtained. In this way, when the static resources of the page to be jumped to are loaded, the preloaded dynamic data can be directly reused and injected into the page to be jumped to for dynamic resource rendering. The timing of dynamic resource preloading is reasonably arranged, and the blocking of resource loading is avoided, thereby improving the page loading efficiency.
[0034] The specific implementation of the above steps will be described in detail below with reference to specific embodiments.
[0035] Involving step 110, when the APP is started, the target configuration interface is called to obtain the dynamic resource preloading configuration file.
[0036] In step 110, the dynamic resource preloading configuration file includes configuration items corresponding to the page URLs of multiple H5 pages in the APP. Each configuration item is used to define the key information required when requesting the dynamic resources of the corresponding H5 page. The key information includes the interface address of the request interface used to request dynamic resources, the request type, and the request parameter name and request header name required when requesting dynamic resources.
[0037] The target configuration interface is an application programming interface deployed on the server (backend). It is used to return a dynamic resource preloading configuration file to the client when the app starts. The client can read the dynamic resource preloading configuration file to preload dynamic resources. Configuration data is deployed on the server and can be dynamically retrieved through the interface, facilitating remote configuration and updates, allowing page behavior to be adjusted without modifying client code.
[0038] Multiple H5 pages are H5 pages that support preloading in the APP. Multiple H5 pages can be selected by the user from all H5 pages that support preloading during configuration, or they can be the first screen page in each group of sliding browsing pages in the APP.
[0039] Dynamic resources can be data obtained from the server in real time in the H5 page, with characteristics such as real-time changes, personalization (different users see different results), and context dependence (such as user ID, page parameters), such as the latest product list, user information, personalized recommendation content, etc.
[0040] For example, if the APP is a job search and recruitment application, the dynamic resources may include: specific job description, salary, company information on the job details page, user nickname, avatar, resume information, and delivery record on the user's personal homepage.
[0041] The dynamic resource preloading configuration file is used to configure the request method for dynamic resources on multiple H5 pages within an app. The Uniform Resource Locator (URL) is used to locate the resource location or path, clearly indicating which API endpoint on the server is responsible for providing the dynamic resources required for this H5 page. The request type defines whether the access method is GET or POST, thereby instructing the client (app) to construct the request. The required request parameter names (GetParam and Post parameters) and request header names (Header) list the information items necessary to obtain valid dynamic resources. These names can be placeholders or variable names.
[0042] In this way, the links, parameters and other configuration data of the dynamic resources required for page display are generated and managed separately, making the page logic clearer and easier to maintain and expand.
[0043] The required parameter name is used to indicate what information needs to be provided to obtain the correct data, such as userId, resumeId, jobId, token, cityCode, etc. The required header name is used to indicate what special header information needs to be carried in the request, such as Authorization, Content-Type, App-Version, etc.
[0044] In related technologies, in traditional H5 page preloading solutions, the preloading of dynamic resources is usually based on static configuration files, which leads to: configuration errors are prone to occur, such as failure to update the configuration in a timely manner when the interface changes; high maintenance pressure, requiring manual analysis of the page and updating of the configuration.
[0045] In some embodiments of the present application, in order to reduce the configuration error rate and realize centralized management and dynamic update of configuration, the page URL and key information corresponding to the H5 page can be obtained by inputting the JS file of the H5 page into a preset artificial intelligence model and then identifying it. The dynamic resource preloading configuration file is stored on the server side, and the target configuration interface is used to return the dynamic resource preloading configuration file to the client.
[0046] Specifically, the key information is the metadata generated after AI analyzes the H5 page. It is not the final data itself, but an accurate description of how to obtain this final data.
[0047] The server side can pre-input the JS files of each H5 page in the APP into the preset artificial intelligence model; perform artificial intelligence analysis on each JS file to identify the page URL of each H5 page and the key information required when requesting the dynamic resources of each H5 page; associate the page URL and key information corresponding to each H5 page to obtain configuration items for multiple H5 pages; combine the configuration items of multiple H5 pages to obtain a dynamic resource preloading configuration file, and import or synchronize the dynamic resource preloading configuration file to the backend storage corresponding to the target configuration interface, such as database tables, configuration files, Redis cache, etc.
[0048] In this way, by analyzing static resources through AI, the structure and content of resource files can be optimized, such as compressing images, merging CSS / JS files, etc., further reducing resource size and speeding up loading. Use AI to automatically analyze each H5 page (HTML / JS, etc.) in the APP, intelligently identify the key information required for H5 page loading, and automatically generate a dynamic resource preloading configuration file associated with the APP based on the identification results of each H5 page, reducing errors caused by manual intervention and reducing the configuration error rate. In addition, the configuration file generation process of the AI analysis tool and the configuration file usage process of the App are decoupled. The two interact through a defined interface protocol without interfering with each other and affecting each other's internal implementation. By deploying the generated configuration file on the server side, centralized management and remote dynamic updates of the configuration can be achieved. Specifically, the AI analysis process can run continuously or periodically, automatically updating the configuration file to adapt to page changes. When the H5 page logic changes and the AI analysis tool generates new key information, it only needs to update the configuration data on the server, such as updating the database or configuration file. In this way, the next time the App is started, it can automatically obtain the latest dynamic resource preloading configuration file by requesting the target configuration interface. There is no need for manual continuous analysis of the H5 page and modification of the configuration, which greatly reduces maintenance pressure and makes configuration updates more flexible and efficient.
[0049] In some embodiments of the present application, in order to ensure that the dynamic resource preloading configuration file matches the H5 page version in the APP, when the MD5 of the JS file of the H5 page changes, AI can be triggered to analyze the latest version of the JS file.
[0050] In step 120, when a user touch operation on a page jump control is detected, the target page URL of the page to be jumped to is obtained, and the configuration item corresponding to the target page URL is queried by reading the dynamic resource preloading configuration file.
[0051] In step 120, the page to be redirected is an HTML5 page within the app. The page jump control is used to trigger the app to jump from the current interface to the page to be redirected. For example, the page jump control can be a page link of the page to be redirected, and the touch operation is a user clicking on the page link. This application does not impose specific restrictions on this. The target page URL is the page URL of the page to be redirected. By querying the target page URL in the dynamic resource preloading configuration file, the corresponding configuration item can be obtained.
[0052] In some embodiments of the present application, in order to ensure that dynamic resources are loaded smoothly in the page to be redirected, the above-mentioned querying of the configuration item corresponding to the target page URL by reading the dynamic resource preloading configuration file may specifically include the following steps:
[0053] Query the target page URL in the dynamic resource preloading configuration file and obtain the query result;
[0054] If the query result indicates that the target page URL exists, obtain the configuration item corresponding to the target page URL;
[0055] When the query result indicates that the target page URL does not exist, the dynamic resources in the page to be jumped to are loaded by calling the js method.
[0056] In an embodiment of the present application, when the client needs to load a page to be redirected containing dynamic resources, a query operation of the dynamic resource preloading configuration file is executed. Specifically, the system first queries the target page url in the dynamic resource preloading configuration file. If the query result indicates that the target url has an associated configuration item, the configuration item can be directly read to perform preloading, avoiding the client from repeatedly initiating resource request path calculation and reducing dynamic resource loading delays. If the query result indicates that the target page url does not have a predefined configuration, it means that the configuration file does not contain the configuration item of the page to be redirected, so the backup loading mechanism is started, and the dynamic resource is loaded in real time when the page jumps by calling the resource loading method of the JavaScript runtime environment, such as fetch() or XMLHttpRequest function. In this way, a hierarchical resource preloading strategy system is constructed through the coordinated operation of the structured configuration file and the dynamic loading method. When the target page url has no preconfiguration item, it automatically switches to the JavaScript native loading method, effectively avoiding the risk of resource loading interruption caused by incomplete configuration files. In this way, through the dual-channel guarantee of configuration file and dynamic loading, it is ensured that no matter how the configuration file status changes, dynamic resources can be successfully loaded in a verifiable manner during page jumps.
[0057] Involving step 130, based on the configuration item corresponding to the target page URL, a dynamic resource request for the page to be jumped to is generated, and the response data returned by the dynamic resource request is cached to obtain preloaded dynamic data.
[0058] In step 130, the configuration items include the interface address (resource path) of the request interface when requesting the dynamic resource in the page to be jumped, the request type, and the required request parameter name and request header name. Based on this, the client can automatically generate a standardized dynamic resource request. The request is transmitted to the server-side resource processing engine via the HTTP protocol and returns response data to the client. The response data is dynamic data. After receiving the response data, dynamic resource preloading can be achieved, and the response data can be persistently stored in the client's preloading cache area to obtain preloaded dynamic data, and key-value pair structured storage is used.
[0059] In some embodiments of the present application, generating a dynamic resource request for a page to be redirected based on a configuration item corresponding to the target page URL may include:
[0060] Get the first parameter value corresponding to the request parameter name in the configuration item and the second parameter value corresponding to the request header name from the app local cache and the parameters carried in the target page URL;
[0061] Based on the first parameter value, the second parameter value, and the interface address and request type carried in the configuration item, a dynamic resource request of the page to be jumped is constructed, and the dynamic resource request is used to send the assembled first parameter value and second parameter value to a request interface corresponding to the interface address according to the request type.
[0062] Specifically, the client can parse the query string (such as userId = 123 & token = abc) carried by the target page url, and simultaneously scan the APP local cache (such as localStorage or AsyncStorage) to double obtain the first parameter value corresponding to the request parameter name (such as userId) and the second parameter value corresponding to the request header name (such as Authorization) defined in the configuration item; the obtained first parameter value (request body data) and second parameter value (request header data) are logically assembled with the interface address (such as https: / / api.example.com / data) and request type (such as POST) in the configuration item to generate a standard request object conforming to the HTTP protocol specification, and the request object can be sent to the corresponding request interface through the system network module of the client to realize parameter dynamic injection and transmission.
[0063] In the embodiment of the application, the resource path, request method, and parameter name required for loading dynamic resources are predefined in the configuration item, so when the client parses the configuration item, the authentication parameter value in the APP local cache can be directly used to construct the request header, avoiding repeated calls to the authorization interface, saving computing overhead, and automatically extracting real-time business parameters (such as product ID) carried by the target page url to inject the request body, ensuring the integrity of parameter transmission. In this way, the dynamic resource request of the page to be jumped can be quickly constructed, reducing the time consumption of request construction, thereby ensuring the timeliness of dynamic resource preloading in high-concurrency scenarios such as e-commerce promotion, and eliminating the risk of parameter misplacement / loss caused by manual coding of requests through the standardized assembly process of the configuration item, improving the reliability and execution efficiency of the dynamic resource request.
[0064] In some embodiments of the application, if there are multiple request parameter names and request header names in the configuration item, in order to ensure the integrity of the request parameters of the dynamic resource request, the method can further include:
[0065] The first parameter value corresponding to the request parameter name and the second parameter value corresponding to the request header name in the configuration item are obtained from the runtime environment information, global state information, and security storage information of the APP.
[0066] As a specific example, the configuration item of the page to be jumped is as follows:
[0067] "h5PageUrl":"https: / / app.job.com / job / detail.html",
[0068] "dataApi":{
[0069] "url":"https: / / api.job.com / v1 / job / detail",
[0070] "method":"GET",
[0071] "requiredParams":["job_id","user_id","city_code"],
[0072] "requiredHeaders":["Authorization","App-Version"].
[0073] The interface address defined by this configuration item is https: / / api.job.com / v1 / job / detail, the request type is "GET", the request parameter name requiredParams contains "job_id", "user_id", "city_code", and the request header name requiredHeaders contains "Authorization", "App-Version".
[0074] Based on this, the client obtains the configuration item, and according to the request parameter name and request header name listed in the configuration information, finds the corresponding specific value: the first parameter value of job_id is obtained by parsing the target page url parameter; the first parameter value u12345 is obtained by reading the current_user_id in the App local cache (SharedPreferences / Keychain); the second parameter value of App-Version is obtained from the App runtime environment information; the first parameter value of city_code is obtained from the App global state information (LocationManager.cityCode); and the second parameter value of login credential Authorization is obtained from the APP security storage information.
[0075] Therefore, the application can obtain the parameter values of the required request parameter names and request header names from the multi-dimensional information, ensure the integrity of the HTTP request parameters, and make the App construct a complete and reliable dynamic resource acquisition request according to the configuration information and the assembled parameters, so as to ensure that the returned dynamic resource response data is obtained smoothly.
[0076] In some embodiments of the application, the step of caching the response data returned by the dynamic resource request in step 130 to obtain preloaded dynamic data can specifically include the following steps:
[0077] The server end receives the response data returned based on the dynamic resource request and performs structured analysis processing on the response data, extracts the effective data body and removes unnecessary response fields;
[0078] Metadata identifiers are added to the parsed effective data body, and the metadata identifiers at least include data generation timestamps, data version numbers and data source identifiers;
[0079] The effective data body with the metadata identifiers is stored in association with the target page url in the multi-level cache system to construct structured preloaded dynamic data.
[0080] Specifically, the effective data body refers to a core data set extracted from the (original) response data, which carries business semantic functions and is directly associated with the display logic of the page to be jumped. It has business functionality, contains a minimum complete data set for triggering dynamic rendering of the page, and has structural certainty, and follows a pre-defined architecture description rule (such as JSON Schema).
[0081] The unnecessary response field refers to an auxiliary information unit in the original response data that does not participate in business logic execution and does not affect the dynamic rendering result, including protocol control fields (such as HTTP status code, code, message), auxiliary management fields (such as pagination), debugging information fields (such as _debug, _type name), etc. The application can remove the unnecessary response fields in the original response data through a regular expression filtering mechanism.
[0082] The metadata identifier is a traceable control label bound to the effective data body, which is used to perform version checking on the preloaded dynamic data before the page to be jumped renders the dynamic resource, and only performs the rendering operation after the version checking is passed.
[0083] Exemplarily, the data generation timestamp can be coordinated universal time using the ISO 8601 standard format, the data version number can be a semantic version control protocol, and the data source identifier can be an infrastructure topology coding rule.
[0084] In the embodiment of the present application, by pre-executing the structured parsing process of the response data before the preloading stage, a fast processing channel for dynamic resource preloading is constructed, and data parsing and metadata identifier injection are directly performed when the original response data is received, so that the overall time consumption of the preloading operation is effectively shortened. At the same time, the data is processed in the preloading stage, which saves more computing resources than scattered processing. In this way, the data parsing time consumption is separated from the rendering stage through the pre-operation, directly reducing the loading time perceived by the user. Moreover, by adding the metadata identifier (timestamp + version number + source identifier) in the dynamic data, a verifiable cache trust chain is constructed, and the metadata identifier verification can automatically intercept the version invalid data, thereby ensuring that the preloading dynamic data injected into the page meets the timeliness requirements of the business logic.
[0085] When the static resources of the page to be jumped are loaded, the preloading dynamic data is obtained and injected into the page to be jumped for page display.
[0086] In step 140, the client starts to request static resources by calling a js method after opening the page to be jumped, and renders a static framework based on the obtained static resources. When the static framework is rendered, it indicates that the static resource loading is completed. Specifically, after the browser completes the loading and parsing of the static resources (HTML / CSS / JS), it will first render the static content (including the skeleton screen, basic layout, etc.). At this time, the user can see the page framework, but the dynamic resource placeholder container in the page is in an empty state. Then, the preloading dynamic data is obtained and injected into the static framework of the page to be jumped, the placeholder elements in the static framework are updated, and the dynamic content area is filled, such as filling data in the table, updating user information, etc., to complete the page display of the dynamic resources.
[0087] In this way, by forcibly limiting the preloading dynamic data to be obtained only after the static resource loading is completed, the following is achieved: critical rendering path (CRP) optimization: priority is given to the generation of static framework such as CSSOM construction and DOM tree rendering, and the injection of dynamic data is avoided to trigger Reflow and Repaint, thereby reducing the layout jitter amplitude; data state consistency: the static framework rendering completion flag indicates that the page data binding point is ready, and the injection of dynamic data can directly trigger view update (such as Virtual DOM Diff of Vue), thereby avoiding the binding invalidation caused by data loading before template loading and reducing the data empty rendering rate; resource loading isolation: the network thread focuses on transmitting static resources, and dynamic data can be extracted from local cache, so as to avoid competing for network resources.
[0088] In the related art, the loading of static data and dynamic data of the H5 page is performed in series, which is a synchronous and ordered request process. Therefore, the overall time consumption of the loading process is relatively long, especially in a weak network environment, which affects the "second opening" experience.
[0089] In some embodiments of the present application, in order to improve the preloading efficiency of static resources and dynamic resources, the client can include a preloading helper, and the preloading process of static resources and dynamic resources is performed in parallel. The method can further include the following steps:
[0090] In the case where the user's touch operation on the page jump control is monitored, the preloading process of the dynamic resource is performed asynchronously by the preloading helper, which specifically includes: querying the configuration item corresponding to the target page url by reading the dynamic resource preloading configuration file; based on the configuration item corresponding to the target page url, generating a dynamic resource request of the page to be jumped, and caching the response data returned by the dynamic resource request to obtain preloaded dynamic data.
[0091] Loading the static resources of the page to be jumped includes: in the case of jumping to the page to be jumped, the preloading process of the static resources is performed by the H5 side calling the js method, and the static framework is rendered in the page to be jumped based on the static resources.
[0092] Specifically, when the user's touch operation triggers the preloading helper to perform the dynamic resource request asynchronously (time point T0), the system synchronously starts the target page jump process (time point T0+Δt), at which time the H5 side independently calls the JS method to load the static resources (time point T1). Compared with the traditional serial loading mode, the dynamic resource preloading no longer blocks the main thread rendering process, and the network layer transmits the static resources (CSS / JS) and dynamic data streams (JSON / Binary) in parallel, shortening the total loading time of a single jump of the H5 page.
[0093] In the embodiments of the present application, the preloading process introduces a "preloading helper" module. When the user clicks the button to inform that the H5 page is about to be opened, the preloading process of the dynamic resource is performed asynchronously by the preloading helper. At the same time, after the H5 page is opened, the preloading process of the static resource is performed by the H5 side. In this way, through the parallel resource scheduling architecture of the preloading helper and the H5 side, the time dimension decoupling of the static resource and the dynamic resource preloading process is realized, the static resource and the dynamic resource can be managed separately and requested in parallel, the request process is more refined, the static resource and the dynamic resource are requested separately and in parallel, the resource loading order is reasonably arranged, the resource loading block is avoided, and the dynamic resource loading is changed into an asynchronous process through parallel processing, which greatly reduces the overall time consumption, and further reduces the overall resource loading time through the double preloading channel in parallel.
[0094] In some embodiments of the present application, in order to further improve the preloading efficiency, the resource loading strategy can be flexibly adjusted according to actual needs, such as preferentially loading key resources in dynamic resources and delaying loading non-key resources.
[0095] In some embodiments of the present application, the step 140 of obtaining the preloaded dynamic data after the static resources of the page to be jumped are loaded can specifically include:
[0096] After the static resources of the page to be jumped are loaded, the H5 side requests the preloaded dynamic data from the native client through the communication channel of the JavaScript Bridge.
[0097] Specifically, the following steps are included:
[0098] S1. Request generation: the HTML5 side generates a preloaded data request instruction by calling a JavaScript interface when parsing page logic;
[0099] S2. Bridge communication: the preloaded data request instruction is transmitted to the native client through the communication channel of the JavaScript Bridge, triggering the preloaded resource retrieval process of the native side, and retrieving the preloaded dynamic data corresponding to the page to be jumped;
[0100] S3. Result response: receiving the preloaded dynamic data returned by the native client through the JS Bridge.
[0101] In the embodiments of the present application, the preloaded dynamic data corresponding to the dynamic resources is triggered as soon as the static resources are loaded, eliminating the blocking delay of waiting for the response of the dynamic interface in the traditional scheme, and the preloaded dynamic data directly drives the H5 page state initialization, which can skip the resource loading and parsing process, based on the timing coordination of static resource loading completion and cache data injection, reducing the page rendering time and improving the page rendering performance.
[0102] As a specific example, Figure 2 is a flowchart of a page dynamic resource preloading method provided by another embodiment of the present application, as Figure 2 shown, the page dynamic resource preloading method can specifically include a configuration data process and a page loading process. In the configuration data process, after generating static resources such as html and CSS after building the h5 page, the AI large model can be used to analyze the static resources, generate configuration data (i.e. configuration items) such as links and parameters of dynamic resources required for page display, and deploy these configuration data on the server. In this way, the client app can obtain these configuration data through an interface when starting.
[0103] During the page loading process, when the app is about to open the H5 page, the user clicks a button on page A (the current page), and in response to the touch operation, triggers the page loading process, passes the page url of the target H5 page (i.e., the page to be jumped to) to the preloading helper, and notifies that the target H5 page is about to be opened.
[0104] The preloading process of the dynamic resource is then performed asynchronously by the preloading helper, which specifically includes: determining whether data needs to be preloaded, when data needs to be preloaded, querying the configuration item corresponding to the target page url by reading the dynamic resource preloading configuration file, generating a dynamic resource request for the page to be jumped to based on the configuration item corresponding to the target page url, and caching the response data returned by the dynamic resource request to obtain preloaded dynamic data.
[0105] At the same time, when jumping from page A to the target H5 page, the static resource is requested by the H5 side, and after the static resource is loaded, the H5 side requests the dynamic resource from the preloading helper. At this time, the preloading helper returns the dynamic resource data (i.e., the preloaded dynamic data) to the H5 side, and uses the dynamic resource data to render the target H5 page, completes the page display, and then can continue to respond to other operations of the user on the rendered target H5 page.
[0106] In related technologies, the preloaded data depends on the specific page logic structure. If the H5 page is updated in the background but the client still injects data according to the old logic, it will inevitably cause data-template misplacement.
[0107] In some embodiments of the present application, in order to ensure that the dynamic resource in the page to be jumped to can be successfully rendered, each configuration item can also be used to define a version identifier associated with the key information. Before injecting the preloaded dynamic data into the page to be jumped to for page display, the method can further include:
[0108] By comparing the version identifier in the configuration item corresponding to the target page url with the latest version identifier embedded in the page to be jumped to, the preloaded dynamic data is version checked;
[0109] In the case where the two version identifiers are inconsistent, it is determined that the page logic of the page to be jumped to has been updated, and the loading of the dynamic resource is performed through the H5 side calling a js method.
[0110] Specifically, a version identifier is embedded in the page to be redirected. This version identifier is generated during build time and matches the logic code of the current page to be redirected, so it is the latest version identifier. In addition to business data, the configuration items of the dynamic resource preloading configuration file also contain a version identifier for the preloaded resource configuration. This identifier is obtained by the native client from the configuration file of the page to be redirected (this configuration file needs to be updated along with the preloading mechanism).
[0111] When the H5 page receives preloaded dynamic data through JS Bridge, it compares the version identifier in the preloaded dynamic data with the latest version identifier embedded in the page. If they don't match, it means the preload configuration file for the dynamic resource has expired (that is, the page logic has been updated in real time, but the configuration items have not been updated in time). In this case, the H5 page will ignore the preloaded dynamic data and instead initiate a network request to load the dynamic resource.
[0112] This approach automatically intercepts the risk of preloaded data becoming invalid due to H5 page logic updates before dynamic data is injected, by comparing the predefined version identifier in the configuration item in real time with the version identifier actually embedded in the page being redirected. Subsequently, a JavaScript method is used to dynamically load the path instead of the preload path, ensuring strict data-view matching after page logic iterations. This ensures consistency between preloaded dynamic data and page logic, preventing the injection of old versions of preloaded dynamic data into the latest version of the H5 page and ensuring that dynamic resources on the page being redirected can be rendered smoothly.
[0113] In some embodiments of the present application, the version identifier may include a front-end logic layer version number and a data content layer version number. The front-end logic layer version number is used to identify the page frame version, and the data content layer version number is used to identify the data content version. The front-end logic layer version number may be used as the main version number.
[0114] Perform version coordination verification during HTML5 side loading: compare the logic layer version number embedded in the page to be redirected with the logic layer version number in the preloaded dynamic data, requiring the main version number to be consistent; verify that the data content layer version number of the preloaded dynamic data is not lower than the minimum compatible data version required by the logic of the current page to be redirected; only when the dual version number verification passes, use the preloaded dynamic data to render the page to be redirected.
[0115] In this way, by separating the version identifiers of the page framework and data content, independent control of the "front-end release rhythm" and "data iteration speed" can be achieved, supporting agile updates while ensuring compatibility.
[0116] Corresponding to the method embodiment of the present application, the present application also provides a device for preloading dynamic resources of a page, which can be applied to a client.
[0117] Figure 3 This is a schematic diagram of the structure of a device for preloading dynamic resources on a page provided by an embodiment of the present application. Figure 3 As shown, the page dynamic resource preloading device 300 may include: an acquisition module 310 , a query module 320 , a preloading module 330 , and a rendering module 330 .
[0118] Among them, the acquisition module is used to obtain the dynamic resource preloading configuration file by calling the target configuration interface when the APP is started, wherein the dynamic resource preloading configuration file includes configuration items corresponding to the page URLs of multiple H5 pages in the APP, and each configuration item is used to define the key information required for requesting the dynamic resources of the corresponding H5 page. The key information includes the interface address of the request interface for requesting dynamic resources, the request type, and the request parameter name and request header name required for requesting dynamic resources; the query module is used to obtain the target page URL of the page to be jumped when the user's touch operation on the page jump control is detected, and query the configuration item corresponding to the target page URL by reading the dynamic resource preloading configuration file; the preloading module is used to generate a dynamic resource request for the page to be jumped based on the configuration item corresponding to the target page URL, and cache the response data returned by the dynamic resource request to obtain preloaded dynamic data; the rendering module is used to obtain the preloaded dynamic data after the static resources of the page to be jumped are loaded, and inject the preloaded dynamic data into the page to be jumped for dynamic resource rendering.
[0119] The page dynamic resource preloading device provided by the embodiment of the present application will only execute the preloading step of dynamic resources when it detects the user's touch operation on the page jump control, that is, the dynamic resource is requested only when it is needed. The preloading timing has changed. On the one hand, the amount of preloaded dynamic resources is reduced, and on the other hand, the preloaded data will not expire due to long-term non-use, which can reduce the preloading network resource consumption. On this basis, the preloading step of dynamic resources has also changed. Specifically, the present application pre-configures the key information required for loading the dynamic resources of multiple H5 pages in the APP in the dynamic resource preloading configuration file, and each H5 page is associated with a configuration item. In this way, when the user's touch operation triggers a page jump, the target page url of the page to be jumped can be used to query the configuration item corresponding to the page to be jumped from the dynamic resource preloading configuration file, and the key information contained in the configuration item can be used to generate a dynamic resource request for the page to be jumped, thereby using the dynamic resource request to obtain the dynamic resource data in the page to be jumped. After caching it, the preloaded dynamic data that has been loaded can be obtained. In this way, when the static resources of the page to be jumped to are loaded, the preloaded dynamic data can be directly reused and injected into the page to be jumped to for dynamic resource rendering. The timing of dynamic resource preloading is reasonably arranged, and the blocking of resource loading is avoided, thereby improving the page loading efficiency.
[0120] In some embodiments of the present application, the preloading module includes: an acquisition unit, used to obtain the first parameter value corresponding to the request parameter name in the configuration item and the second parameter value corresponding to the request header name from the APP local cache and the parameters carried by the target page URL; a request construction unit, used to construct a dynamic resource request for the page to be jumped to based on the first parameter value, the second parameter value and the interface address and request type carried in the configuration item, and the dynamic resource request is used to send the assembled first parameter value and second parameter value to the request interface corresponding to the interface address according to the request type.
[0121] In some embodiments of the present application, there are multiple request parameter names and request header names in the configuration item, and the acquisition unit is also used to: obtain the first parameter value corresponding to the request parameter name in the configuration item and the second parameter value corresponding to the request header name from the runtime environment information, global status information and security storage information of the APP.
[0122] In some embodiments of the present application, the preloading module is specifically used to: receive response data returned by the server based on a dynamic resource request, and perform structured parsing on the response data, extract the valid data body and remove non-essential response fields; add metadata identifiers to the parsed valid data bodies, and the metadata identifiers include at least the data generation timestamp, the data version number and the data source identifier; associate the valid data body with the metadata identifier with the target page URL and store it in a multi-level cache system to construct structured preloaded dynamic data.
[0123] In some embodiments of the present application, the page URL and key information corresponding to the H5 page are obtained by inputting the JS file of the H5 page into a preset artificial intelligence model and then identifying it. The dynamic resource preloading configuration file is stored on the server side, and the target configuration interface is used to return the dynamic resource preloading configuration file to the client.
[0124] In some embodiments of the present application, the query module is specifically used to: query the target page URL in the dynamic resource preloading configuration file to obtain the query result; when the query result indicates that the target page URL exists, obtain the configuration item corresponding to the target page URL; when the query result indicates that the target page URL does not exist, load the dynamic resources in the page to be jumped to by calling the js method.
[0125] In some embodiments of the present application, the rendering module is specifically used to: when the static resources of the page to be jumped to are loaded, the H5 side requests the native client to preload dynamic data through the communication channel of JavaScript Bridge.
[0126] In some embodiments of the present application, each configuration item is also used to define a version identifier associated with key information, and also includes: a verification module, which is used to perform version verification on the preloaded dynamic data by comparing the version identifier in the configuration item corresponding to the target page URL with the latest version identifier embedded in the page to be jumped to before injecting the preloaded dynamic data into the page to be jumped to for page display; the preloading module is also used to determine that the page logic of the page to be jumped to has been updated when the two version identifiers are inconsistent, and to load dynamic resources by calling the js method on the H5 side.
[0127] In some embodiments of the present application, the client includes a preloading helper, and the preloading process of static resources and dynamic resources is carried out in parallel. The preloading module includes: a preloading helper, which is used to asynchronously execute the preloading process of dynamic resources when a user's touch operation on the page jump control is detected; an H5 side, which is used to call the js method to execute the preloading process of static resources when jumping to the page to be jumped.
[0128] The page dynamic resource preloading device provided in the embodiment of the present application can achieve Figure 1-2 The various processes implemented by the service platform in the method embodiment can achieve the same technical effect. To avoid repetition, they will not be described here.
[0129] Figure 4 This is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application.
[0130] like Figure 4 As shown, the electronic device 400 includes a memory 401 , a processor 402 , and a computer program stored in the memory 401 and executable on the processor 402 .
[0131] In an example, the processor 402 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.
[0132] The memory 401 may include a read-only memory (ROM), a random access memory (RAM), a magnetic disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical or other physical / tangible memory storage device. Therefore, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the page dynamic resource preloading method in the embodiment according to the first aspect of the present application.
[0133] The processor 402 runs a computer program corresponding to the executable program code by reading the executable program code stored in the memory 401, so as to implement the page dynamic resource preloading method in the embodiment of the first aspect.
[0134] In some examples, the electronic device 400 may further include a communication interface 403 and a bus 410. Figure 4 As shown, the memory 401 , the processor 402 , and the communication interface 403 are connected via a bus 410 and communicate with each other.
[0135] The communication interface 403 is mainly used to implement communication between the modules, devices, units and / or equipment in the embodiment of the present application. Input devices and / or output devices can also be connected through the communication interface 403.
[0136] The bus 410 includes hardware, software, or both that couples the components of the electronic device 400 to each other. By way of example and not limitation, the bus 410 may include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-E) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses, or a combination of two or more of the above. Where appropriate, the bus 410 may include one or more buses. Although embodiments herein describe and illustrate a particular bus, this application contemplates any suitable bus or interconnect.
[0137] The electronic device provided in the embodiment of the present application can realize Figure 1-2 The various processes implemented by the electronic device in the method embodiment can achieve the same technical effect, and to avoid repetition, they will not be described here.
[0138] In conjunction with the method for preloading dynamic resources on a page in the above embodiments, embodiments of the present application may provide a computer storage medium for implementation. The computer storage medium stores computer program instructions; when the computer program instructions are executed by a processor, the steps of any of the methods for preloading dynamic resources on a page in the above embodiments are implemented.
[0139] In conjunction with the method for preloading dynamic resources on a page in the above embodiments, embodiments of the present application may provide a computer program product for implementation. The (computer) program product is stored in a non-volatile storage medium, and when executed by at least one processor, the program product implements the steps of any of the methods for preloading dynamic resources on a page in the above embodiments.
[0140] The embodiment of the present application further provides a chip, which comprises a processor and a communication interface, the communication interface is coupled with the processor, the processor is used for running programs or instructions, realizes each process of the page dynamic resource preloading method embodiment, and can achieve the same technical effects. To avoid repetition, details are not repeated here.
[0141] It should be understood that the chip mentioned in the embodiment of the present application can also be referred to as a system chip, a system chip, a chip system or a system on chip, etc.
[0142] It should be clear that the present application is not limited to the specific configurations and processes described above and shown in the drawings. For the sake of brevity, detailed descriptions of known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method processes of the present application are not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between steps, after understanding the spirit of the present application.
[0143] The functional blocks shown in the structural block diagram described above can be implemented as hardware, software, firmware or their combination. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a functional card, etc. When implemented in software, the elements of the present application are program or code segment used to perform the required tasks. The program or code segment can be stored in a machine readable medium or transmitted on a transmission medium or communication link through a data signal carried in a carrier wave. The "machine readable medium" can include any medium capable of storing or transmitting information. Examples of machine readable medium include electronic circuit, semiconductor memory device, ROM, flash memory, erasable ROM (EROM), floppy disk, CD-ROM, optical disk, hard disk, optical fiber medium, radio frequency (RF) link, etc. The code segment can be downloaded via a computer network such as the Internet, an intranet, etc.
[0144] It should be further noted that the exemplary embodiments mentioned in the present application describe some methods or systems based on a series of steps or devices. However, the present application is not limited to the order of the above steps, that is, the steps can be executed in the order mentioned in the embodiments, or in an order different from the embodiments, or several steps can be executed simultaneously.
[0145] Aspects of the present disclosure have been described above with reference to the flowcharts and / or block diagrams of the methods, devices (systems) and computer program products according to the embodiments of the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the implementation of the function / action specified in one or more boxes of the flowchart and / or block diagram. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor or a field programmable logic circuit. It is also understood that each box in the block diagram and / or flowchart and the combination of the boxes in the block diagram and / or flowchart can also be implemented by dedicated hardware that performs the specified function or action, or can be implemented by a combination of dedicated hardware and computer instructions.
[0146] The above description is only a specific embodiment of the present application. Those skilled in the art will clearly understand that for the convenience and brevity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the scope of protection of the present application is not limited thereto. Any person skilled in the art can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the scope of protection of the present application.
Claims
1. A method for preloading dynamic resources of a page, characterized in that: Applied to the client, including: When the app is started, the target configuration interface is called to obtain a dynamic resource preloading configuration file. The dynamic resource preloading configuration file includes configuration items corresponding to the page uniform resource locators (URLs) of multiple H5 pages in the app. Each configuration item is used to define the key information required for requesting the dynamic resources of the corresponding H5 page. The key information includes the interface address of the request interface for requesting dynamic resources, the request type, and the request parameter name and request header name required for requesting dynamic resources. When a user touches a page jump control, the target page URL of the page to be jumped to is obtained, and the configuration item corresponding to the target page URL is queried by reading the dynamic resource preloading configuration file; Generate a dynamic resource request for the page to be redirected based on the configuration item corresponding to the target page URL, and cache the response data returned by the dynamic resource request to obtain preloaded dynamic data; When the static resources of the page to be redirected are loaded, the preloaded dynamic data is obtained and injected into the page to be redirected for dynamic resource rendering.
2. The method according to claim 1, characterized in that Based on the configuration item corresponding to the target page URL, a dynamic resource request for the page to be redirected is generated, including: Obtain the first parameter value corresponding to the request parameter name in the configuration item and the second parameter value corresponding to the request header name from the APP local cache and the parameters carried in the target page URL; Based on the first parameter value, the second parameter value, and the interface address and request type carried in the configuration item, a dynamic resource request for the page to be jumped to is constructed. The dynamic resource request is used to send the assembled first parameter value and second parameter value to the request interface corresponding to the interface address according to the request type.
3. The method according to claim 2, characterized in that There are multiple request parameter names and request header names in the configuration item, and the method further includes: Obtain a first parameter value corresponding to the request parameter name in the configuration item and a second parameter value corresponding to the request header name from the runtime environment information, global state information, and secure storage information of the APP.
4. The method according to claim 1, wherein Cache the response data returned by the dynamic resource request to obtain preloaded dynamic data, including: Receive the response data returned by the server based on dynamic resource requests, perform structured parsing on the response data, extract the valid data body and remove unnecessary response fields; Adding metadata identification to the parsed valid data body, wherein the metadata identification includes at least a data generation timestamp, a data version number, and a data source identifier; The valid data body with metadata identifier is associated with the target page URL and stored in a multi-level cache system to build structured pre-loaded dynamic data.
5. The method according to claim 1, wherein The page URL and key information corresponding to the H5 page are obtained by inputting the JS file of the H5 page into a preset artificial intelligence model and then identifying it. The dynamic resource preloading configuration file is stored on the server side, and the target configuration interface is used to return the dynamic resource preloading configuration file to the client.
6. The method according to claim 1, characterized in that The configuration items corresponding to the target page URL are queried by reading the dynamic resource preloading configuration file, including: Query the target page URL in the dynamic resource preloading configuration file to obtain a query result; If the query result indicates that the target page URL exists, obtain the configuration item corresponding to the target page URL; When the query result indicates that the target page URL does not exist, the dynamic resources in the page to be jumped to are loaded by calling the js method.
7. The method according to claim 1, characterized in that When the static resources of the page to be redirected are loaded, the preloaded dynamic data is obtained, including: When the static resources of the page to be redirected are loaded, the H5 side requests the native client to preload the dynamic data through the communication channel of JavaScript Bridge.
8. The method according to claim 1, characterized in that Each configuration item is further used to define a version identifier associated with key information. Before injecting the preloaded dynamic data into the page to be redirected for page display, the method further includes: Perform version verification on the preloaded dynamic data by comparing the version identifier in the configuration item corresponding to the target page URL with the latest version identifier embedded in the page to be redirected; When the two version identifiers are inconsistent, it is determined that the page logic of the page to be redirected has been updated, and the dynamic resources are loaded by calling the js method on the H5 side.
9. The method according to claim 1, characterized in that The client includes a preloading helper, and the preloading process of static resources and dynamic resources is performed in parallel. The method further includes: When a user touches the page jump control, the preloading helper asynchronously executes the preloading process of dynamic resources. When jumping to the page to be jumped, the H5 side calls the js method to execute the preloading process of static resources.
10. An electronic device, characterized in that: The electronic device comprises: a processor and a memory storing computer program instructions; and when the electronic device executes the computer program instructions, the method according to any one of claims 1 to 9 is implemented.
Citation Information
Cited By
Target webpage loading method and device, storage medium and electronic device
CN121478372A
Point cloud and image annotation resource loading method and system and storage medium
CN121479075A
