H5 page loading control method and device, computer equipment and medium

Abstract

The invention relates to an H5 page loading control method and device, computer equipment and a medium. The method comprises the following steps: in response to a loading request of an H5 page, calling a preloading function to obtain a key interface and resources corresponding to the H5 page in a cache, obtaining a return result of the preloading function, extracting response time in the return result, and the key interface, resources and response time corresponding to the H5 page, and sending the response time to the H5 page; and when the key interface and the resource in the return result are in an effective state and a difference value between the response time and the current time is within a preset range, loading the H5 page according to the key interface and the resource in the return result. By adopting the method, the overall loading speed of the H5 page can be increased.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a method, device, computer equipment and medium for controlling H5 page loading. Background Art

[0002] H5 page loading refers to a series of processes starting from the user triggering the access to the H5 page, to the browser obtaining all the necessary resources of the page and completing the parsing and rendering of the page, and finally presenting the complete interactive H5 page to the user. It includes domain name resolution, establishing a connection with the server, requesting and receiving various resource files, parsing these resources and building the page structure and application style, executing JavaScript code to add interactive functions, and drawing and displaying the page content in the browser window. Its purpose is to provide users with a complete, usable H5 page with a good experience.

[0003] In traditional H5 page loading technology, the required key interfaces and resources are usually requested in sequence in the normal order during the page loading process, that is, the corresponding request is not initiated until the page is parsed to find that a certain interface or resource is needed.

[0004] In traditional technology, during the page loading process, it is necessary to wait in real time for the request of each interface and resource to return, which will result in a long page loading time. Especially in poor network conditions or slow server response, the page may be blank or incompletely loaded for a long time, affecting the page loading speed. Summary of the invention

[0005] Based on this, it is necessary to provide a control method, device, computer equipment and medium for H5 page loading that can improve the overall loading speed of H5 pages in response to the above technical problems.

[0006] In a first aspect, the present application provides a method for controlling H5 page loading, comprising:

[0007] In response to the H5 page loading request, the preloading function is called to obtain the key interfaces and resources corresponding to the H5 page in the cache;

[0008] Get the return result of the preload function, and extract the response time, key interfaces, resources and response time corresponding to the H5 page from the return result;

[0009] When the key interfaces and resources in the returned results are valid and the difference between the response time and the current time is within a preset range, the H5 page is loaded according to the key interfaces and resources in the returned results.

[0010] In one embodiment, the method for controlling H5 page loading further includes:

[0011] Collect resource loading time, white screen time, and user interactive time;

[0012] Monitor the loading of H5 pages based on resource loading time, white screen time, and user interactive time.

[0013] In one embodiment, collecting resource loading time, white screen time, and user interactive time includes:

[0014] Collect the time when the browser starts loading a new page, when the parent view controller is created, when the page elements are first drawn, and when the page becomes interactive;

[0015] Determine resource loading time based on when the browser starts loading a new page and when the parent view controller is created;

[0016] Determine the white screen time based on the time when the page elements are first drawn and the time when the parent view controller is created;

[0017] The user-interactive time is determined based on when the page became interactive and when the parent view controller was created.

[0018] In one embodiment, the method for controlling H5 page loading further includes:

[0019] When the return result of the preload function is not received within the preset time period, or the return result does not meet the preset conditions, a loading request is submitted to the server to request the key interface and resources corresponding to the H5 page;

[0020] Load the H5 page according to the key interfaces and resources corresponding to the H5 page fed back by the server;

[0021] The preset conditions are that the key interfaces and resources in the returned results are in a valid state, and the difference between the response time and the current time is within a preset range.

[0022] In one embodiment, the resource includes a static resource of an H5 page, and the control method for loading the H5 page further includes:

[0023] Get the static resources of the H5 page and the key interfaces corresponding to the H5 page in advance;

[0024] The static resources of the H5 page and the key interfaces corresponding to the H5 page are preloaded and stored in the cache.

[0025] In one embodiment, the method for controlling H5 page loading further includes:

[0026] Get the user's public information and the current application's information and store them in the cache.

[0027] In one embodiment, the static resources include image resources, cascading style sheet files, and script language files, and the control method for loading the H5 page also includes:

[0028] Classify the image resources and merge them according to the classification results;

[0029] Merge multiple CSS file resources with the same style rules according to the style rules in each CSS file in the H5 page;

[0030] According to the definitions of functions and variables in each script language file in the H5 page, multiple script language files with the same functions and variables are merged.

[0031] In a second aspect, the present application provides a control device for H5 page loading, including:

[0032] The preloading module is used to respond to the loading request of the H5 page and call the preloading function to obtain the key interfaces and resources corresponding to the H5 page in the cache;

[0033] The acquisition module is used to obtain the return result of the preload function and extract the response time, key interfaces, resources and response time corresponding to the H5 page from the return result;

[0034] The control module is used to load the H5 page according to the key interfaces and resources in the returned results when the key interfaces and resources in the returned results are in a valid state and the difference between the response time and the current time is within a preset range.

[0035] In a third aspect, the present application provides a computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the H5 page loading control method provided in any embodiment of the present application in the first aspect are implemented.

[0036] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the H5 page loading control method provided in any embodiment of the present application in the first aspect.

[0037] The control method, device, computer equipment and medium for H5 page loading mentioned above obtain key interfaces and resources in the cache by sending a pre-request when the page component is initialized, and directly use the return results of these pre-requests to load the page when certain conditions are met, avoiding requesting these key parts one by one during the page loading process, reducing the waiting time during the page loading process, and allowing the page to obtain the required resources for loading and rendering more quickly, thereby improving the overall loading speed of the H5 page. In addition, the pre-request can more accurately obtain valid key interfaces and resources in the cache, avoiding repeated requests for data already in the cache, improving the utilization rate of cache resources, reducing the burden on the server and the consumption of network traffic, and also saving resources such as power and traffic of the user device. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 A schematic diagram of a flow chart of a method for controlling H5 page loading in some embodiments;

[0039] Figure 2 A structural block diagram of a control device for H5 page loading in some embodiments;

[0040] Figure 3 1 is a diagram of the internal structure of a computer device in some embodiments. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0042] In a first aspect, the present application provides a method for controlling H5 page loading, such as Figure 1 As shown, the method is applied to a terminal as an example for description, and includes the following steps:

[0043] Step S11, in response to the loading request of the H5 page, calling the preloading function to obtain the key interface and resources corresponding to the H5 page in the cache.

[0044] Among them, H5 pages usually refer to web pages developed and constructed based on the HTML5 (HyperText Markup Language version 5) standard. Compared with traditional HTML pages, it has more powerful multimedia display capabilities (such as the ability to directly play videos and audios, etc.), better interactivity (can achieve an operating experience similar to that of native applications), and can also use local storage technologies such as localStorage. In general, it is a web page presentation form with richer functions and a more optimized experience.

[0045] The preloading function is a prewritten code logic (usually implemented in languages ​​such as JavaScript). Its function is to initiate a request for some specific resources or data in advance before the page is officially loaded and rendered, and to obtain and store the content that may be used later in advance (such as in the cache) so that it can be used quickly when the page is really needed, reducing waiting time and improving page loading speed and overall performance.

[0046] The present application specifically calls the preload function when the page component is initialized to obtain the key interface and resources corresponding to the H5 page in the cache. Among them, the page component here can be a webview (webpage view) component.

[0047] Key interfaces refer to network interfaces that play a vital role in the normal display, data interaction, and function realization of H5 pages during their operation. These interfaces connect the page to the server. By calling them, data required for page rendering can be obtained, key business operations can be performed, etc. They are an indispensable part of ensuring the integrity and normal use of the page.

[0048] Specifically, key interfaces may include:

[0049] Data acquisition interface: for example, an interface used to obtain product list data, article details, user information, etc., to provide core data for display on the page.

[0050] User authentication interface: interfaces such as login, registration, and password verification, to ensure that users can legally enter and use page-related functions.

[0051] Business operation interface: such as adding and deleting items from the shopping cart, submitting and paying for orders, etc., to implement the specific business processes carried by the page.

[0052] The resources in this application refer to the various files, data and other contents that constitute the H5 page and ensure its normal operation and display. They are the elements that the page obtains from the server and uses to build its own structure, style, interactive functions, etc.

[0053] Specifically, in this application, the code can be written in languages ​​such as JavaScript to listen to the loading request event of the H5 page, and the subsequent operation is triggered when the page starts loading. In the page component initialization phase (generally when the HTML document is parsed to a specific component and starts to be built), a predefined preload function is called. Inside the function, a request is made to a specific module using an appropriate network request method. The request clearly specifies that the key interface and resources corresponding to the H5 page are to be obtained, that is, to search and request the corresponding content according to the agreed identification, path, etc.

[0054] Furthermore, the preloading function interacts with the cache and attempts to obtain the specified key interfaces and resources from the cache. If the cache exists and meets the requirements, it will be extracted; if the cache does not exist or does not meet the conditions (such as expiration, etc.), other strategies may need to be further adopted (such as re-requesting to the server, etc.).

[0055] Furthermore, after obtaining the relevant content in the cache, these key interfaces and resources can be used for formal page loading, rendering and other operations according to the actual needs of the page. For example, the obtained data can be filled into the corresponding DOM (Document Object Model) elements, style files can be applied, etc., to help the page to be presented quickly and completely.

[0056] Step S12, obtain the return result of the preload function, and extract the response time, key interfaces, resources and response time corresponding to the H5 page in the return result.

[0057] Specifically, the terminal may wait for the preloading function to be executed and receive the result set returned by the preloading function through the corresponding variable or object attribute. The result set is usually a data structure containing multiple information, such as an object or array in JavaScript, depending on the definition and implementation of the preloading function.

[0058] In the returned result, locate the corresponding attribute names (if in object form), or the corresponding index positions (if in array form) used to store response time, key interfaces, and resources. These attribute names or index positions are usually agreed upon when the preloading function is written.

[0059] If the result is an object, get the value of the response time, which is usually a timestamp or a data type representing a time interval. If the result is an array, extract the value of the response time according to the predetermined index position where the response time is stored, such as "resultArray[2]" (assuming that the response time is stored at the array index 2).

[0060] Furthermore, if the key interface is stored in the return result in the form of an object, it may be necessary to obtain the key interface related data through something like "resultObject.keyInterfaces" (assuming the key interface attribute is named keyInterfaces). Its data structure may be an array of interface addresses or an array of objects containing detailed interface information, etc., and further processing is performed according to the actual return structure. If it is stored in other forms (such as string concatenation, nested structure, etc.), the specific content of the key interface must be extracted according to the corresponding parsing rules, such as extracting the relevant information of each interface through a string splitting function.

[0061] Furthermore, the corresponding attributes or index locations storing the relevant information of these file resources (such as file path, file content, etc.) are found in the returned results, and the specific resource data is obtained through appropriate syntax, such as "resultObject.htmlResource" to obtain the corresponding resources.

[0062] Through the above steps, the response time, key interfaces and various resource information can be accurately extracted from the return results of the preloading function, which can then be used for subsequent H5 page loading and related operations.

[0063] Step S13, when the key interfaces and resources in the returned results are in a valid state, and the difference between the response time and the current time is within a preset range, the H5 page is loaded according to the key interfaces and resources in the returned results.

[0064] Specifically, this application can verify the validity of key interfaces and resources. For each key interface, you can usually send a simple test request to the address corresponding to the interface to check whether you can receive an expected response status code (such as 200 for a normal response, etc.), so as to determine whether the interface is valid and can connect and obtain data normally.

[0065] Or check whether the data format returned by the interface meets the pre-agreed specifications, such as whether the data structure is correct, whether key fields are missing, etc. If it does not meet the requirements, the interface is considered invalid.

[0066] The application can also check resource validity:

[0067] For file resources: you can verify whether the file resources are complete. For text files, you can check whether their syntax is correct and whether they can be parsed normally by the browser, such as by using some code verification tools or trying to load and parse them in a test environment. For resources such as images, you can check their file header information to determine whether the format is correct and whether the file size meets expectations, etc., to ensure that the resources can be used normally for page display.

[0068] For data resources: you can confirm the integrity and accuracy of data resources, such as checking whether the data meets business logic requirements, whether there are missing or incorrect values, etc., to ensure that it can be used correctly after the page is loaded.

[0069] Furthermore, the present application can obtain the current time. The difference between the obtained current time and the response time extracted from the returned result is calculated to obtain the time difference. A preset range is pre-defined according to business needs and performance requirements. For example, the difference between the response time and the current time is set to be valid within 10 minutes (the specific duration depends on the actual scenario). The calculated time difference is compared with the preset range. If the difference is within the preset range, proceed to the next step to load the page; if it is not within the preset range, it may be necessary to re-initiate a request to obtain key interfaces and resources (such as re-requesting the server and other processing methods).

[0070] In one of the embodiments, the control method for H5 page loading may also include: collecting resource loading time, white screen time and user interactive time, and monitoring the loading of the H5 page according to the resource loading time, white screen time and user interactive time.

[0071] The resource loading time refers to the time from when the user clicks to open the H5 page in the App (APPlication) to when the H5 resources are pulled and the capabilities such as bridge are injected.

[0072] White screen time refers to the time from when a user clicks to open the H5 page in the App to when the page first draws any content (such as text, images, non-white background, etc.). It is used to measure how quickly a user sees actual content on the page.

[0073] User interactive time refers to the time from when the user clicks to open the H5 page in the App to when the page becomes interactive (the user can click, input, and perform other operations), reflecting the time when the user can start to use the page effectively.

[0074] Specifically, the present application may define a start time: recording the time when the page starts to initiate a request for key resources. Generally, the start time point may be recorded by using the time acquisition function provided by the programming language in an event callback function related to page loading.

[0075] Define the end time: When all the main resources of the page have finished loading, the time to obtain them again is recorded as the end time. You can listen to the event of resource loading completion and then determine the resource loading time based on the start time point and the end time.

[0076] For the white screen time, this application can start timing from the moment the user initiates a page access request (such as the moment the URL is entered in the browser and the Enter key is pressed, or the moment the link is clicked to jump), and also use the acquisition time function to record the initial time. Furthermore, the white screen time can be determined by detecting the first time the page has content drawn and recording the time at this time.

[0077] For user interactive time: Similar to the previous example, the recording starts from the page request. The end time is based on the time when the main interactive functions in the page can be used by the user. This time point is recorded by writing code to monitor the status of the interactive functions being available. The user interactive time is determined based on the recorded time.

[0078] Furthermore, the calculated data such as resource loading time, white screen time and user interactive time are stored. You can choose to store it in the local browser storage or send it to the background server for subsequent analysis and viewing.

[0079] Pre-set reasonable thresholds for each time indicator. For example, if the resource loading time exceeds 5 seconds, it is considered to be too slow, if the white screen time exceeds 3 seconds, it is abnormal, and if the user interaction time exceeds 8 seconds, it needs to be optimized. These thresholds can be set based on past experience and page performance goals.

[0080] Furthermore, each time the page is loaded or time data is collected at a set period, it is compared with the corresponding threshold. If it exceeds the threshold range, the corresponding reminder or recording operation is triggered, such as printing a warning message in the browser console to prompt that the loading is too slow, or sending an exception report to the server to indicate which specific time indicator has a problem.

[0081] By collecting multiple sets of time data, you can also analyze the changing trends of page loading performance, such as checking whether the resource loading time continues to increase with the increase of business functions, and then find out the factors that may affect the loading (such as the newly added resource files are not optimized, etc.), so as to take targeted optimization measures to improve the loading of H5 pages.

[0082] The beneficial effects of this embodiment are:

[0083] By collecting resource loading time, white screen time, and user interactive time, we can fully and accurately understand the performance of the H5 page during the loading process, clarify the time spent in each key stage, and accurately judge the speed of page loading and when users can start interactive operations, providing detailed data support for subsequent performance optimization.

[0084] These time indicators are monitored in real time and compared with preset thresholds. Once they are found to be beyond the threshold range, problems in the page loading process can be discovered in time, such as slow resource loading, long white screen time, or user interaction delay, so as to quickly locate the problem and take corresponding solutions in time.

[0085] In one of the embodiments, resource loading time, white screen time and user interactive time are collected, including: collecting the time when the browser starts loading a new page, the time when the parent view controller is created, the time when the page first draws the page elements and the time when the page is interactive, determining the resource loading time according to the time when the browser starts loading the new page and the time when the parent view controller is created, determining the white screen time according to the time when the page first draws the page elements and the time when the parent view controller is created, and determining the user interactive time according to the time when the page is interactive and the time when the parent view controller is created.

[0086] The parent view controller is a controller object that is at a relatively high level in the view hierarchy and is used to manage and coordinate multiple subviews or subview controllers. It plays a role in overall planning and organization. For example, in mobile terminal development, it is responsible for managing the view display, life cycle, and interaction with other related components of the H5 page it contains. It is a key management role in the entire view presentation system. Its specific functions and forms of expression may vary slightly under different development frameworks, but the core is to manage and control related views.

[0087] Specifically, the terminal can collect the time when the browser starts loading a new page:

[0088] In the relevant code (usually the JavaScript code part related to the front-end page loading), use the function to obtain the time to record the timestamp at this moment, store it in a variable, and set it to startLoadTime.

[0089] Collect the time when the parent view controller is created:

[0090] According to the specific development framework used, find the function or event triggered when the parent view controller is created. At this time, use the get time function to record the timestamp, which is recorded as parentCtrlCreateTime.

[0091] Collect the time when the page elements are first drawn:

[0092] You can listen to browser rendering-related events or use some performance monitoring tools. When it is detected that a DOM element is drawn for the first time on the page, that is, when visual content begins to appear on the page, use the time function to record the timestamp at this time and set it as firstDrawTime.

[0093] Collect the time when the page can be interactive:

[0094] Monitor when the main interactive functions in the page are available (for example, the button click event in the page is successfully bound, the form input box can receive input normally, etc.). When these interactive functions are ready, record the timestamp at this moment, which is recorded as interactiveTime.

[0095] Determine resource loading time (resourceLoadTime):

[0096] resourceLoadTime = startLoadTime - parentCtrlCreateTime. The time it takes to load resources is determined by calculating the time difference between the two. This is used to measure the time from the creation of the parent view controller to the time when the browser starts loading page resources until the loading is completed.

[0097] Determine the white screen time (whiteScreenTime):

[0098] The formula whiteScreenTime = firstDrawTime - parentCtrlCreateTime is used to calculate the time from the creation of the parent view controller to the first drawing of the element on the page, that is, the length of time the page is blank.

[0099] Determine the user interactive time (interactiveTime):

[0100] interactiveTime=interactiveTime-parentCtrlCreateTime (the latter interactiveTime here refers to the interactive time of the page collected earlier. To avoid confusion, it can be set to pageInteractiveTime, that is, interactiveTime=pageInteractiveTime-parentCtrlCreateTime), calculate the time from the creation of the parent view controller to the time when the page is actually available for user interaction.

[0101] Furthermore, the resource loading time, white screen time, user interactive time and other data calculated above are stored. They can be stored in the local browser, or sent to the background server through a network request in an agreed data format (such as JSON format), so as to facilitate subsequent viewing, analysis, comparison of thresholds and other operations. If it is found that the time exceeds the preset reasonable range, the corresponding reminder or optimization process is triggered, such as printing a warning message in the browser console to prompt the loading abnormality, or notifying the developer to optimize and improve the specific time indicator problem.

[0102] The beneficial effects of this embodiment are:

[0103] It can analyze the performance of the H5 page loading process from a more specific and detailed perspective. It is not just a simple understanding of the overall loading, white screen, and interactive time, but it is related to the management level of the parent view controller. By comparing and calculating with its creation time, it can more accurately locate the time spent on each stage in the entire view management system, which helps to deeply explore the specific links where the performance bottlenecks are.

[0104] When a certain time indicator is abnormal (for example, the resource loading time is too long or the white screen time exceeds a reasonable range, etc.), with the help of correlation analysis with the creation time of the parent view controller, it is possible to more accurately determine which part of the view control management link has a problem. For example, is it the untimely allocation of resources after the view is created that leads to slow loading, or is there a delay in the connection between rendering startup and view control that causes a long white screen time, etc. This allows developers to quickly identify the root cause of the problem and take more targeted optimization measures.

[0105] Based on accurate time data and problem location, we can formulate optimization strategies that fit the actual situation, effectively shorten the duration of each stage, reduce resource loading waiting and white screen phenomena, and improve the efficiency of users interacting with the page as quickly as possible, thereby comprehensively improving the loading performance of H5 pages, improving user experience, and improving page usability and user satisfaction.

[0106] In one of the embodiments, the control method for loading the H5 page may further include: when the return result of the preloading function is not received within a preset time period, or the return result does not meet the preset conditions, submitting a loading request to the server to request to obtain the key interface and resources corresponding to the H5 page, and loading the H5 page according to the key interface and resources corresponding to the H5 page fed back by the server, wherein the preset conditions are that the key interface and resources in the return result are in a valid state, and the difference between the response time and the current time is within a preset range.

[0107] Specifically, the application can set a timer and wait for the preload function to return a result. Use the timer function provided by the programming language to set a preset time period (reasonably set the duration according to business needs and network conditions, such as 5000 milliseconds or 5 seconds), and wait for the preload function to execute and return a result within this time period.

[0108] During the time specified by the timer, the system continuously monitors whether there is a return result from the preload function. If a return result is received within the preset time period, the system further verifies whether the result meets the requirements according to the preset conditions (key interfaces and resources are valid, and the difference between the response time and the current time is within the preset range); if a return result is not received after the preset time period, the system proceeds to the next step of submitting a loading request to the server.

[0109] Further, verify whether the returned result meets the preset conditions (if the returned result has been received)

[0110] For the received return result, first check whether the key interface is valid:

[0111] For each key interface, a simple test request can be sent to check whether the data format returned by the interface meets the pre-agreed specifications (for example, whether the data structure, key fields, etc. are correct) and whether it is expired, so as to determine whether the key interface is valid.

[0112] Next, verify the validity of the resources. For file resources, check whether the file is complete, verify whether the syntax of text files is correct, whether they can be parsed normally by the browser, and whether they are expired. For resources such as pictures, check the file header information to determine whether the format and file size meet expectations.

[0113] For data resources, confirm their completeness and accuracy, such as whether the data meets business logic requirements, whether there are missing or erroneous values, etc.

[0114] If the key interface and resources are valid and the time difference is within the preset range, the H5 page will be loaded according to the returned result (the loading steps include filling the interface data into the corresponding DOM element, applying the CSS file style, executing the JS file logic, and loading and displaying multimedia resources, etc., which have been mentioned above); if the preset conditions are not met, the process of submitting a loading request to the server is entered.

[0115] When no return result is received within the preset time period, or the return result does not meet the preset conditions, a loading request is sent to the server through an appropriate network request method. The request clearly states that the key interface and resources corresponding to the H5 page are to be obtained, and the request is accurately initiated according to the agreed interface address, parameters and other information.

[0116] Wait for the server to respond to the request. After receiving the request, the server will find and return the corresponding key interfaces and resource data. After receiving these key interfaces and resources fed back by the server, load them according to the business logic and layout requirements of the page:

[0117] For the data obtained by the data acquisition interface, fill it into the corresponding DOM element to realize the data display function; configure the calling logic of interfaces such as user authentication and business operations to ensure that the relevant functions of the page can be executed normally.

[0118] The HTML file is further parsed by the browser to build the basic structure framework of the page. Multimedia resources such as pictures and videos are loaded and displayed at the corresponding positions of the page, and finally the complete loading of the H5 page is completed and presented to the user.

[0119] The beneficial effects of this embodiment are:

[0120] When the preloading function fails to return results on time or the returned results do not meet the requirements, it can promptly switch to requesting resources from the server to avoid the situation where the page cannot be loaded or loading errors occur due to the lack of key interfaces and resources. This ensures that the H5 page has a greater chance of being loaded normally in various situations and improves the reliability of the loading process.

[0121] The loading strategy can be flexibly adjusted according to the actual situation of preloading, which can fully utilize the effective resources obtained by preloading in the cache to speed up page loading (when the returned results meet the preset conditions), and obtain the latest and effective resources from the server in time when preloading is not ideal, so that page loading can adapt to various complex scenarios such as different network environments, cache status and server response conditions.

[0122] In one embodiment, the resources include static resources of an H5 page, and the control method for loading the H5 page may further include: pre-acquiring the static resources of the H5 page and the key interfaces corresponding to the H5 page, pre-loading the static resources of the H5 page and the key interfaces corresponding to the H5 page and storing them in cache.

[0123] Among them, the static resources of H5 pages refer to resource files whose contents are relatively fixed during the page loading process and will not change dynamically according to user interaction or other real-time situations. These resources are usually pre-made and stored on the server. The browser obtains and displays them according to the reference of the page code, which is the basic component of building H5 pages.

[0124] Specifically, static resources can include:

[0125] HTML file: As the basic structure description file of the page, it defines the layout framework of the page, the hierarchical relationship of each element, etc. It is the foundation of the entire page presentation and tells the browser what content the page has and how to organize the content.

[0126] CSS (Cascading Style Sheets) file: mainly used to control the style of page elements, such as font size, color, type, element background, border style, as well as the overall layout of the page and other appearance attributes, so that the page has a better visual presentation effect.

[0127] JS (JavaScript) files: Although JavaScript files are often used to implement dynamic interactive functions of pages, some common and basic JS codes, such as relatively stable script contents such as implementing fixed page animation effects and initializing page layout, can also be regarded as static resources. They add regular interactive logic and functional enhancements to the page.

[0128] Image resources: including various icons, background images, product images, etc. displayed on the page, which are used to enrich the visual content of the page and make the page more attractive and readable.

[0129] Font resources: Specifies the font style used for page text, ensuring that the style characteristics of the text can be accurately displayed on different devices according to the design intent, thereby improving the overall aesthetics and standardization of the page.

[0130] Specifically, this application can analyze the composition of the H5 page, clarify which static resources need to be preloaded and the corresponding key interfaces, sort out the file lists of various static resources such as HTML, CSS, JS, pictures, fonts and their corresponding network paths, and at the same time determine the list of key interfaces to ensure the implementation of page functions (such as data acquisition interface, user authentication interface, etc. and their corresponding interface addresses).

[0131] Select the appropriate preloading technology or tool based on the environment in which the page runs (such as browser type, mobile or desktop, etc.) and the characteristics of the development framework.

[0132] Determine the cache type and storage mechanism to be used. Common ones include the browser's local cache (which can be implemented through localStorage, sessionStorage, or the browser's cache policy-related API (Application Programming Interface), etc. Different cache mechanisms have different validity periods, storage capacities, and scopes), or set up cache on the server side (for some static resources that can be shared, the server can be configured with corresponding cache rules. Then create a corresponding cache storage area and define the cache key-value pair rules. For example, use the resource's URL (Uniform Resource Locator) or unique identifier as the key, and store the resource's content (such as file data, JSON data returned by the interface, etc.) as the value to facilitate subsequent quick search and retrieval.

[0133] Furthermore, according to the configured preloading mechanism, requests for the sorted static resources and key interfaces are initiated in sequence. After receiving the data returned by the resources and interfaces, they are stored in the corresponding cache area according to the set cache rules. For example, when the image resource is preloaded, it is stored in the cache with the image URL as the key and the binary data of the image as the value.

[0134] During the preloading process, set up an exception handling mechanism, such as response strategies for request timeouts, network errors, resource format errors, etc. When an exception occurs, you can choose to re-initiate the request, record error information for subsequent analysis, or prompt the user. At the same time, according to the actual preloading effect and page performance requirements, continuously optimize the preloading order, resource selection, and caching strategy to improve the efficiency and success rate of preloading and ensure effective support for page loading.

[0135] The beneficial effects of this embodiment are:

[0136] By obtaining and caching static resources and key interfaces in advance, when the page is officially loaded, the browser can directly retrieve these prepared contents from the cache, avoiding the time of waiting for resources to be downloaded from the server one by one, greatly reducing the overall loading time of the page, allowing users to see the complete page content faster, and improving the responsiveness of the page.

[0137] Fast loading speed means that users do not have to wait for a long time, reducing the annoyance caused by slow loading, allowing the page's interactive operations to respond more promptly, and improving the fluency and comfort of users browsing pages and using functions.

[0138] In one of the embodiments, the control method for H5 page loading may further include: obtaining user public information and information of the current application program, and storing the information in a cache.

[0139] Among them, public user information refers to common user-related data that may be used in multiple functional modules or different pages in H5 applications. This information can reflect the user's basic characteristics, usage preferences, permissions, etc., and is relatively fixed within a certain range and will not change frequently.

[0140] Specifically, public user information may include:

[0141] User basic information: such as user name, avatar, gender, age, etc. Different pages may need to call this information to present it to the user or for other users to identify when displaying user-related content (such as the personal center page, the user comment area displaying the user name and avatar, etc.).

[0142] User identity: For example, the user ID is a number that uniquely identifies the user in the system. This ID is used to accurately locate the specific user in many scenarios involving user operations, data association, and permission verification.

[0143] User role and permission information: such as whether the user is a member and what functional operation permissions the user has (such as whether the user can publish articles, perform advanced filtering, etc.). Different pages determine which functional options and content to display based on the user's permissions, thereby controlling the scope of the user's behavior within the application.

[0144] User preference information: such as the user's commonly used language settings, browsing history (which reflects browsing preferences to a certain extent, and some applications may recommend related content based on this), default page layout settings, etc., help provide users with a personalized experience, and multiple pages can be adjusted accordingly based on these preferences.

[0145] The current application information may include:

[0146] Version information: used to determine which version of the application is currently being used, so as to prompt users to update. It can also be used to adapt the functional features of different versions and solve possible compatibility issues between different versions based on the version number. The functional display and interaction logic of some pages may vary due to version differences.

[0147] Configuration information: includes some common setting parameters, such as theme color, font size setting (if the application supports global adjustment), default mode of page loading (such as whether to automatically play videos, image loading strategy, etc.), etc. These configurations will affect the visual effects and interaction methods of the entire H5 page in the APP. Multiple pages need to follow the corresponding configuration to display content.

[0148] Functional module information: Know which functional modules are available and activated, such as whether the social function, payment function, message push function, etc. are enabled. Different H5 pages will decide whether to display relevant entrances and guide users to perform corresponding operations based on this functional module information to ensure the continuity and integrity of the functions within the application.

[0149] Specifically, this application can analyze the business logic and functional requirements of the H5 application, clarify which user information and information of the current application are of a public nature, and sort out the various types of public user information and information of the current application mentioned above in detail to determine the data items and their data structures that need to be cached locally. For example, user basic information may be in the form of an object containing multiple fields, and user preference information may be an array in the form of key-value pairs, etc.

[0150] Furthermore, at appropriate code logic locations (generally at key nodes such as the first user login or the first application startup, or when relevant information is updated and re-stored), use the localStorage interface provided by JavaScript to store information.

[0151] Furthermore, when the H5 page is loaded or the public information needs to be used, the data in the cache is obtained in the form of a JSON string, and then the JSON.parse() function is used to convert it back to the original data structure (such as an object, array, etc.), and then it is used accordingly in the page according to business needs, such as displaying the user's avatar in a specific location on the page, displaying the corresponding operation buttons according to the user's permissions, etc.

[0152] When public user information or the information of the current application changes (such as the user modifies the avatar, the application updates the theme color settings, etc.), the cache update operation is triggered in time, and the new data is re-overwritten with the old data originally stored in localStorage according to the storage steps to ensure that the information in the cache is always consistent with the actual situation and that subsequent pages use the latest and accurate information.

[0153] When using localStorage for caching, you need to consider possible exceptions, such as when the browser does not support localStorage (although most modern browsers support it, there may be problems with some specific older versions or special environments). In this case, you can give corresponding prompts or adopt other alternative caching strategies (such as using temporary storage methods such as sessionStorage, but its characteristics are different from localStorage, and the usage logic needs to be adjusted according to actual needs). At the same time, ensure that the data structure and format of storage and reading are compatible in different devices and browser environments to avoid application exceptions caused by data parsing problems.

[0154] The beneficial effects of this embodiment are:

[0155] By storing public user information and current application information in the local cache, the H5 page no longer needs to make a request to the server to obtain the information when loading or needing to use it. It can be read directly from the local cache, reducing the number of network requests and waiting time, so that the page can be loaded and displayed to the user faster, improving the response efficiency of the page.

[0156] Since a large amount of data that originally needed to be obtained from the server can now be obtained from the local cache, the server reduces the response processing of these duplicate information, reduces the server load, saves the server's network bandwidth and computing resources, allowing it to focus more on processing other important business requests, thereby improving the overall operating efficiency of the server.

[0157] When users open an H5 page, they can see the complete page content more quickly, avoiding blank pages and slow loading due to waiting for data requests. At the same time, information such as user preferences based on local cache can also provide users with personalized page display and operation experience that is more in line with personal habits, enhancing the convenience and comfort of user use.

[0158] It reduces the dependence on network requests. Even in a poor network environment (such as weak network signal, large network fluctuations, etc.), the information in the local cache can still be used to ensure the basic display and functional operation of the page, reducing the probability of unstable phenomena such as page errors and inability to load key information due to network problems, so that the application can run relatively stably under various network conditions.

[0159] In one of the embodiments, the static resources include image resources, cascading style sheet files and script language files. The control method for H5 page loading may also include: classifying the image resources and merging the image resources according to the classification results, merging multiple cascading style sheet file resources with the same style rules according to the style rules in each cascading style sheet file in the H5 page, and merging multiple script language files with the same functions and variables according to the definitions of functions and variables in each script language file in the H5 page.

[0160] Among them, static resources can include the following resources:

[0161] HTML resources, or HyperText Markup Language (HyperText Markup Language) files, are the basic structural files of H5 pages. They contain the text content, layout structure, and definitions of various elements of the page. For example, the title, paragraphs, lists, links, and image placeholders in the page are all described and organized through HTML codes. The browser will build the basic framework of the page according to the instructions in the HTML file.

[0162] CSS resources are Cascading Style Sheets files, which are used to set styles for elements in HTML pages, such as fonts, colors, sizes, backgrounds, layouts, borders, and other appearance and typesetting attributes. CSS can make the presentation of HTML pages more beautiful, standardized, and easy to read. Different CSS files can provide different visual styles for the same HTML page.

[0163] JS resources, namely JavaScript files, are a scripting language used to add interactivity and dynamic effects to H5 pages, such as implementing menu expansion and contraction, form validation, image carousel, asynchronous data loading and other functions, making the page more vivid and rich in user experience. At the same time, JavaScript can also be used to interact with the server, obtain and update data, etc.

[0164] These resources are the core elements of building H5 pages. Offline caching of them can greatly improve the loading speed of H5 pages.

[0165] Specifically, first sort out all the image resources used in the H5 page and classify them according to the function, purpose, page module, etc. For example, you can classify the icon images in the page into one category, the background images into another category, the product display images into another category, etc. For example, the small icons in the navigation bar can be classified as icon images because they are all used for navigation.

[0166] Furthermore, analyze the size, format and other characteristics of each type of image to ensure that the same type of images will not have compatibility issues due to these factors in subsequent merging operations. For example, try to ensure that the merged images are of the same format and have a size that facilitates integrated layout.

[0167] Select the appropriate image merging tool, and for each type of image, use the selected tool to merge them into a large image file. For example, use the CSS Sprites tool to combine multiple small icon images into a sprite image. The tool will integrate the small images together according to the set arrangement rules and generate a large image file containing all the small images.

[0168] After generating the merged image, record the position information (usually the coordinate position) and key parameters such as size of each small image in the large image, so that the corresponding small image can be accurately displayed through CSS style later.

[0169] For merging CSS resources, check the contents of each CSS file in the H5 page, carefully sort out the style rules, and find out the repeated or similar style parts. For example, if multiple CSS files define the common font style of the page (such as the same font size, font family, etc.), or have similar appearance style definitions for button elements (such as the button background color, border style, rounded corner settings, etc. are basically the same), these are the parts that can be merged.

[0170] At the same time, the priority and coverage relationship of styles must also be considered to ensure that there will be no style conflicts after the merge. For example, the button styles under certain specific page modules may have special requirements. It is necessary to ensure that their particularity can still be correctly reflected after the merge and will not be overwritten by the general button style.

[0171] Furthermore, the present application can manually extract the repeated style rules through a text editor and organize them into a new CSS file. However, it is more common to use build tools, such as Webpack, which can automatically analyze the dependencies and repeated content between CSS files, integrate the parts that can be merged together, remove redundant style codes, and generate a merged CSS file.

[0172] After the merge is completed, test and verify the merged CSS file to ensure that the styles of each element can be displayed correctly when applied in the H5 page, and there is no style confusion. If there are any problems, adjust the style rules and merging logic in time.

[0173] For the merging of script language files (using JavaScript as an example), analyze the code logic of each JavaScript file in the H5 page, find the functions and variables defined in the file, and find those parts that are repeated in multiple files or have similar functions and can be reused. For example, multiple files have functions for form validation (although the specific form fields to be validated may be slightly different, the basic validation logic such as non-empty validation, format validation, etc. are similar), or some globally used configuration variables are defined (such as the base URL of the page, the default number of paging, etc.), these are the objects to be merged.

[0174] Pay attention to solving variable naming conflicts and other issues to ensure that the merged code logic is clear and there are no errors caused by variables with the same name or function overwriting. For example, if variables with the same name but different uses are defined in different files, they need to be renamed reasonably or the scopes need to be divided appropriately to avoid conflicts.

[0175] Furthermore, the merging is completed with the help of build tools. These tools will extract the functions and variables that can be merged according to the set rules, integrate them into a new JS file, and handle issues such as code dependencies and module loading to ensure that the merged code can be executed correctly.

[0176] Perform strict tests on the merged JS files, including syntax checking and functional testing. Run the code in different page scenarios to see if there are any problems such as logic errors and function call exceptions. If there are any problems, debug and modify the merged related code and configuration in time.

[0177] The beneficial effects of this embodiment are:

[0178] By merging images, CSS files, and JavaScript files separately, multiple files that originally required multiple requests now become one request (such as a merged image, a CSS file, and a JS file), reducing the number of times the browser initiates resource requests to the server, which can effectively alleviate network bandwidth pressure, especially in poor network conditions, and help the page quickly obtain resources for loading.

[0179] Since the number of resource requests is reduced and the merging operation also removes some duplicate and redundant content in the file (such as duplicate style rules in CSS files, duplicate functions in JS files, etc.), the overall resource file size is reduced, and the time it takes for the browser to download resources is shortened, thereby speeding up the loading speed of the H5 page, allowing users to see the complete page content faster, improving the user experience.

[0180] After merging and organizing CSS files with repeated style rules and JS files with the same functions and variables, the code structure becomes clearer and more concise. Developers can more easily find the corresponding code location when performing code maintenance, function expansion or style modification in the future, reducing the complexity of finding and modifying code in multiple scattered files and improving development efficiency.

[0181] The merged resource files are more easily cached by the browser. When the user visits the page again or visits other related pages in the same application, the browser can directly obtain these merged files from the cache without re-requesting, further reducing the page loading time, while also reducing the burden on the server and improving the resource utilization efficiency of the entire system.

[0182] In a second aspect, the present application provides a control device for H5 page loading, such as Figure 2 As shown, the control device for H5 page loading includes: a preloading module 21, an acquisition module 22 and a control module 23, wherein:

[0183] The preloading module 21 is used to respond to the loading request of the H5 page and call the preloading function to obtain the key interface and resources corresponding to the H5 page in the cache;

[0184] The acquisition module 22 is used to obtain the return result of the preloading function and extract the response time, key interfaces, resources and response time corresponding to the H5 page in the return result;

[0185] The control module 23 is used to load the H5 page according to the key interface and resources in the returned result when the key interface and resources in the returned result are in a valid state and the difference between the response time and the current time is within a preset range.

[0186] In one of the embodiments, the preloading module 21 can also collect resource loading time, white screen time and user interactive time, and monitor the loading of the H5 page according to the resource loading time, white screen time and user interactive time.

[0187] In one of the embodiments, the preloading module 21 can also: collect the time when the browser starts loading a new page, the time when the parent view controller is created, the time when the page first draws the page elements, and the time when the page is interactive, determine the resource loading time based on the time when the browser starts loading the new page and the time when the parent view controller is created, determine the white screen time based on the time when the page first draws the page elements and the time when the parent view controller is created, and determine the user interactive time based on the time when the page is interactive and the time when the parent view controller is created.

[0188] In one embodiment, the preloading module 21 can also: when the return result of the preloading function is not received within a preset time period, or the return result does not meet the preset conditions, submit a loading request to the server to request to obtain the key interface and resources corresponding to the H5 page, and load the H5 page according to the key interface and resources corresponding to the H5 page fed back by the server, wherein the preset conditions are that the key interface and resources in the return result are in a valid state, and the difference between the response time and the current time is within a preset range.

[0189] In one embodiment, the resources include static resources of an H5 page, and the acquisition module 22 may also pre-acquire the static resources of the H5 page and the key interfaces corresponding to the H5 page, pre-load the static resources of the H5 page and the key interfaces corresponding to the H5 page, and store them in the cache.

[0190] In one embodiment, the acquisition module 22 may also acquire user public information and information of the current application program, and store the information in a cache.

[0191] In one embodiment, the static resources include image resources, cascading style sheet files and script language files. The control module 23 can also: classify the image resources and merge the image resources according to the classification results, merge multiple cascading style sheet file resources with the same style rules according to the style rules in each cascading style sheet file in the H5 page, and merge multiple script language files with the same functions and variables according to the definitions of functions and variables in each script language file in the H5 page.

[0192] In a third aspect, the present application provides a computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the H5 page loading control method provided in any embodiment of the present application in the first aspect are implemented.

[0193] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 3 As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a control method for loading an H5 page is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0194] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the H5 page loading control method provided in any embodiment of the present application in the first aspect.

[0195] The computer readable storage medium may be Figure 3 A computer-readable storage medium in the computer device shown.

[0196] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing related hardware through a computer program, and the above-mentioned computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0197] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0198] The above embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A method for controlling H5 page loading, characterized in that: The method comprises: In response to the H5 page loading request, the preloading function is called to obtain the key interface and resources corresponding to the H5 page in the cache; Obtain the return result of the preload function, and extract the response time, key interfaces, resources and response time corresponding to the H5 page from the return result; When the key interfaces and resources in the returned result are in a valid state, and the difference between the response time and the current time is within a preset range, the H5 page is loaded according to the key interfaces and resources in the returned result.

2. The method according to claim 1, characterized in that The method further comprises: Collect resource loading time, white screen time, and user interactive time; The loading of the H5 page is monitored according to the resource loading time, white screen time and user interactive time.

3. The method according to claim 2, characterized in that The acquisition resource loading time, white screen time and user interactive time include: Collect the time when the browser starts loading a new page, when the parent view controller is created, when the page elements are first drawn, and when the page becomes interactive; Determine the resource loading time according to the time when the browser starts loading the new page and the time when the parent view controller is created; Determine the white screen time according to the time when the page element is first drawn and the time when the parent view controller is created; The user interactive time is determined according to the interactive time of the page and the time when the parent view controller is created.

4. The method according to claim 1, characterized in that: The method further comprises: When the return result of the preloading function is not received within a preset time period, or the return result does not meet the preset conditions, submitting the loading request to the server to request to obtain the key interface and resources corresponding to the H5 page; Loading the H5 page according to the key interface and resources corresponding to the H5 page fed back by the server; The preset condition is that the key interface and resource in the returned result are in a valid state, and the difference between the response time and the current time is within a preset range.

5. The method according to claim 1, characterized in that The resource includes a static resource of an H5 page, and the method further includes: Pre-acquire the static resources of the H5 page and the key interfaces corresponding to the H5 page; The static resources of the H5 page and the key interfaces corresponding to the H5 page are preloaded and stored in the cache.

6. The method according to claim 1, characterized in that The method further comprises: The user public information and the information of the current application are obtained and stored in the cache.

7. The method according to claim 5, characterized in that The static resources include picture resources, cascading style sheet files and script language files, and the method further includes: Classify the image resources and merge them according to the classification results; Merge multiple CSS file resources with the same style rules according to the style rules in each CSS file in the H5 page; According to the definitions of functions and variables in each script language file in the H5 page, multiple script language files with the same functions and variables are merged.

8. A control device for H5 page loading, characterized in that: The device comprises: A preloading module, used to respond to a loading request of an H5 page and call a preloading function to obtain key interfaces and resources corresponding to the H5 page in the cache; An acquisition module is used to obtain the return result of the preloading function, and extract the response time, the key interface, resources and response time corresponding to the H5 page from the return result; The control module is used to load the H5 page according to the key interface and resources in the returned result when the key interface and resources in the returned result are in a valid state and the difference between the response time and the current time is within a preset range.

9. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

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

Images