A mobile terminal page data loading method and system based on parallel requests
Through the data loading method of parallel requests, the loading interface is identified and configured to initiate business requests in parallel, and combined with local cache optimization of H5 page loading, the problem of traditional H5 slow loading is solved, and fast and real-time data acquisition and display is achieved.
Patent Information
- Application Number
- CN202310858556.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-07-13
- Publication Date
- 2025-08-26
- Estimated Expiration
- 2043-07-13
AI Technical Summary
The traditional H5 page loading method has the problem of slow loading, especially in page displays with more content and more complex content. The existing technologies such as server-side rendering and caching solutions cannot meet the needs of real-time data updates and efficient loading.
Using the mobile page data loading method based on parallel requests, by identifying the data add-on and configuring the loading interface, using H5 native functions to initiate service interface requests in parallel, combining local cache and server requests, the data loading process is optimized.
It realizes rapid acquisition of business data without relying on server changes, improves network data preparation speed, ensures real-time and loading efficiency of data, and reduces intrusion to clients.
Smart Images

Figure CN116796096B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of data transmission and mobile terminal page development, and in particular to a mobile terminal page data loading method and system based on parallel requests. Background Art
[0002] H5 is a widely used technology for presenting web content on mobile devices. When a user accesses an H5 page, the browser first loads the page's HTML structure and CSS styles. Simultaneously, it initiates a server request for required resource files, such as JavaScript files, CSS files, images, and videos. Upon receiving the request, the server transfers the corresponding resource files to the client. During data transmission, the browser uses different transmission methods and caching mechanisms based on factors such as network conditions and device performance to optimize data loading speed and stability. After receiving the data, the browser parses and executes it. For JavaScript files, the browser executes the code and updates the page content according to the code. For CSS files, the browser renders and lays out the page according to the style rules. During the rendering process, the browser calculates the page size and position based on CSS style rules and the HTML structure, and draws the page elements, ultimately generating a complete page for the user. The on-device H5 data loading process may vary depending on factors such as network conditions and device performance. Conventional approaches include optimizing the size, number, and usage of resource files to improve data loading speed and stability, while also utilizing technologies such as JavaScript and CSS to optimize page responsiveness and user experience. However, the traditional H5 data loading method is completely serial loading, which is prone to slow loading problems for pages with more content and more complex displays.
[0003] To address the issues with traditional loading methods, existing technologies have proposed improving page loading efficiency by pre-rendering the page on the server before sending it to the mobile device for display. Typical approaches include server-side rendering (SSR) and static site generation (SSG). In the SSR approach, after receiving a client request, the server generates a complete HTML page based on the requested content and sends it to the client. Upon receiving the HTML page, the client renders it in the browser. The advantage of SSR is its fast rendering speed, which allows page rendering to be completed server-side, making it suitable for scenarios requiring high computational resources and high performance. However, its disadvantage is that it requires server-side support, resulting in high development and maintenance costs. SSG is a technology that converts dynamic content into static pages. In this approach, the server generates a static HTML page based on the user's request and sends it to the client. Upon receiving the static HTML page, the client directly renders it in the browser. The advantages of SSG are its fast generation speed, the lack of server-side support, and its suitability for scenarios primarily consisting of static content. However, SSG also suffers from its inability to render dynamic content and respond to real-time user requests.
[0004] Another existing technology attempts to reduce network request frequency and loading time through caching technologies, such as browser caching and local storage. This typically involves caching the business data for each page when the mobile app launches, and then reading the cache when the page is opened. However, this simple local caching solution cannot meet the needs of real-time data updates and has a limited scope of application. Summary of the Invention
[0005] In order to address the shortcomings of the existing technology, the present invention proposes a mobile page data loading method and system based on parallel requests, which is mainly used in the H5 page business data request process in the mobile client. By executing the H5 request and initiating the business interface request in parallel, the two functions can be carried out relatively independently at the same time, which can greatly speed up the preparation of network data, does not rely on the server, and requires very little modification to the client.
[0006] To achieve the above objectives, the technical solutions adopted by the present invention include:
[0007] A method for loading page data on a mobile terminal based on parallel requests, comprising:
[0008] S1. Identify the data add-in item in the H5 page menu, configure the loading interface corresponding to the data add-in item and add a data tag. The loading interface is associated with the main interface of the page;
[0009] S2. Configure the first network function for native H5 initiation.
[0010] S3. Obtain a user request and determine whether a corresponding loading interface exists based on the user request;
[0011] S4. When it is determined that a corresponding loading interface exists, clear the corresponding local cache using the data tag of the loading interface, and call the first network function to request the service data required for the data add-in item from the server through the loading interface;
[0012] S5. Add corresponding data tags to the acquired business data and store them in the local cache;
[0013] S6. Obtain the business data request sent by H5 to the server, determine whether the corresponding business data exists in the local cache based on the data tag associated with the business data request, and if it is determined that the corresponding business data does not exist in the local cache, send the business data request to the server;
[0014] S7. When it is determined that the corresponding service data exists in the local cache, further determine whether the first network function is called to request the service data. When it is determined that the first network function is not called to request the service data, use the service data stored in the local cache to feedback the service data request.
[0015] S8. When it is determined that the first network function is called to request service data, the service data obtained by the first network function is used to feedback the service data request.
[0016] Furthermore, the step S3 further includes:
[0017] When it is determined that there is no corresponding loading interface, a business data request is sent to the server.
[0018] Further, the determining whether there is service data for calling the first network function request includes:
[0019] Determine whether there is an ongoing operation of calling the first network function to request service data, and / or whether there is an operation of calling the first network function to request service data that is planned to be executed within a preset time threshold.
[0020] Furthermore, the step S8 further includes:
[0021] After the service data obtained by using the first network function is fed back to the service data request, the obtained service data is not stored in the local cache.
[0022] Furthermore, the step S4 further includes:
[0023] When it is determined that a corresponding loading interface exists, the H5 loading page operation continues to be executed according to the user request, and at the same time, the corresponding local cache is cleared using the data tag of the loading interface, and the first network function is called to request the business data required for the data loading item from the server through the loading interface.
[0024] Furthermore, the execution of the H5 loading page operation includes sequentially executing:
[0025] Create native pages;
[0026] Initialize the H5 container;
[0027] Load the H5 page;
[0028] Parse H5 page resources and identify data add-ons;
[0029] Send business data request to the server based on the data add-in item.
[0030] The present invention also relates to a mobile terminal page data loading system based on parallel requests, which is characterized by comprising:
[0031] The interface management module is used to configure the loading interface of the corresponding data add-in item and add data labels;
[0032] A network management module is used to configure the first network function for H5 native initiation;
[0033] A parallel request module, configured to call the first network function to request the service data required by the data add-in item from the server through the loading interface;
[0034] Cache module, used to store acquired business data;
[0035] A cache judgment module is used to judge whether the corresponding business data exists in the local cache according to the data tag associated with the business data request;
[0036] The request judgment module is used to judge whether there is a request for service data for calling the first network function.
[0037] The present invention also relates to a computer-readable storage medium, characterized in that a computer program is stored on the storage medium, and the computer program implements the above method when executed by a processor.
[0038] The present invention also relates to an electronic device, characterized in that it comprises a processor and a memory;
[0039] The memory is used to store the loading interface, user requests and service data requests;
[0040] The processor is used to execute the above method by calling the loading interface, user request and business data request.
[0041] The present invention also relates to a computer program product, comprising a computer program and / or instructions, characterized in that the computer program and / or instructions implement the steps of the above method when executed by a processor.
[0042] The beneficial effects of the present invention are:
[0043] The mobile page data loading method and system based on parallel requests described in the present invention are mainly used in the H5 page business data request process in the mobile client. By executing the H5 request and initiating the business interface request in parallel, the two functions can be carried out relatively independently at the same time. Business data can be quickly obtained without making special changes to the server or adding additional function support. This can greatly speed up the preparation of network data while ensuring the real-time nature of the data, with little intrusion into the existing client process, simple implementation, and strong operability. BRIEF DESCRIPTION OF THE DRAWINGS
[0044] Figure 1 The figure is a flow chart of a method for loading page data on a mobile terminal based on parallel requests according to the present invention.
[0045] Figure 2 This is a structural diagram of a mobile terminal page data loading system based on parallel requests according to the present invention. DETAILED DESCRIPTION
[0046] In order to more clearly understand the content of the present invention, it will be described in detail with reference to the accompanying drawings and embodiments.
[0047] The first aspect of the present invention relates to a process of steps as follows Figure 1 The mobile page data loading method based on parallel requests shown includes:
[0048] S1. Identify data add-in items in the H5 page menu, configure a loading interface for the corresponding data add-in item, and add a data tag. The loading interface is associated with the main page interface. Preferably, the business side can define a unique ID for each loading interface as a data tag. When the app is launched, the configuration sheet containing the above information can be retrieved.
[0049] S2. Configure the first network function for native H5 initiation.
[0050] S3. Obtain the user request and determine whether a corresponding loading interface exists based on the user request. By placing the network interface request when the user clicks the jump button, the network interface can be initiated earlier, avoiding waiting for the linear execution process and improving execution efficiency.
[0051] When it is determined that there is no corresponding loading interface, a business data request is sent to the server.
[0052] S4. When it is determined that a corresponding loading interface exists, the corresponding local cache is cleared using the data tag of the loading interface, and the first network function is called to request the service data required for the data add-in item from the server through the loading interface.
[0053] Preferably, when it is determined that a corresponding loading interface exists, the H5 loading page operation is continued according to the user request, and the corresponding local cache is cleared using the data tag of the loading interface, and the first network function is called to request the service data required by the data loading item from the server through the loading interface. Specifically, executing the H5 loading page operation includes sequentially performing the following: creating a native page; initializing an H5 container; loading the H5 page; parsing the H5 page resources and identifying the data loading item; and sending a service data request to the server according to the data loading item.
[0054] S5. Add corresponding data tags to the acquired business data and store them in the local cache.
[0055] S6. Obtain the business data request sent by H5 to the server, and determine whether the corresponding business data exists in the local cache based on the data tag associated with the business data request. When it is determined that the corresponding business data does not exist in the local cache, send the business data request to the server.
[0056] S7. When it is determined that the corresponding business data exists in the local cache, further determine whether there is a call to the first network function to request the business data. When it is determined that there is no call to the first network function to request the business data, use the business data stored in the local cache to feedback the business data request.
[0057] Specifically, determining whether there is a call to the first network function to request business data includes: determining whether there is an operation of calling the first network function to request business data being executed, and / or whether there is an operation of calling the first network function to request business data planned to be executed within a preset time threshold.
[0058] S8. When it is determined that the first network function is called to request service data, the service data obtained by the first network function is used to feedback the service data request. Preferably, after the service data obtained by the first network function is used to feedback the service data request, the obtained service data is not stored in the local cache.
[0059] Another aspect of the present invention also relates to a mobile terminal page data loading system based on parallel request, the structure of which is as follows: Figure 2 Shown, including:
[0060] The interface management module is used to configure the loading interface of the corresponding data add-in item and add data labels;
[0061] A network management module is used to configure the first network function for H5 native initiation;
[0062] A parallel request module, configured to call the first network function to request the service data required by the data add-in item from the server through the loading interface;
[0063] Cache module, used to store acquired business data;
[0064] A cache judgment module is used to judge whether the corresponding business data exists in the local cache according to the data tag associated with the business data request;
[0065] The request judgment module is used to judge whether there is a request for service data for calling the first network function.
[0066] By using this system, the above-mentioned calculation and processing method can be executed and the corresponding technical effects can be achieved.
[0067] An embodiment of the present invention also provides a computer-readable storage medium capable of implementing all steps of the method in the above embodiment. The computer-readable storage medium stores a computer program that implements all steps of the method in the above embodiment when executed by a processor.
[0068] An embodiment of the present invention also provides an electronic device for executing the above-mentioned method. As an implementation device of the method, the electronic device has at least a processor and a memory, and in particular, the memory stores the data and related computer programs required for executing the method, such as loading interfaces, user requests, and business data requests, etc., and the processor calls the data and programs in the memory to execute all the steps of the implementation method and obtains the corresponding technical effects.
[0069] Preferably, the electronic device may include a bus architecture, which may include any number of interconnected buses and bridges, and the bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripheral devices, voltage regulators, and power management circuits, which are all well known in the art and, therefore, will not be described further herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter can be the same component, namely a transceiver, which provides a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory can be used to store data used by the processor when performing operations.
[0070] Additionally, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operating control) employed may include a microprocessor or other processor device and / or logic device, which receives input and controls the operation of various components of the electronic device. The memory may be one or more of a cache, flash memory, a hard drive, removable media, volatile memory, non-volatile memory, or other suitable devices, and may store the aforementioned data and information. It may also store programs for executing the relevant information, and the processor may execute the programs stored in the memory to implement information storage or processing. The input unit is used to provide input to the processor, and may, for example, be a keypad or touch input device. The power supply is used to provide power to the electronic device. The display is used to display objects such as images and text, and may, for example, be an LCD display. The communication module is a transmitter / receiver that sends and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, similar to the case of a conventional mobile communication terminal. Based on different communication technologies, multiple communication modules can be provided in the same electronic device, such as a cellular network module, a Bluetooth module, and / or a wireless local area network module. The communication module (transmitter / receiver) is also coupled to a speaker and a microphone via an audio processor to provide audio output via the speaker and receive audio input from the microphone, thereby implementing common telecommunications functions. The audio processor may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor is also coupled to a central processing unit, enabling local recording via the microphone and playback of stored audio via the speaker.
[0071] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0072] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, 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, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A system that specifies the functions of a box or boxes.
[0073] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction system that is implemented in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0074] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 The present invention is described in detail below. ...
[0075] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present invention are intended to be covered by the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.
Claims
1. A method for loading mobile page data based on parallel requests, characterized in that: include: S1. Identify the data add-in item in the H5 page menu, configure the loading interface corresponding to the data add-in item and add a data tag. The loading interface is associated with the main interface of the page; S2. Configure the first network function for native H5 initiation. S3. Obtain a user request and determine whether a corresponding loading interface exists based on the user request; S4. When it is determined that a corresponding loading interface exists, clear the corresponding local cache using the data tag of the loading interface, and call the first network function to request the service data required for the data add-in item from the server through the loading interface; S5. Add corresponding data tags to the acquired business data and store them in the local cache; S6. Obtain the business data request sent by H5 to the server, determine whether the corresponding business data exists in the local cache based on the data tag associated with the business data request, and if it is determined that the corresponding business data does not exist in the local cache, send the business data request to the server; S7. When it is determined that the corresponding service data exists in the local cache, further determine whether the first network function is called to request the service data. When it is determined that the first network function is not called to request the service data, use the service data stored in the local cache to feedback the service data request. S8. When it is determined that the first network function is called to request service data, the service data obtained by the first network function is used to feedback the service data request.
2. The method according to claim 1, wherein The step S3 further comprises: When it is determined that there is no corresponding loading interface, a business data request is sent to the server.
3. The method according to claim 1, wherein The determining whether there is service data for calling the first network function request includes: Determine whether there is an ongoing operation of calling the first network function to request service data, and / or whether there is an operation of calling the first network function to request service data that is planned to be executed within a preset time threshold.
4. The method according to claim 1, wherein The step S8 further includes: After the service data obtained by using the first network function is fed back to the service data request, the obtained service data is not stored in the local cache.
5. The method according to claim 1, wherein The step S4 further includes: When it is determined that a corresponding loading interface exists, the H5 loading page operation continues to be executed according to the user request, and at the same time, the corresponding local cache is cleared using the data tag of the loading interface, and the first network function is called to request the business data required for the data loading item from the server through the loading interface.
6. The method according to claim 5, wherein The execution of the H5 loading page operation includes sequentially executing: Create native pages; Initialize the H5 container; Load the H5 page; Parse H5 page resources and identify data add-ons; Send business data requests to the server based on the data add-in.
7. A mobile terminal page data loading system based on parallel requests, characterized in that: include: The interface management module is used to configure the loading interface of the corresponding data add-in item and add data labels; A network management module is used to configure the first network function for H5 native initiation; A parallel request module, configured to call the first network function to request the service data required by the data add-in item from the server through the loading interface; Cache module, used to store acquired business data; A cache judgment module is used to judge whether the corresponding business data exists in the local cache according to the data tag associated with the business data request; The request judgment module is used to judge whether there is a request for service data for calling the first network function.
8. A computer-readable storage medium, characterized in that The storage medium stores a computer program, which implements the method according to any one of claims 1 to 6 when executed by a processor.
9. An electronic device, characterized in that: including processor and memory; The memory is used to store the loading interface, user requests and service data requests; The processor is configured to execute the method according to any one of claims 1 to 6 by calling a loading interface, a user request, and a service data request.
10. A computer program product comprising a computer program and / or instructions, characterized in that When the computer program and / or instructions are executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.
Citation Information
Patent Citations
Multiscreen real-time interaction system based on Web technology
CN105635259A
Data access method and apparatus
CN105677708A